How to flatten an array in JavaScript

Introduction:

The technique of flattening an array reduces the array's n dimensions to 1 dimension. In simple words, it means to combine several nested arrays into a single array to create a single, one-dimensional array.

Just decreasing an array's dimensions is known as flattening it. The method involves combining all the nested components present in an array into a single one-dimensional array.

For example:-

Original Array : [5,7,[2,1,10],[9,3,4,8],6] 
Flattened Array : [5,7,2,1,10,9,3,4,8,6]

Concat() and apply () in JavaScript to Flatten an Array:

This function flattens an array in JavaScript by using the concat() and apply() methods.

Implementation in javascript:

arr = [1,2,[3,4,5],[6,7,8,9],10] 
console.log("Original Array: ",arr)
let flattened_array = [].concat.apply([], arr);
console.log("Flattened Array: ", flattened_array)

Output:

Original Array:  [ 1, 2, [ 3, 4, 5 ], [ 6, 7, 8, 9 ], 10 ]
Flattened Array:  [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ]

Working mechanism:

We built an array in the first step, which we want to flatten. The array was then flattened using the concat() and apply() routines. The concat() function will concatenate the result to create a single array after applying a parameter array as an argument, which will reduce the array to one dimension. We have now printed our array that has been flattened.

Program in JavaScript to Flatten an Array Using the Spread Operator in ES6:

With this technique, we'll flatten an array in JavaScript using the Spread Operator from ES6.

Implementation in javascript:

arr = [1,2,[3,4,5],[6,7,8,9],10] 
console.log("Original Array: ",arr)
let flattened_array=  [].concat(...arr);
console.log("Flattened Array: ", flattened_array)

Output:

Original Array:  [ 1, 2, [ 3, 4, 5 ], [ 6, 7, 8, 9 ], 10 ]
Flattened Array:  [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ]

Working mechanism:

We built an array in the first step, which we want to flatten. The array was then flattened using the Spread Operator in ES6 ('...'). The concat() function will concatenate the result to create a single array when the Spread Operator "..." is used before the array to flatten the array. We have now printed our array that has been flattened.

Program in JavaScript to Flatten an Array Using the reduce approach:

With this method, we'll flatten an array in JavaScript by using the reduce method.

Implementation in javascript:

arr = [1,2,[3,4,5],[6,7,8,9],10] 
console.log("Original Array: ",arr)
let flattened_array = arr.reduce((acc, val) => {
    return acc.concat(val)
}, []);
console.log("Flattened Array: ", flattened_array)

Output:

Original Array:  [ 1, 2, [ 3, 4, 5 ], [ 6, 7, 8, 9 ], 10 ]
Flattened Array:  [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ]

Working mechanism:

We built an array in the first step, which we want to flatten. After that, we flattened the array using the reduce method. We have now printed our array that has been flattened.

Program in JavaScript to Flatten an Array Using forEach ():

In this program, we will be used the forEach() loop to flatten an array in JavaScript.

Implementation in javascript:

const arr = [[1,2],[3,4,5],[6,7,8,9],[10]];
console.log("Original Array: ",arr)
const flattened_array = []
arr.forEach(array => {
flattened_array.push(...array);
});
console.log("Flattened Array: ", flattened_array)

Output:

Original Array:  [ [ 1, 2 ], [ 3, 4, 5 ], [ 6, 7, 8, 9 ], [ 10 ] ]
Flattened Array:  [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ]

Working mechanism:

We built an array in the first step, which we want to flatten. The array was then flattened using the forEach() loop. We flattened the array inside of the forEach() loop by using the Spread operator '...'. We have now printed our array that has been flattened.

Program in JavaScript to Flatten an Array Using Reduce, Concat, and IsArray:

This method flattens an array in JavaScript by repeatedly using the reduce(), concat(), and isArray() methods.

Implementation in javascript:

const arr = [1,2,[3,4,5],[6,7,8,9],10] 
console.log("Original Array: ",arr)
function flatten (arr) {
      var flattened_arr = [];
      for (var i = 0; i<arr.length; i++) {
        if (Array.isArray(arr[i])) {
flattened_arr = flattened_arr.concat(flatten(arr[i]));
        } else {
flattened_arr.push(arr[i]);
        }
      }
      return flattened_arr;
    }
