Skip to content

Commit 6bfff26

Browse files
authored
[Term Entry] JavaScript Arrays: flat() (#7113)
* [Term Entry] JavaScript Arrays: flat() #7084 - Initial commit - Create flat folder and flat.md file - Add template from the term entry template file * [Term Entry] JavaScript Arrays: flat() #7084 - add comprehensive guide with definitions and examples - add link to codecademy array docs - complete first draft of flat.md * [Term Entry] JavaScript Arrays: flat() #7084 - correct typos - add more descriptive example subtitles to enhance user experience finding information quickly * [Term Entry] JavaScript Arrays: flat() #7084 - add a newline at the end of the file to solve the failed linting test * [Term Entry] JavaScript Arrays: flat() - Fix formatting using prettier * [Term Entry] JavaScript Arrays: flat() #7084 - Added a codebyte example * content fixes * Update flat.md * minor changes ---------
1 parent a2b1a3c commit 6bfff26

File tree

1 file changed

+143
-0
lines changed
  • content/javascript/concepts/arrays/terms/flat

1 file changed

+143
-0
lines changed
Lines changed: 143 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,143 @@
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

Comments
 (0)