How to flatten an array of arrays in JavaScript

In this article, we will explore how to flatten an array of arrays in JavaScript using different approaches. Here are the common approaches:

• Using the reduce() method

• Using the flat() method

• Using the flatmap() method

• Using the concat() method and spread operator

Let’s dive in.

Using the reduce() method

The reduce() method is a JavaScript array method that iterates over the elements of an array and reduces it to a single value. It takes two arguments: the callback function (which is executed on each element of the array) and an optional initial value. The callback function receives an accumulator and the current element, and it returns an updated accumulator.

Here is the code example that demonstrates how to flatten an array of arrays using the reduce() method:

const nestedArray = [[1, 2, 3], [4, 5, 6], [7, 8, 9]];

const newFlattenedArray = nestedArray.reduce((accumulator, currentArray) => {

return accumulator.concat(currentArray);

}, []);

console.log(newFlattenedArray); // Output: [1, 2, 3, 4, 5, 6, 7, 8, 9]

Code explanation

We declare a constant named nestedArray and assign it to an array of arrays. Each of the inner arrays contains three elements.

We create a constant variable called newFlattenedArray and assign it to the result of applying the reduce() method to the nestedArray.

The reduce() method is called on nestedArray and it iterates over each element of the array. The reduce() method takes two parameters; the callback function and the initial value for the accumulator. The initial value for the accumulator is set to an empty string and it will be used by the reduce() method as the starting point for the accumulation.

The callback function passed into the reduce() method also takes two parameters; accumulator and currentArray. The accumulator is the value that is returned and accumulated after each iteration and currentArray is the current element of the array being processed in each iteration of the reduce method.

Inside the callback function, the concat() method is used on the accumulator and it takes the currentArray as an argument. The concat() method is used to combine elements of different arrays into a new array.

At each iteration of the reduce() method, currentArray is combined with the existing accumulator array, resulting in a new array (or single flattened array) that contains all the elements from the nestedArray.

Then, we log the output of flattenedArray to the console.

Using the flat() method

The flat() method is a JavaScript array method that creates a new array by concatenating all subarrays within the original array. The flat() method has an optional parameter that specifies the depth of flattening, If no depth is specified, it defaults to 1.

Here is the code example that demonstrates how to flatten an array of arrays using the flat() method:

const nestedArray = [[1, 2, 3], [4, 5, 6], [7, 8, 9]];

const newFlattenedArray = nestedArray.flat();

console.log(newFlattenedArray); // Output: [1, 2, 3, 4, 5, 6, 7, 8, 9]

Code explanation

We declare a constant named nestedArray and assign it a value of a nested array with three inner arrays.

We create a constant variable called newFlattenedArray and assign it to the result of applying the flat() method on the nestedArray.

The flat() method is called on nestedArray and it concatenates all the elements from the inner arrays into a single array.

Then we log the output of newFlattenedArray to the console.

Using the flatMap() method

The flatMap() method is a JavaScript array method that creates a new array by applying a callback function to each element of an array.

Here is the code example that demonstrates how to flatten an array of arrays using the flatMap() method:

const nestedArray = [[1, 2, 3], [4, 5, 6], [7, 8, 9]];

const newFlattenedArray = nestedArray.flatMap(innerArray => innerArray);

console.log(newFlattenedArray);  // Output: [1, 2, 3, 4, 5, 6, 7, 8, 9]

Code explanation

We declare a constant named nestedArray and assign it a value of a nested array with three inner arrays.

We create a constant variable called newFlattenedArray and assign it to the result of applying the flatMap() method on the nestedArray.

The flatMap() method is called on nestedArray and iterates over each element of the nestedArray. It also takes a callback function (innerArray => innerArray) as an argument which takes each element of the nestedArray and returns the individual element innerArray. This then flattens the nested array into a single flattened array.

Then we log the result of newFlattenedArray to the console.

Using the concat() method and spread operator

The concat() method is a JavaScript array method that is used to concatenate two or more arrays and return a new array.

Here is the code example that demonstrates how to flatten an array of arrays using the concat() method:

const nestedArray = [[1, 2, 3], [4, 5, 6], [7, 8, 9]];

const newFlattenedArray = [].concat(...nestedArray);

console.log(newFlattenedArray); // Output: [1, 2, 3, 4, 5, 6, 7, 8, 9]

Code explanation

We declare a constant named nestedArray and assign it to an array of arrays, each of the inner arrays contains three elements.

We create a constant variable called newFlattenedArray and assign it to the result of concatenating the elements of nestedArray using the concat() method and the spread operator (...).

The concat() method is called on an empty array ([]) and it concatenates the elements passed as arguments (spread from nestedArray) to the empty array. The spread method (...nestedArray) is used to spread elements of each inner array as arguments to the concat() method.

This results in a new array containing all the elements from the nested arrays concatenated together.

Then we log the output of newFlattenedArray to the console.

Reference: JavaScript Array Methods