console.log("Flattened Array: ", flatten(arr))

Output:

Original Array:  [ 1, 2, [ 3, 4, 5 ], [ 6, 7, 8, 9 ], 10 ]
Flattened Array:  [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ]

Working mechanism:

We built an array in the first step, which we want to flatten. The array was then flattened using the concat() and isArray() functions. The concat() function will concatenate the result to create a single array after the isArray() method takes the array's items as arguments one at a time. We have now printed our array that has been flattened.

Program in JavaScript to Flatten an Array Using a while loop and a recursive helper function:

This approach flattens an array in JavaScript by using a while loop and a recursive helper function.

Implementation in javascript:

const arr = [1,2,[3,4,5],[6,7,8,9],10] 
console.log("Original Array: ",arr)
const flatten = (nested) => {
const flattened_array = [];
const helper = (array) => {
    let counter = 0
    while (counter <array.length) {
const val = array[counter];
      if (Array.isArray(val)) {
        helper(val);
      } else {
flattened_array.push(val)
      }
      counter++;
    }
  }
  helper(nested);
  return flattened_array;
}
console.log("Flattened Array: ", flatten(arr))

Output:

Original Array:  [ [ 1, 2 ], [ 3, 4, 5 ], [ 6, 7, 8, 9 ], [ 10 ] ]
Flattened Array:  [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ]

Working mechanism:

We built an array in the first step, which we want to flatten. After that, the array was flattened using a stack and the isArray() function. The isArray() function takes an array as an argument, one element at a time. If the supplied parameter's value consists of more than one element, the array will be flattened using the spread operator, and the additional elements will be pushed onto the stack. Otherwise, if the passes parameter only contains one thing, we will just add that piece to the final list. Ultimately, we have returned this array after inverting the flattened arr resultant array.

Program in JavaScript to Flatten an Array Using a Generator Function:

This method flattens an array in JavaScript by using a generator function.

Implementation in javascript:

const arr = [1,2,[3,4,5],[6,7,8,9],10]; 
console.log("Original Array: ",arr)
function* flatten(array, depth) {
if(depth === undefined) {
      depth = 1;
    }
for(const val of array) {
if(Array.isArray(val) && depth > 0) {
          yield* flatten(val, depth - 1);
        } else {
          yield val;
        }
    }
}
const flattened_arr = [...flatten(arr, Infinity)];
console.log("Flattened Array: ", flattened_arr)

Output:

Original Array:  [ 1, 2, [ 3, 4, 5 ], [ 6, 7, 8, 9 ], 10 ]
Flattened Array:  [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ]

Working mechanism:

We built an array in the first step, which we want to flatten. The array was then flattened by using a generator function. The parameters array and depth are two that the generator function will accept as arguments. The depth denotes the array's largest dimension. Within the generator function, the yield keyword is used to start or stop a generator function. The function always uses the term "yield" to return whatever value it receives. We have now printed the array that has been flattened.

Program in JavaScript to Flatten an Array Using the flat() Method:

This technique flattens an array in JavaScript using the flat() function. Here, we can see an error and arr. The flat() function is only supported by NodeJS and is not supported by many browsers, and the flat is not a function.

Implementation in javascript:

const arr = [1,2,[3,4,5],[6,7,8,9],10] 
console.log("Original Array: ",arr)
flattened_arr = arr.flat();
console.log("Flattened Array: ", flattened_arr)

Output:

Original Array:  [ 1, 2, [ 3, 4, 5 ], [ 6, 7, 8, 9 ], 10 ]
Flattened Array:  [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ]

Working mechanism:

We built an array in the first step, which we want to flatten. The array was then flattened using the flat() function. The array will be flattened and returned using the flat() function, which accepts an array as an input. We have now printed the array that has been flattened.

Conclusion:

Following our discussion of several methods for flattening an array in JavaScript, we may draw the following conclusions.

The process of flattening an array reduces its dimensions from n dimensions to one
The entire array's nested elements are removed and combined into a single one-dimensional array.
When a generator function returns any value, it does so with the aid of the yield The yield keyword is used to restart or pause the generator function.
Although NodeJS supports the flat() method, many browsers do not, which may result in an error.