Array Flatten in JavaScript

Hey readers

Here i am with another blog

But this is something different, because in this blog we’re not going to learn another JavaScript method or function.

Instead, we’re going to understand an problem of JavaScript arrays called flattening an array.

So let’s get started.

What nested arrays are?

Nested arrays are arrays inside another array. You might wonder, “who actually uses them?”

Fair question but in real-world applications, they’re common when dealing with grouped data, matrices or hierarchical structures like categories and subcategories.

So nested arrays are useful and yes we also need to flatten them.

This is how a nested array looks like:

const nums = [1, [2, 3, [4, 5]], 6, 7];

---

Why flattening arrays is useful?

An array contains data, and we often need to work with that data.

Now suppose a server sends data in a nested array structure how would we even handle it?

Because nested arrays already look confusing, even simple operations like looping become difficult.

So, to work efficiently with arrays, it becomes necessary to flatten them into a single-level structure.

---

Concept of flattening arrays

Converting an array into a single-level structure is called array flattening. flattening an array has several practical advantages.

Benefits of flatten array:

• Simplifies iteration = one loop instead of nested loops

• Easier transformations = map/filter/reduce work more cleanly

• Better compatibility = many APIs expect flat arrays

• Reduces complexity = fewer indexing errors

• Improves readability = cleaner logic in most cases

---

Different approaches to flatten arrays

In Javascript there are multiple appraoches to faltten arrays let's talk about some of them one by one.

flat() Method:

The flat() method is a built-in JavaScript function used to flatten arrays. It removes the need to write custom logic for handling nested arrays.

You simply call it using dot notation, and it returns a flattened array instantly.

const arr = [1, [2, 3], [4, [5, 6]]];

const flat = arr.flat(Infinity);

console.log(flat1);   // [1, 2, 3, 4, 5, 6]
console.log(flatAll);

In flat method we pass argument of depth which define how many levels of nesting to remove, So in the code example Infinity means flatten until whole array not flatten.

Recursive approach

In this approach we use function which call itself until array not flatten, Basically we use out typical recursion in this.

Code logic is very simple unlike flat method we have full control over logic

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

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

  return result;
}

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

Reduce + concat approach

Reduce and concat both are built in array methods of Javascript, we can use them for flattening array.

In thi approach reduce() used to accumulate values into a single array and concat() merges nested arrays into accumulator

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

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

---

Common interview scenarios

In interviews, flatten array questions are often asked to test and sometimes confuse candidates. So there’s a chance you may also be asked this.

However, it is not as tricky as it looks, because at first glance nested arrays only seem confusing.

The same problem may also be presented in different ways, such as:

• Basic flattening: [1, [2, 3], 4]

• Deep nested array: [1, [2, [3, [4]]]]

• Flatten with condition: Flatten only numbers / ignore strings

But mostly, the approach remains the same. We just need to stay calm and clearly understand the conditions.

---

Conclusion

With this, we reach the end of the article. Array flattening is an interesting problem because it tests logical thinking.

To solve it smoothly, a strong foundation in JavaScript is important especially data types and control flow. if these basics are clear, problems like this become straightforward.

Hope you found this blog useful. See you in the next blog of the JS series.