Flatten an array in JavaScript
This post will discuss how to flatten an array in JavaScript.
1. Using Array.flat() function
The Array.flat() function is a built-in function that returns a new array with all sub-array elements concatenated into it recursively up to a specified depth. The depth is 1 by default.
|
1 2 3 4 5 6 |
const arr = [[1, 2], [3, [4, [5, 6]]]]; // specify the depth level to flatten const flattened = arr.flat(2); console.log(flattened); // [1, 2, 3, 4, 5] |
We can use it to recursively flatten a nested array of any depth by passing Infinity to the flat() function. This function was introduced with ECMA 2019. Note that the flat() function removes any empty slots in the array:
|
1 2 3 4 |
const arr = [[1,2],,[3,4,5]]; const flattened = arr.flat(); console.log(flattened); // [1, 2, 3, 4, 5] |
2. Using Array.prototype.concat() function
The Array.prototype.concat() built-in function can be used to create a custom flattening function. The concat() function merges two or more arrays into one, and it can be used to flatten an array that is one level deep. Here’s an example of how we can achieve this:
|
1 2 3 4 |
const arr = [[1, 2], [3, 4, 5]]; const flattened = Array.prototype.concat.apply([], arr); console.log(flattened); // [1, 2, 3, 4, 5] |
We can use the concat() function with the reduce() function to flatten a single-level array. The reduce() function applies a function to each element of the array and accumulates the result in a single value. The following example demonstrates this:
|
1 2 3 4 |
const arr = [[1, 2], [3, 4, 5]]; const flattened = arr.reduce((a, b) => a.concat(b), []); console.log(flattened); // [1, 2, 3, 4, 5] |
We can further simplify the code using the spread syntax (…), which expands an array into individual elements. For example, the spread operator is used below with the concat() function to flatten an array one-level deep.
|
1 2 3 4 |
const arr = [[1, 2], [3, 4, 5]]; const flattened = [].concat(...arr); console.log(flattened); // [1, 2, 3, 4, 5] |
3. Using Underscore/Lodash Library
We can use the _.flatten() function from the Underscore library, which returns a new array with all sub-array elements concatenated into it recursively. By default, it can flatten a nested array of any depth. To restrict it to flatten only a single-level, we can set the second optional parameter to true.
|
1 2 3 4 5 6 7 8 9 10 |
// import underscore library const _ = require('underscore'); const arr = [[1, 2], [3, [4, [5, 6]]]]; let flattened = _.flatten(arr, true); console.log(flattened); // [1, 2, 3, [4, [5, 6]]] flattened = _.flatten(arr); console.log(flattened); // [1, 2, 3, 4, 5, 6] |
The _.flatten() function is also included in the Lodash library, which flattens an array a single-level deep. Lodash has a another function _.flattenDepth() function, which is similar to the _.flatten() function, but accepts a second argument that specifies the depth level to flatten. To flatten an array to an infinite depth, we can use the _.flattenDeep() function from the Lodash library.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
// import lodash library const _ = require('lodash'); const arr = [[1, 2], [3, [4, [5, 6]]]]; // flatten the array to a depth of 1 let flattened = _.flatten(arr); console.log(flattened); // [1, 2, 3, [4, [5, 6]]] // flatten the array to a depth of 2 flattened = _.flattenDepth(arr, 2); console.log(flattened); // [1, 2, 3, 4, [5, 6]] // flatten the array to an infinite depth flattened = _.flattenDeep(arr); console.log(flattened); // [1, 2, 3, 4, 5, 6] |
That’s all about flattening an array in JavaScript.
Thanks for reading.
To share your code in the comments, please use our online compiler that supports C, C++, Java, Python, JavaScript, C#, PHP, and many more popular programming languages.
Like us? Refer us to your friends and support our growth. Happy coding :)