How to Flatten an Array of Arrays in JavaScript

Product Support
, ,
#1

How can I merge or flatten an array of arrays in JavaScript?

For example, if I have the following array:

[[“$6”], [“$12”], [“$25”], [“$25”], [“$18”], [“$22”], [“$10”]]

How can I convert it into a single array like this:

[“$6”, “$12”, “$25”, “$25”, “$18”, “$22”, “$10”]

This is a common use case when you need to JavaScript flatten array structures. ?

#2

I’ve worked with this issue quite a bit. One of the most straightforward ways to flatten an array in JavaScript is by using Array.prototype.flat(). This method was introduced in ES2019 and it simplifies things a lot. The flat() method essentially merges nested arrays into a single array, which is ideal for your use case."


const array = [["$6"], ["$12"], ["$25"], ["$25"], ["$18"], ["$22"], ["$10"]];

const flattenedArray = array.flat();

console.log(flattenedArray);

// ["$6", "$12", "$25", "$25", "$18", "$22", "$10"]

So, if you’re looking to flatten an array in JavaScript, flat() is the way to go.

#3

That’s a great approach, Madhurima! Before flat() came around, there was another popular method for flattening arrays using concat () with apply(). It’s a clever hack that essentially merges all nested arrays into a single one. Here’s how you’d do it:"


const array = [["$6"], ["$12"], ["$25"], ["$25"], ["$18"], ["$22"], ["$10"]];

const flattenedArray = [].concat.apply([], array);

console.log(flattenedArray);

// ["$6", "$12", "$25", "$25", "$18", "$22", "$10"]

While flat() is more concise and modern, this technique still works if you need a backward-compatible approach to handle your JavaScript flatten array operations.

#4

Great points, both of you! Another versatile way to flatten an array in JavaScript is using Array.prototype.reduce(). With reduce(), you manually iterate over each sub-array and concatenate them into a single array. This approach is highly customizable if you need to add additional logic during the flattening process."


const array = [["$6"], ["$12"], ["$25"], ["$25"], ["$18"], ["$22"], ["$10"]];

const flattenedArray = array.reduce((acc, val) => acc.concat(val), []);

console.log(flattenedArray);

// ["$6", "$12", "$25", "$25", "$18", "$22", "$10"]

So if you’re ever in a situation where you want more control over your JavaScript flatten array operation, consider using reduce()!