JavaScript Flatten Array Example

JavaScript Flatten Array Example | Flattening of the array results in a reduction in the array’s dimensionality. In other words, it is a method for reducing an array’s dimensions to a smaller number.

Let’s have a look at the following two-dimensional nested array. Flattening an array reduces multiple-layer nested arrays to a single layer. It would be [1, [2, [3, 4, 5]] => [1, 2, 3, 4, 5] to describe it in code. Before learning how to flatten a JavaScript array, let’s look at an example to grasp better what we’re aiming for.

let arr = [
    [1, 2],
    [3, 4],
    [5, 6][7, 8, 9],
    [10, 11, 12, 13, 14, 15]
];

When an array’s elements are other arrays, the array is said to be nested. When flattened, the above array, arr, would resemble:-

newArray = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15 ]

We can use various methods to flatten an array:-

• Method-1: Simple ways to obtain a flattened array in JavaScript
  • Using concat() and apply() methods to flatten an array
  • Using the spread operator
• Method 2: By setting the depth, a flattened array is obtained.

Flatten Array in JavaScript Using concat() & apply() Methods

Here, we employ 2 techniques, concat() and apply (). To use the method, we supply two arguments. All the elements (sub-arrays) provided into an empty array are then concatenated with the array we declared earlier (arr), yielding a 1-dimensional array.

When we apply the spread operator, in this case on the array arr that we previously declared, the Spread syntax allows the concatenation operation on all of the array’s elements and stores the result in an empty array, giving us a flattened array.

let arr = [
  [1, 2],
  [3, 4],
  [5, 6],
  [7, 8, 9],
  [10, 11, 12, 13, 14, 15],
];
let flatArray = [].concat.apply([], arr);
console.log(flatArray);

Output:-

[ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15 ]

JavaScript Flatten Array Using Spread Operator

When we apply the spread operator, in this case on the array arr that we previously declared, the Spread syntax allows the concatenation operation on all of the array’s elements and stores the result in an empty array, giving us a flattened array.

let arr = [
  [1, 2],
  [3, 4],
  [5, 6],
  [7, 8, 9],
  [10, 11, 12, 13, 14, 15],
];
let flatArray = [].concat(...arr);
console.log(flatArray);

Output:-

[ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15 ]

Flatten Array in JavaScript Using flat() Method

By setting the depth, a flattened array is obtained. The number of bracket pair levels in an array determines its depth. We can flatten an array to the level we choose by specifying the depth.

When using the flat() function, all elements of sub-arrays up to the specified depth are concatenated into the new array. When the depth parameter is not supplied, a depth of 1 is considered by default.

let arr1 = [1, 2, [3, [4, 5, 6], 7], 8];
console.log(arr1.flat());

Output:-

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

If you enjoyed this post, share it with your friends. Do you want to share more information about the topic discussed above or do you find anything incorrect? Let us know in the comments. Thank you!

Search