Array Flatten in JavaScript

what are nested arrays

a nested array is simply an array inside another array

eg

let arr = [1, 2, [3, 4], 5]

we can go more deep insode of that

let arr = [1, [2, [3, [4]]]];

This is called deeply nested array.

keypoint:

• array can contain number, strings, object

• it can also contain another arrat inside it

problem

when you have too much data it look messy , many nested layer inside a array although modern js can handle it but working with this can cause confusion like-

you cant easily

• loop properly

• search values correctly

• apply map

• send data to APIs or UI components directly

here come the life saver

ARRAY FLATTEN

flattening means converting nested array into single level array

so you ode

[1, [2, 3], [4, [5, 6]]]

become

[1, 2, 3, 4, 5, 6]

now see, how muh this code become readable

so inShort faltten makes your code

• easier looping

• simpler data processing

• better readability

• required in APIs

• usefull in ui rendering

Concept of Flattening arrays

Flattening an arrays means converting a nested array into single level arrray , it just remove the inner layer and bring it on same layer

Example

[1, [2, 3], [4, [5, 6]]]

After flattening:

[1, 2, 3, 4, 5, 6]

How it works conceptually

• go through each element in array

• if the element is not an array , keep it as it is

• if the element is an array open it and take its values out

• repeat the same process until there are no nested array left

Approaches to flatten arrays

there are multiple method , some are built in and some requireed logic

1. Using flat( ) (built-in method)

JavaScript provides a direct method:

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

let result = arr.flat();
console.log(result);

Output:

[1, 2, 3, 4, [5, 6]]

Important point

By default, flat() only goes one level deep.

to fully flatten:

let result = arr.flat(Infinity);
console.log(result);

output

[1, 2, 3, 4, 5, 6]

when to use

• quick solution

• clean and readable code

2 . Using Recursion ( most imp )

this is logic based

so the idea is that if the element is array , go inside it again and if not push it to result

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

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

  return result;
}

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

output

[1, 2, 3, 4, 5, 6]

3 . Using Stack (iterative approach)

it is less used so the idea here is

• use a stacj instead of recursion

• process element until stack is empty

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

  while (stack.length) {
    let val = stack.pop();

    if (Array.isArray(val)) {
      stack.push(...val);
    } else {
      result.push(val);
    }
  }

  return result.reverse();
}

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

Interview Scenarios

interviewers dont ask flattening directly , they hide it inside the problem you just need to recignise the pattern

1. Flatten this array

direct question:

[1, [2, 3], [4, [5, 6]]]

They expect:

• eecursion solution

• or flat(Infinity) if allowed

But in interviews, recursion is what they actually want.

2. Sum all values in a nested array

Same structure, different goal:

[1, [2, 3], [4, [5, 6]]]

Output:

21

Logic:

• flatten OR directly recurse and sum

Most candidates mess up by trying normal loops only.

3. Find max/min in nested array

Example:

[1, [20, 3], [4, [15, 6]]]

Goal:

20

What they test:

• recursion thinking

• handling unknown depth

4. Flatten + transform

Example:

[1, [2, 3], [4, [5, 6]]]

Task:

flatten and multiply each element by 2

Result:

[2, 4, 6, 8, 10, 12]

This checks:

• chaining logic (flatten → map)

• understanding of data flow

5. Deep nesting unknown depth

They don’t give fixed structure:

[1, [2, [3, [4, [5]]]]]

This is where many people fail because:

• they try fixed loops

• recursion is required