|
| 1 | +--- |
| 2 | +Title: 'flat()' |
| 3 | +Description: 'Creates a new array with all sub-array elements recursively concatenated into it up to the specified depth.' |
| 4 | +Subjects: |
| 5 | + - 'Computer Science' |
| 6 | + - 'Web Development' |
| 7 | +Tags: |
| 8 | + - 'Arrays' |
| 9 | + - 'Methods' |
| 10 | +CatalogContent: |
| 11 | + - 'introduction-to-javascript' |
| 12 | + - 'paths/front-end-engineer-career-path' |
| 13 | +--- |
| 14 | + |
| 15 | +The **`flat()`** method creates a new [array](https://www.codecademy.com/resources/docs/javascript/arrays) with sub-array elements concatenated into it up to the specified depth. It is a non-mutating method, meaning it returns a new array without modifying the original one. |
| 16 | + |
| 17 | +## Syntax |
| 18 | + |
| 19 | +```pseudo |
| 20 | +array.flat(depth); |
| 21 | +``` |
| 22 | + |
| 23 | +**Parameters:** |
| 24 | + |
| 25 | +- `depth` (optional): The number of levels to flatten. Defaults to `1`. Use `Infinity` to flatten all nested arrays completely. |
| 26 | + |
| 27 | +**Return value:** |
| 28 | + |
| 29 | +A new array with the sub-array elements flattened up to the specified depth. The original array remains unchanged. |
| 30 | + |
| 31 | +## Example 1: Using `flat()` With Default Value |
| 32 | + |
| 33 | +This example demonstrates using `flat()` with the default depth of `1`: |
| 34 | + |
| 35 | +```js |
| 36 | +const arr = [1, 2, [3, 4]]; |
| 37 | +console.log(arr.flat()); |
| 38 | +``` |
| 39 | + |
| 40 | +The output of this code is: |
| 41 | + |
| 42 | +```shell |
| 43 | +[1, 2, 3, 4] |
| 44 | +``` |
| 45 | + |
| 46 | +`arr.flat()` flattens one level deep, so the nested array `[3, 4]` is unpacked into the main array. |
| 47 | + |
| 48 | +## Example 2: Using `flat()` on Deeper Nested Arrays |
| 49 | + |
| 50 | +This example demonstrates using `flat()` with the default depth of `1`, with multiple layers of nested sub-arrays: |
| 51 | + |
| 52 | +```js |
| 53 | +const arr = [1, 2, 3, [4, 5, [6, 7]]]; |
| 54 | +console.log(arr.flat()); |
| 55 | +``` |
| 56 | + |
| 57 | +The output of this code is: |
| 58 | + |
| 59 | +```shell |
| 60 | +[1, 2, 3, 4, 5, [6, 7]] |
| 61 | +``` |
| 62 | +
|
| 63 | +`arr.flat()` flattens the array one level deep. It unpacks the first-level nested array `[4, 5, [6, 7]]`, moving its elements into the main array. However, the inner array `[6, 7]` remains nested at a deeper level. |
| 64 | +
|
| 65 | +## Example 3: Using `flat()` with a Specified Depth |
| 66 | +
|
| 67 | +This example demonstrates using `flat()` with a depth of `2`, applied to an array with multiple layers of nested sub-arrays: |
| 68 | +
|
| 69 | +```js |
| 70 | +const arr = [1, 2, 3, [4, 5, [6, 7]]]; |
| 71 | +console.log(arr.flat(2)); |
| 72 | +``` |
| 73 | +
|
| 74 | +The output of this code is: |
| 75 | +
|
| 76 | +```shell |
| 77 | +[ |
| 78 | + 1, 2, 3, 4, |
| 79 | + 5, 6, 7 |
| 80 | +] |
| 81 | +``` |
| 82 | +
|
| 83 | +`arr.flat(2)` flattens the array two levels deep. First, it unpacks the first-level nested array `[4, 5, [6, 7]]`, moving its elements into the main array. Then, the inner array `[6, 7]` is unpacked, resulting in an entirely flattened array with no nested sub-arrays. |
| 84 | +
|
| 85 | +## Example 4: Using `flat()` with `Infinity` Depth |
| 86 | +
|
| 87 | +This example demonstrates using `flat()` with a depth of `Infinity`, which fully flattens an array no matter how deeply nested its sub-arrays are: |
| 88 | +
|
| 89 | +```js |
| 90 | +const arr = [1, [2, [3, [4, [5]]]]]; |
| 91 | +console.log(arr.flat(Infinity)); |
| 92 | +``` |
| 93 | +
|
| 94 | +The output of this code is: |
| 95 | +
|
| 96 | +```shell |
| 97 | +[1, 2, 3, 4, 5] |
| 98 | +``` |
| 99 | +
|
| 100 | +`arr.flat(Infinity)` recursively flattens the array to its deepest level. All nested sub-arrays, no matter how deeply they are nested, are unpacked into a single flat array. This is useful when the depth of nesting is unknown or highly variable. |
| 101 | +
|
| 102 | +## Example 5: Using `flat()` on Sparse Arrays with Empty Slots |
| 103 | +
|
| 104 | +This example demonstrates using `flat()` on sparse arrays: |
| 105 | +
|
| 106 | +```js |
| 107 | +const arr = [1, 2, , [4, , 6], 7]; |
| 108 | +console.log(arr.flat()); |
| 109 | +``` |
| 110 | +
|
| 111 | +The output of the code is: |
| 112 | +
|
| 113 | +```shell |
| 114 | +[1, 2, 4, 6, 7] |
| 115 | +``` |
| 116 | +
|
| 117 | +`flat()` removes empty slots (holes) in sparse arrays during flattening, treating them as if they don't exist. |
| 118 | +
|
| 119 | +## Example 6: Flattening Arrays with Mixed Element Types |
| 120 | +
|
| 121 | +The `flat()` method only flattens nested arrays. Elements that are not arrays remain the same: |
| 122 | +
|
| 123 | +```js |
| 124 | +const arr = [1, 'hello', [2, 3], { a: 4 }]; |
| 125 | +console.log(arr.flat()); |
| 126 | +``` |
| 127 | +
|
| 128 | +The output of the code is: |
| 129 | +
|
| 130 | +```shell |
| 131 | +[1, "hello", 2, 3, { a: 4 }] |
| 132 | +``` |
| 133 | +
|
| 134 | +## Codebyte Example |
| 135 | +
|
| 136 | +The following code demonstrates how different `.flat()` depths affect an array: |
| 137 | +
|
| 138 | +```codebyte/js |
| 139 | +const arr = [1, 'hello', [2, 3, [4, [5, 'world']]], { a: 4 }]; |
| 140 | +console.log('depth = default (1) : ', arr.flat()); |
| 141 | +console.log('depth = 2 : ', arr.flat(2)); |
| 142 | +console.log('depth = Infinity : ', arr.flat(Infinity)); |
| 143 | +``` |
0 commit comments