How to Flattening Multidimensional Arrays in JavaScript

In this tutorial, you’ll be going to learn how to flattening multidimensional arrays in javaScript. The easiest method to use ES6 Array.flat() method which can even flat deeply nested array also.

Merge a nested array in javascript can be done through multiple ways. Either you can use javascript built-in function or using a traditional approach.

As a developer, it’s your duty to know all the methods because sometimes you are facing an interview question related to this topic that how to flatten multidimensional array with or without using javascript inbuilt function.

Also, see our other javascript series-

  1. Reverse a String in JavaScript
  2. Find Max and Min Value from an Array in JavaScript
  3. Empty An Array In JavaScript
  4. Check object empty in javascript
  5. Check if the array is empty in javascript

Flattening Multidimensional Arrays in JavaScript

  • Table Of Content
    • Flat Nested Arrya Using ES6 Array.flat()
      • Flat Deep Multidimensional Array
    • Concat Multidimensional Array With Array.concat()
    • Spread Operator With Concat to Flatten Array
    • Array.reduce() to flatten multidimensional array
    • Recursion to flat array of array in javascript
    • Flattening Multidimensional Arrays Without Using JS Function

So we’ll be going to discuss all the above point in detail. So stick to the end of the post and do not miss any point. Who knows which point help you in development or interview question.

Flat Nested Arrya Using ES6 Array.flat()

In ES6 Array.flat() a method is introduced which so popular to flattening a multidimensional array in javascript. Array.flat() return a new javascript array with flattening values.

Syntax: Array.flat(depth)

Let’s move on to a code section and see Array.flat() in action.


// declare array
let nested_array = [ 1, [ 2, 3 ], 4, [ 5, 6 ]]

// create flat array
let flatten_array = nested_array.flat()

console.log(flatten_array)
// result => [ 1 , 2 , 3 , 4 , 5 , 6 ]

So in the above example, first we declare an array in javascript which is a multidimensional array. Then using a Array.flat(), we flat a nested array. It merges array and gives a simple array of values from an array of arrays.

Flat Deep Multidimensional Array

But there is a problem with the above method. If an array of arrays is one level nested then it is fine but if it’s deeply nested then. We need to define depth in Array.flat()


// declare array
let nested_array = [ 1, [ 2, 3, [ 4, 5] ], [ 6, [7, 8] ]]

// create flat array
let flatten_array = nested_array.flat()

console.log(flatten_array)
// result => [ 1 , 2 , 3 , [ 4 , 5 ] , 6 , [ 7 , 8 ] ]

// create flat deep array
let flatten_deep_array = nested_array.flat(2)

console.log(flatten_deep_array)
// result => [ 1 , 2 , 3 , 4 , 5 , 6 , 7 , 8 ]

So by providing depth to Array.flat(depth) , we can flatten an array of arrays which are of a deep nested multidimensional array.Concat Multidimensional Array With Array.concat()

Concat Multidimensional Array With Array.concat()

In a javascript array, there is a nice method which merges array. It can be beneficial to merge an array of arrays.

Let’s look at the below example.

// declare array
let nested_array = [ 1, [ 2, 3 ], 4, [ 5, 6 ]]

// create flat array
let flatten_array = [].concat.apply([], nested_array);

console.log(flatten_array)
// result => [ 1 , 2 , 3 , 4 , 5 , 6 ]

So Array.concat() join all nested array and create js flatten array. It also a good approach but it works if an array is one level nested.

Spread Operator With Concat to Flatten Array

The spread operator ... is used to expand array and object which is help to Flattening Multidimensional Arrays in JavaScript.

Now, look at the example below.


// declare array
let nested_array = [ 1, [ 2, 3 ], 4, [ 5, 6 ]]

// create flat array wit spread operator
let flatten_array = [].concat(...nested_array);

console.log(flatten_array)
// result => [ 1 , 2 , 3 , 4 , 5 , 6 ]

So with the spread operator and concat, we merge array and create a flattened array.

Recursion to flat array of array in javascript

I think you know what is recursion. In recursion function calling itself until a certain condition. We can use this process to flatten an array of array.

Now move own to a code snippet.


// declare array
let nested_array = [ 1, [2, 3, 4 ], 5, [5, 6, 7 ]]

// create empty array
let new_array = []

function flat_array(array){
  // forEach loop
      array.forEach(el=>{
              if(Array.isArray(el))
                 flat_array(el)
              else
              new_array.push(el)
      })
      return new_array
}

// create flat array 
var flatten_array = flat_array(nested_array)

console.log(flatten_array)
// result => [ 1 , 2 , 3 , 4 , 5 , 6 ]

So flat array function calling itself every time when a value in an array is array. We get a new array which contains an array of values. During iteration, we also need to check the empty array if the value or array is empty.

Array.reduce() to flatten multidimensional array

Array.reduce() used to loop through array in javascript. During this we concat our array and merge all nested to create flatten array.


// declare array
let nested_array = [ 1, [ 2, 3 ], 4, [ 5, 6 ]]

// create flat array with reduce and concat
let flatten_array = nested_array.reduce(function(flat, curr){
        return flat.concat(curr)
},[])

console.log(flatten_array)
// result => [ 1 , 2 , 3 , 4 , 5 , 6 ]

So during an iteration of the javascript array, we merge current array with a flat array.

Flattening Multidimensional Arrays Without Using JS Function

During an interview, you might face this. When your interviewer says “solve this without using any js function” because he wants to see how much logically you can think.

Now let’s see how we do this.


// declare array
let nested_array = [ [1, 2, 3 ], [4, 5, 6 ]]

// create empty array
var flatten_array = [];

for (var i = 0; i < nested_array.length; ++i) {
  for (var j = 0; j < nested_array[i].length; ++j)
    flatten_array.push(nested_array[i][j]);
}

console.log(flatten_array)
// result => [ 1 , 2 , 3 , 4 , 5 , 6 ]

So we do not need to use any function to flattening nested array.

We can also use a javascript library like lodash

Conclusion :

As you can see there are many ways you can implement to how to flattening multidimensional array in javascript

We have used only functions and functionality provide by JavaScript only like an Array.flat(), Array.concat() and more.

And we have also implemented other approaches to flatten javascript array which doesn’t include any function provided by js.

I hope you read the full article and I am very excited to get a comment on this post to get your review.

If you have any question please feel free to ask me in the comment section. And let me know if you have any suggestion is also acceptable. Also, like our Facebook Page.

Leave a Reply

Your email address will not be published. Required fields are marked *