Array Flattening in JavaScript: A Practical, No-Nonsense Guide

Introduction

Working with arrays is routine in JavaScript. But the moment arrays become nested, things start getting messy. You’re no longer dealing with a simple list—you’re dealing with a structure that requires deliberate handling. One of the most common operations in such cases is flattening.

This article walks through what nested arrays are, why flattening matters, how it works conceptually, and the different ways to implement it

So let's get started...

Understanding Nested Arrays

A nested array is simply an array that contains other arrays as elements. It can be shallow or deeply nested depending on how many levels of arrays are inside.

For example:

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

This is not a flat structure. Instead, it’s hierarchical. If you try to process this directly— for example, summing values or iterating uniformly — you’ll run into inconsistencies unless you normalize it.

That normalization process is what flattening does.

Why Flattening Arrays Is Useful

Flattening isn’t just a “nice-to-have”—it’s often required.

Consider these scenarios:

• You’re aggregating data from APIs that return nested structures.

• You need to apply transformations like map, filter, or reduce uniformly.

• You’re preparing data for UI rendering where nested structures complicate iteration.

• You’re solving algorithmic problems where flat iteration is expected.

A nested structure introduces branching logic. A flat structure removes that complexity. That’s the real benefit.

The Concept of Flattening

Flattening means converting a nested array into a single-level array by extracting all values regardless of depth.

Example:

Input:  [1, [2, [3, 4]], 5]
Output: [1, 2, 3, 4, 5]

The logic is straightforward:

• Traverse each element

• If it’s not an array → include it

• If it is an array → go deeper and repeat

This recursive nature is what most beginners underestimate. If you don’t handle recursion properly, your solution breaks on deeper nesting.

Different Approaches to Flatten Arrays

There’s no single “best” method. Each approach has trade-offs in readability, control, and performance.

1. Using Array.prototype.flat()

This is the built-in and most direct approach.

const arr = [1, [2, [3, 4]], 5];
const result = arr.flat(Infinity);

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

Key point: Infinity ensures full flattening regardless of depth. Without it, flattening stops at a fixed level.

Limitations:

• Not supported in very old environments (rarely relevant now)

• No custom logic during traversal

2. Recursive Approach (Core Understanding)

If you don’t understand this, you don’t understand flattening.

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;
}

Why this matters:

• Gives full control

• Works in any environment

• Teaches you recursion properly

Weakness:

• Can hit call stack limits for extremely deep array.

3. Using reduce()

This is a more functional approach, but don’t use it unless you actually understand what’s happening.

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

Same logic as recursion, just expressed differently.

Common Interview Scenarios

If you're preparing for interviews, flattening isn’t about syntax—it’s about how you think.

You’ll typically be tested on:

• Writing a custom flatten() function without using .flat()

• Handling unknown depth (this is where most candidates fail)

• Optimizing for performance or avoiding recursion

• Flattening only to a certain depth (controlled flattening)

Example variation:

flatten([1, [2, [3]]], 1)
// Output: [1, 2, [3]]

If you don’t design your logic to respect depth limits, your solution is incomplete.

Another common twist:

• Flatten + transform (e.g., multiply all values while flattening)

• Flatten + filter (remove certain values during traversal)

If your implementation can’t handle these variations, it’s not robust.

Conclusion

Flattening arrays is a fundamental skill that exposes your understanding of data structures, recursion, and iteration. It shows whether you can handle real-world messy data or just clean textbook examples.