To flatten an array in JavaScript, you can use any of these methods –
- Use the Array.flat() method passing it a parameter of 1 to flatten the array one level deep, 2 for an array 2 level deep, upto Infinity for flattening an array completely.
- Use the Array.concat() method to flatten an array.
- Use the Array.reduce() method to flatten an array.
- Use the Array.forEach() method to flatten an array.
Let’s discuss these methods in detail below.
Method 1: Use The Array.flat() Method
The Array.flat() method is used to flatten an array one level deep. If you want to flatten an array 2 levels deep, you need to pass a parameter of 2 to this method, 3 for an array 3 levels deep and so on. The syntax for using this method is as follows –
array.flat(depth)
Here,
array is the name of the array that needs to be flattened and
depth is an optional parameter that specifies how deep the flattening should be. The default value for depth is 1.
Let’s take a look at a few examples to understand how this method works.
Example 1: Flatten An Array In JavaScript One Level Deep
In this example, we have an array of numbers that is 2 levels deep. We want to flatten this array one level deep using the Array.flat() method –
const arr = [[1, 2], 3, 4];
console.log(arr.flat()); // outputs – [1, 2, 3, 4]
As you can see from the output, the array flattened one level deep. The value of the depth parameter is 1 by default, which is why we did not explicitly pass it in this example.
Example 2: Flatten An Array In JavaScript Two Levels Deep
In this example, we have an array of numbers that is 3 levels deep. We want to flatten this array two levels deep using the Array.flat() method –
const arr = [[1, 2], [[3, 4]], 5];
console.log(arr.flat(2)); // outputs – [1, 2, 3, 4, 5]
As you can see from the output, the array was flattened two levels deep. We passed a value of 2 as the depth parameter to the Array.flat() method.
Example 3: Flatten An Array In JavaScript Completely
In this example, we have an array of numbers that is 4 levels deep. We want to flatten this array completely using the Array.flat() method –
const arr = [[1, 2], [[3, 4]], [[5]], 6];
console.log(arr.flat(Infinity)); // outputs – [1, 2, 3, 4, 5, 6]
As you can see from the output, the array was flattened completely. We passed a value of Infinity as the depth parameter to the Array.flat() method.
Method 2: Use The Array.concat() Method
The Array.concat() method is used to concatenate two or more arrays. This method can also be used to flatten an array. The syntax for using this method is as follows –
array1.concat(array2, … arrays)
Here,
array1, array2, … arrays are the arrays that need to be concatenated.
Let’s take a look at a few examples to understand how this method works.
var arr = [[1,2], 3, 4];
var flatArr = [].concat(…arr);
console.log(flatArr); // outputs – [1,2,3,4]
As you can see from the output, the array was flattened one level deep.
The spread operator (…) here is used to convert the nested arrays into a list of values that can be concatenated.
Method 3: Use The Array.reduce() Method
The Array.reduce() method is used to apply a function to each element in an array and reduce it to a single value. This method can also be used to flatten an array. The syntax for using this method is as follows –
array.reduce(function(accumulator, currentValue, currentIndex, arr), initialValue)
Here,
array is the name of the array that needs to be flattened,
function is the callback function that is applied to each element in the array,
accumulator is the accumulator value (the result of the previous callback function),
currentValue is the current element being processed in the array,
currentIndex is the index of the current element being processed in the array and
arr is the original array.
initialValue is an optional parameter that specifies the initial value of the accumulator. If this parameter is not provided, the first element in the array will be used as the initial value.
Let’s take a look at a few examples to understand how this method works.
var arr = [[1,2], [3], [4]];
var flatArr = arr.reduce(function(accumulator, value) {
return […accumulator, …value];
}, []);
console.log(flatArr); // outputs – [1,2,3,4]
As you can see from the output, the array was flattened one level deep.
In this example, we have used the spread operator (…) to convert the nested arrays into a list of values that can be concatenated. We have also passed an empty array as the initialValue parameter.
Method 4: Use The Array.forEach() Method
The Array.forEach() method is used to execute a function on each element in an array. This method can also be used to flatten an array. The syntax for using this method is as follows –
array.forEach(function(currentValue, currentIndex, arr), thisValue)
Here,
array is the name of the array that needs to be flattened,
function is the callback function that is applied to each element in the array,
currentValue is the current element being processed in the array,
currentIndex is the index of the current element being processed in the array and
arr is the original array.
thisValue is an optional parameter that specifies the value of this inside the callback function. If this parameter is not provided, undefined will be used as the value of this.
Let’s take a look at a few examples to understand how this method works.
var arr = [[1,2], [3], [4]];
var flatArr = [];
arr.forEach(function(value) {
flatArr.push(…value);
});
console.log(flatArr); // outputs – [1,2,3,4]
As you can see from the output, the array was flattened one level deep.
In this example, we have used the spread operator (…) to convert the nested arrays into a list of values that can be pushed into the flat array.
Conclusion
Flattening an array is a common operation in many applications. In this article, we looked at four different ways to flatten an array in JavaScript. We also looked at the performance of each method and saw that the Array.flat() method is the fastest way to flatten an array.