Flattening Nested Arrays In Javascript With flat() Method

Published on | by
Reza Baharvand
Updated on
Image for 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" ]

Recent Posts

Image for Coin Flip Simulator With Javascript And CSS Animations

Coin Flip Simulator With Javascript And CSS Animations

In this tutorial, you will learn to build a small app to toss a coin using HTML, CSS, and Javascript. The possible outcomes after flipping a coin are either "Head" or "tail". The probability of getting head or tail is 50%.

Image for Use Math.PI To Calculate Area And Circumference Of A Circle

Use Math.PI To Calculate Area And Circumference Of A Circle

The "Math.PI" property returns the PI "π" constant, approximately equal to 3.14159. For example, you can calculate the circumference and surface area of a circle using "Math.PI".

Image for Check If A Function Exists Before Calling With The typeof Operator

Check If A Function Exists Before Calling With The typeof Operator

If you are sharing scripts from different modules or you have a large codebase, you can use the `typeof` operator to check if a function exists.

Image for Create A Toggle Button In Javascript To Manipulate The DOM With The toggle() Method

Create A Toggle Button In Javascript To Manipulate The DOM With The toggle() Method

The "toggle()" is a method of the "DOMTokenList". It removes something like a "class" name from the list, and returns "false". If the "class" name does not exist, it will add it to the list and return "true".