Master Array Flattening in JS

#javascript #programming #productivity #tutorial

While writing a blog on array methods i got to know about one method that deal with nested array which is array.flat().

If you also want to read that blog read this 👇

Kunal

Mar 3

If You Don’t Know These Array Methods, We Need to Talk.

#discuss #javascript #node #computerscience

3 min read

Before ES6, flattening arrays wasn’t straightforward and often required complex logic. Thankfully, modern JavaScript provides much simpler and cleaner ways to handle it.

Topics to Cover

What nested arrays are
Why flattening arrays is useful
Different approaches to flatten arrays

Nested arrays

Nested array are the arrays that contain other array as their elements.

Instead of holding value like string and object, a nested array store one or more array inside it.


const deepArr = [1, [2, [3, [4]]]];

Why flattening arrays is useful

When working with nested arrays that contain multiple levels of data, it can quickly become difficult to read, manage, and process the values effectively.

To simplify this, we use array flattening.

Flattening an array means converting a nested (multi-level) array into a single-level array. This makes the data easier to understand, iterate over, and work with in your code.


const nestedArr = [1, 2, [3, 4], [5, 6]];
                ↓
Output: [1, 2, 3, 4, 5, 6]

Different approaches to flatten arrays

1. Using while loop with a recursive helper function

This method uses a loop to go through each item and put it into a new array.

If it finds another array inside, it goes inside that array and does the same thing again. It keeps doing this until there are no more arrays inside.

In the end, everything gets added into one simple flat array.


const flatten = (nested) => {
  const flat = [];
  const handleFlat = (array) => {
    let counter = 0
    while (counter < array.length) {
      const val = array[counter];
      if (Array.isArray(val)) {
        handleFlat(val);
      } else {
        flat.push(val)
      }
      counter++;
    }
  }
  handleFlat(nested);
  return flat;
}


console.log(flatten(a)); // [1, 2, 3, 4, 5, 6, 7];

2. Using Reduce and Concat Method

This method is kind of like the first one, but it only goes one level deep.

It uses concat() to add things into a new array.
If it sees a normal value, it just adds it.
If it sees an array, it takes out its items and adds them instead.


const arr = [1, 2, [3, 4]];
// To flat single level array

arr.reduce((acc, val) => acc.concat(val), []);
// [1, 2, 3, 4]

3. Using Array.flat()

This function is actually the reason I decided to write this article.
JavaScript already knew this problem exists, so it gave us a built-in method for it.
By default, it only flattens the array one level. But you can give it a number to tell it how many levels you want to flatten.
And if you don’t want to think about levels at all, just pass Infinity it will flatten everything completely.


const arr1 = [1, 2, [3, 4]];
arr1.flat(); 
// [1, 2, 3, 4]

const arr2 = [1, 2, [3, 4, [5, 6]]];
arr2.flat();
// [1, 2, 3, 4, [5, 6]]

const arr3 = [1, 2, [3, 4, [5, 6]]];
arr3.flat(2);
// [1, 2, 3, 4, 5, 6]

const arr4 = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]];
arr4.flat(Infinity);
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]


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