How to flatten array using Javascript

Problem

So you have some nested array but need to flattened it so you use it inside your codebase. There are actually a couple of ways to do it.

Here is what we are gonna take a look at;

Array.prototype.flat()
Reduce and Concat Solution
Recursive Solution
Stack Solution

1. Array.prototype.flat() Solution

The flat() method creates a new array with all sub-array elements concatenated into it recursively up to the specified depth.

Returns: A new array with the sub-array elements concatenated into it.

const arr1 = [0, 1, 2, [3, 4]];

console.log(arr1.flat());
// expected output: [0, 1, 2, 3, 4]

const arr2 = [0, 1, 2, [[[3, 4]]]];

// We can also give optional depth argument to flat function
console.log(arr2.flat(2));
// expected output: [0, 1, 2, [3, 4]]

Flat can also work on nested arrays

console.log(arr2.flat(Infinity))
// expected output: [0, 1, 2, 3, 4]

Or it can remove empty spots in the array

const arr5 = [1, 2, , 4, 5];
arr5.flat();
// [1, 2, 4, 5]

2. Reduce and Concat Solution

const flatten = (arr) => {
  return arr.reduce(function (flat, toFlatten) {
    return flat.concat(Array.isArray(toFlatten) 
            ? 
            flatten(toFlatten) 
            : toFlatten);
  }, []);
}

flatten([[1, 2, 3], [4, 5]]); // [1, 2, 3, 4, 5]
flatten([[[1, [1.1]], 2, 3], [4, 5]]); // [1, 1.1, 2, 3, 4, 5]

3. Recursive Solution

We can also apply recursive solution with the help of concat function

const flattenArray = (input) => {
  let result = []

  if (!Array.isArray(input)){
    return input
  }

  for (let data of input) {
    result = result.concat(flattenArray(data))
  }

  return result;
}

let arr = ["a", 0, [1, 2], 3, [[5, 6], [[8, 9]]]]

console.log(flattenArray(arr))
// ["a", 0, 1, 2, 3, 5, 6, 8, 9]

4. Stack Solution

We can also solve this by the help of stack data structure

// non recursive flatten deep using a stack
// note that depth control is hard/inefficient as we will need to tag EACH value with its own depth
// also possible w/o reversing on shift/unshift, but array OPs on the end tends to be faster
function flatten(input) {
  const stack = [...input];
  const res = [];
  while(stack.length) {
    // pop value from stack
    const next = stack.pop();
    if(Array.isArray(next)) {
      // push back array items, won't modify the original input
      stack.push(...next);
    } else {
      res.push(next);
    }
  }
  // reverse to restore input order
  return res.reverse();
}

const arr = [1, 2, [3, 4, [5, 6]]];
flatten(arr);
// [1, 2, 3, 4, 5, 6]

How to flatten array using Javascript

Comments

More from this blog

React Hooks: useLayoutEffect

6 Tips To Achieve Your Goal

How to Deploy Your App to Netlify

5 Ways To Host Your Applications

Array methods that you should know

Problem

1. Array.prototype.flat() Solution

2. Reduce and Concat Solution

3. Recursive Solution

4. Stack Solution

Links

Command Palette

Comments

More from this blog

Problem

1. Array.prototype.flat() Solution

2. Reduce and Concat Solution

3. Recursive Solution

4. Stack Solution

Links