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
Top comments (0)