JavaScript Array flat()

The JavaScript Array flat() method creates a new array with all sub-array elements concatenated into it recursively up to the specified depth.

The syntax of the flat() method is:

arr.flat(depth)

Here, arr is an array.


flat() Parameters

The flat() method takes in:

  • depth (optional) - Integer specifying how deep a nested array should be flattened. Its default value is 1.

Return value from flat()

  • Returns a new array with the sub-array elements concatenated into it.

Notes:

  • The flat() method does not change the original array.
  • The flat() method removes empty slots in arrays.

Example: Using flat() method

const arr1 = [1, [2, 3, 4], 5];
const flattened1 = arr1.flat();
console.log(flattened1); // [ 1, 2, 3, 4, 5 ]

const arr2 = [1, 2, [3, 4, [5, 6]]];

const flattened2 = arr2.flat();
console.log(flattened2); // [1, 2, 3, 4, [5, 6]]

const flattened3 = arr2.flat(2);
console.log(flattened3); //  [ 1, 2, 3, 4, 5, 6 ]

const arr4 = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]];
const flattened4 = arr4.flat(Infinity);
console.log(flattened4); // [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ]

// flat() removes holes
const numArr = [1, , 3];
console.log(numArr.flat()); // [ 1, 3 ]

Output

[ 1, 2, 3, 4, 5 ]
[ 1, 2, 3, 4, [ 5, 6 ] ]
[ 1, 2, 3, 4, 5, 6 ]
[
  1, 2, 3, 4,  5,
  6, 7, 8, 9, 10
]
[ 1, 3 ]

As shown in the example, we can use Infinity to recursively flatten the array to any depth.


Recommended Reading: JavaScript Array flatMap()