Flatten One Level

easy

By FrontendAtlas Editorial · Updated Jan 30, 2026

This should not deep-flatten; only the first nesting level is removed, matching Array.prototype.flat(1). Use it to normalize API data; edge cases include sparse arrays and mixed types. Performance should stay linear, and tests should ensure order is preserved.

Arguments

arr: any[] — The input array which may contain nested arrays.

Returns

any[] —

A new array shallow-flattened by one level.

Examples

// Basic example
flattenOnce([1, [2, 3], [4, [5]]]) // => [1, 2, 3, 4, [5]]

// Already flat
flattenOnce([1, 2, 3]) // => [1, 2, 3]

// Mixed values
flattenOnce([[1], 2, [3, [4]], 5]) // => [1, 2, 3, [4], 5]

Solution

Overview

Because only one level is flattened, you can implement it with a single pass and no recursion while preserving order and immutability.

Approach 1: Iterative spread (explicit and clear)

Mention that non-array values are pushed as-is and that nested arrays deeper than one level remain nested. This helps clarify expected behavior and prevents over-flattening.

export default function flattenOnce(arr) {
  const result = [];
  for (const el of arr) {
    if (Array.isArray(el)) {
      result.push(...el);
    } else {
      result.push(el);
    }
  }
  return result;
}

export default function flattenOnce(arr: any[]): any[] {
  const result: any[] = [];
  for (const el of arr) {
    if (Array.isArray(el)) {
      result.push(...el);
    } else {
      result.push(el);
    }
  }
  return result;
}

Approach 2: Using built-in `.flat(1)` (alternate, compact syntax)

Idea: use the modern Array.prototype.flat() method with depth 1.

We can write: arr.flat(1).

Read it as: *flatten one layer deep and leave inner arrays untouched*.

Why use it: concise, modern, and likely optimized. In this question, treat it as an alternate or follow-up solution — the manual approach helps you understand how shallow flattening works internally.

export default function flattenOnce(arr) {
  return arr.flat(1);
}

export default function flattenOnce(arr: any[]): any[] {
  return arr.flat(1);
}

Notes & Pitfalls

Pitfalls

Flattening too deeply defeats the 'one-level' requirement — avoid recursion or `.flat(Infinity)`.
Mutating the original array is not allowed — always return a new one.
Non-array values should remain untouched.

Edge cases

Empty array → returns `[]`.
Already flat array → identical output.
Mixed values like `[1, [2], 3]` → flattens only first-level arrays.

Techniques

Using `Array.isArray()` for type checking.
Using spread syntax (`...`) for shallow unpacking.
Understanding `.flat(depth)` as a concise modern alternative.

Common mistakes on this challenge

Function is flattening too deep or not flattening arrays consistently
This task requires one-level flattening only.
- When item is an array, push its direct children only (`...item`).
- Do not recurse into nested grandchildren (`[4]` should remain nested in sample).
- Keep non-array values unchanged and preserve original order.

Resources

Guides

Frontend interview preparation guideGuide Frontend coding interview questions and prep guideBlueprint JavaScript Problems That Actually Show UpBlueprint Build Great UI in 60 MinutesBlueprint

Preparing for interviews? Use Frontend Coding Challenges first, then move into a concrete Study Plan before targeted Company Prep.

Open frontend interview questions Browse JavaScript interview questions Open Essential 60 Open Machine Coding Hub Open Frontend Coding Challenges Open System Design Open Interview Prep Guide Open System Design Blueprint Open Framework Prep Paths Open Study Plans Open JavaScript mastery study plan Open Company Prep Open JavaScript Framework Prep Guide