How to Flatten a Nested JavaScript Array

JavaScript Array has the capability to store multiple arrays in itself. When an inner array or sub-array is added to an array, it is known as a “Multi-dimensional” or “Nested” array. There exist certain scenarios in which you may need to create an array that comprises all of the nested JavaScript array elements in their original order. If that’s the case, then flatten the created nested array and reduce its dimensionality according to the specified depth.

This post will explain the methods to flatten a Nested JavaScript array. But before jumping into it, we will explain the term “depth” as it is associated with the flattening procedure.

Depth of Nested JavaScript array

The operation of adding an inner array or nesting an array in normal array increments “1” in the depth level. For instance, with no nested array, a normal array will have a “0” depth level:

[12, 23, 34, 45, 56, 67, 78] // Depth level = 0

With one inner sub-array, the depth level will become “1”:

[12, 23, 34, [45, 56, 67, 78]] // Depth level = 1

Similarly, increasing the number of inner sub-array will also increase the depth level:

[12, 23, [34, [45, 56, 67, 78]]] // Depth level = 2

[12, [23, [34, [45, 56, 67, 78]]]] // Depth level = 3

Now, check out the method of flattening an array in the JavaScript version prior to ES6.

How to Flatten a Nested JavaScript Array using concat() method and spread operator […]

The combination of “concat()” method and “spread operator […]” method is used to flatten a nested JavaScript array in such as way that the spread operator […] spread the elements of the specified array and then concatenate them in an empty array using the JavaScript concat() method:

let array= [12, 23, [43, 34, 56]];

let flatArray= [].concat(...array);

console.log(flatArray);

Output

However, this approach only flattens the level one nested arrays:

const numArray= [12, 23, [34, 45, 56, [67, 78]]];

let flatArray= [].concat(...numArray);

console.log(flatArray);

The above-given code will add the inner array of “numArray” as a whole to “flatArray” as it cannot spread its elements:

What if you have to flatten a deeply nested array? To do so, you can utilize the “Array.flatten()” method offered by the ES6 JavaScript version.

How to Flatten a Nested JavaScript Array using Array.flat() method

The “Array.flat()” method is embedded in ES6 that enables you to “flatten” a nested JavaScript Array. This method returns a new array in which all of the elements of sub-arrays are concatenated according to the specified depth.

Syntax of Array.flat() method to flatten a Nested JavaScript Array

let newArray = Array.flat([depth])

Here, the “Array” object will invoke the “flat()” method while passing “depth” as an argument.

Now let’s check some examples to understand the stated concept.

Example 1: How to Flatten a Nested JavaScript Array with one level depth

First of all, we will create a Nested JavaScript Array having the following elements and a sub-array:

const numArray= [12, 23, [34, 45, 56]];

Then, we will flatten the created nested “numArray” with the help of the “flat()” method:

const flatArray= numArray.flat();

console.log(flatArray);

We have not passed the “depth” argument, so the “numArray.flat()” will consider the default depth value, which is “1” and concatenates the JavaScript nested array elements 34, 45, 56 to the newly created “flatArray”:

Example 2: How to Flatten a Nested JavaScript Array with two-level depth

In the following example, we will specify “2” as the “depth” level. Upon doing so the “numArray.flat()” will flatten the inner two sub-arrays and add their elements in the resultant “flatArray()”:

const numArray= [12, 23, [34, 45, 56, [67, 78]]];

const flatArray= numArray.flat(2);

console.log(flatArray);

Execution of the given program will show the following output:

Example 3: How to Flatten a Nested JavaScript Array without knowing the depth level

If you have no idea about the array depth level, pass “infinity” as an argument to the “Array.flat()” method. In this case, all sub-arrays elements are “recursively” concatenated into another array.

For instance, to flatten the below-given “numArray”, we will specify “infinity” in place of the depth level argument:

const numArray= [12, 23, [34, 45, 56, [67, 78, [89, 90]]]];

const flatArray= numArray.flat(Infinity);

console.log(flatArray);

As you can see, the “numArray.flat()” method has successfully flattened the nested “numArray”:

That was all the essential information related to flattening an array in JavaScript. You can further work on it according to your preferences.

Conclusion

The Array.flat() method is primarily used to flatten a Nested JavaScript array. It accepts the depth level as an argument and returns a new array in which all of the elements of sub-arrays are concatenated according to the specified depth. Prior to ES6, the combination of some built-in methods such as concat() and spread operator […] can only flatten the level one array; however, the Array.flat() method assists in flattening deeply nested arrays. This write-up explained the procedure to flatten an array in JavaScript.