JavaScript Baazi: How to flatten an array in javaScript?

JavaScript Baazi: How to flatten an array in javaScript?

Welcome to JavaScript baazi a blog series where we go through common interview questions in JavaScript and understand everything around them.

Hmm... So what is the flattening of an array?

basically in flattening we reduce the dimension of an array.
basically, let's say if we have a 2d array while doing the flattening we will convert that 2d array into a 1d array.

example: 1
//before flattening
const array = [[1, 2],  [3, 4],[5, 6]];
//after flattening
[1, 2, 3, 4, 5, 6]

also, there is one more thing the depth of flattening that basically means how much the array should be flattened basically ...

let's say you have a 2-d array then you will flatten it into 1-d then depth is 1. here you reduce the array size by 1.

now let's say you have a 4-d array then you flatten it into a 2-d array then the depth is 2.

So how to do flattening of an array?

You can use Array.prototype.flat()

example:-

const array = [[1, 2],  [3, 4],[5, 6]];
console.log(array.flat());

this will flatten the array into [1,2,3,4,5,6]; let 's try another example

const array = [
  [[1], [2]],
  [[3], [4]],
  [[5], [6]]
];
console.log(array.flat());

this will flatten the array into [[1],[2],[3],[4]] ; oohh wait... I didn't want to do that... I want it to be more flattened ... how to do that? so basically by default the depth to be flattened in flat() is 1.. we can increase it by passing the desired value into the flat() function so..

const array = [
  [[1], [2]],
  [[3], [4]],
  [[5], [6]]
];
console.log(array.flat(2));

Okay that works but what if I want to don't know to want to give the depth and want to convert any array of any dimension into a 1d array ??? how can I achieve that? Simple just pass Infinity :) that will flat any depth of array into 1d

const array = [
  [[1], [2]],
  [[3], [4]],
  [[5], [6]]
];
console.log(array.flat(Infinity));

Hmm.. that's cool can we flat array without using Flat () ??

Yess....

the logic:- firstly we are sure we need to iterate the array ... and concat the array inside it...


const array = [
  [1, 2],
  [3, 4],
  [5, 6] 
];
function flat(array){
    let result = [];
    for(let data of array){
      result = result.concat(data);
    }
    return result
}
console.log(flat(array));
//output 
[ 1, 2, 3, 4, 5, 6 ]

that look's fine for now.. but what if .. we change the input ?

const array = [
  [1, 2],
  [3, [4,5,[10]]],
  [5, [6]] 
];
function flat(array){
    let result = [];
    for(let data of array){
      result = result.concat(data);
    }
    return result
}
console.log(flat(array));
//output
[ 1, 2, 3, [ 4, 5, [ 10 ] ], 5, [ 6 ] ]

hm... now how can we implement infinite flattening into this flat function? so before concatenation, we just need to check whether the element is the array or not? if it is then loop through it and repeat the entire process otherwise just merge it.

function flat(array){
    let result = [];
    if(!Array.isArray(array)){
        return array;
    }
    for(let data of array){
      result = result.concat(flat(data));
    }
    return result
}
console.log(flat(array));

Did you find this article valuable?

Support Gaurav Tewari by becoming a sponsor. Any amount is appreciated!