Flattening Nested Arrays In Javascript With flat() Method

Learn how to flatten nested arrays with all the elements concatenated using the flat() method.

Have you ever looked at some arrays and wondering why is this item nested 6 levels deep, where a multidimensional array is not even needed?

I have an array of animals in the example below where it has array holes and some nested arrays too.

const animals = ["🐶 dog", "🐱 cat", , [[[["🐸 frog", "🦂 scorpion"]]]]];

For some reason, I have a "🐸 frog" and a "🦂 scorpion" in a nested array. There is also an empty element at the index[2].
My desired array should look like this:

const animals = ["🐶 dog", "🐱 cat", "🐸 frog", "🦂 scorpion"];

How To Flatten Arrays With The flat() Method

In Javascript, we can flatten an array using the flat() method. It takes an optional depth parameter to specify how deep a nested array should be flattened. the default value is 1.

const animals = ["🐶 dog", "🐱 cat", , [[[["🐸 frog", "🦂 scorpion"]]]]];

const flattenedArray = animals.flat(Infinity);

console.log(flattenedArray);
// ["🐶 dog", "🐱 cat", "🐸 frog", "🦂 scorpion"];

Since I wanted to flatten the whole array and have no nesting, I passed Infinity as the argument.

If you want to learn more about the flat() method, follow the rest of the article.

More Examples of Flattening Arrays Using The flat() Method

Let’s create define some multidimensional arrays and flatten them by specifying the depth level.

const arr1 = ["🐶 dog", "🐱 cat", , [[[["🐸 frog", "🦂 scorpion"]]]]];

console.log(arr1.flat(3));
// [ "🐶 dog", "🐱 cat", [ "🐸 frog", "🦂 scorpion" ] ]

// Adding some animals to the array
const arr2 = [
  "🐶 dog",
  "🐱 cat",
  ,
  [["🦊 fox", "🐼 panda", [["🐸 frog", "🦂 scorpion"]]]],
];

console.log(arr2.flat(1));
// [ "🐶 dog", "🐱 cat", [ "🦊 fox", "🐼 panda", [ ["🐸 frog", "🦂 scorpion"] ] ] ]

console.log(arr2.flat(2));
// [ "🐶 dog", "🐱 cat", "🦊 fox", "🐼 panda", [ ["🐸 frog", "🦂 scorpion"] ] ]

console.log(arr2.flat(4));
// [ "🐶 dog", "🐱 cat", "🦊 fox", "🐼 panda", "🐸 frog", "🦂 scorpion" ]