How to flatten an array of arrays in JavaScript
Tags: javascript, webdev, programming, beginners
Published: 2023-06-01 13:24:08

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:

```javascript

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:

```javascript

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:


```javascript

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:


```javascript

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](https://devdocs.io/javascript/global_objects/array)