Array Flatten in JavaScript

As we start working with JavaScript and after entering in concept of Array a new concept appear here that is Array Flattening. It deals with the nested array like arrays in arrays. And we will also explore the different approaches JavaScript implement.

What is nested array ?

Nested array is the arrays in arrays. And the process of conversion of the nested array to a single level array.

// Here we have written a nested array rank named

const rank = [1,[2,3],[[4,5],6,7,8],9,0]

// After using the flattening

const newRank = rank.flat(2)
console.log(newRank)   // Output : [1,2,3,4,5,6,7,8,9,0]

Here we have done the data flattening the which makes the nested array to a single level array. And now the concept comes level it means like the depth level

Level 0 : [ 1, ... , 9, 0 ]
Level 1 : [ ... , [ 2, 3 ], [[ 4, 5 ], 6, 7, 8 , ... ]
Level 3 : [ ... , [[ 4, 5 ] ... ], ... ]

Why flattening Array is useful ?

Nested array is used to store data in a structural way but it when we go to process the data it create problems. It is difficult to loop through all values. It also makes harder to implement operations like map, filter , etc. And it have the inconsistent data.

So, Here the method introduced is flattening. It convert the nested array into single level array where we can loop on through all values. Here we can also use the method like map, filter, etc. and also improves the readability and performance in many cases.

Concept of flattening array

Flattening data is the process of converting the multilevel array to single level array which helps us to store data in a readable format and makes the looping possible through all values and it also improves the readability of data.

Here is the visual representation of the flattening.

// Here we have written a nested array rank named

const rank = [1,[2,3],[[4,5],6,7,8],9]

Different Approaches of data Flattening Array

Using .flat()

const rank = [1,[2,3],[[4,5],6,7,8],9]

console.log(rank.flat(2));

This is the considered as the best approach for flattening of an array. It is simple and built in.

Using recursion

It shows the deep understanding and work with any level.

const rank = [1,[2,3],[[4,5],6,7,8],9]

function flatten(rank) {
  let result = [];

  for (let new of rank) {
    if (Array.isArray(new)) {
      result = result.concat(flatten(new));
    } else {
      result.push(new);
    }
  }

  return result;
}

Using reduce()

It is a function approach and it is clean for experience developer

const flatten = (rank) => {
    return rank.reduce((acc, item) => {
        return acc.concat(Array.isArray(item) ? flatten(item) : item)
},[]);
};

Using Stack

Here is no recursion and useful for large arrays.

function flatten = {
    let stack = [...rank];
    let result = [];

    while(stack.length){
        let next = stack.pop();
        
        if(Array.isArray(next){
            stack.push(...next);
        }
        else{
            result.unshift(next);
        }
     }
    return result;
}

Using toString() (Not recomended)

Here it breaks the data type and only used for number or string.