Solutions

Version 1 (Recursion)

function flatten() {
  /**
   * Loop over the array: 0 -- arr.length
   * if currentElement is an array
   *  do some processing
   * else
   *  use the currentElement directly
   */

  const output = [];

  function processing(arr) {
    /**
     * input: [1,2,[3]]
     * 0: 1 -&gt; [1]
     * 1: 2 -&gt; [1,2]
     * 2: [3] -&gt; processing([3]) -&gt; 0 - length -&gt; [1,2,3]
     */
    for (let i = 0; i &lt; arr.length; i++) {
      const currentElement = arr[i];

      if (Array.isArray(currentElement)) {
        processing(currentElement);
      } else {
        output.push(currentElement);
      }
    }
  }

  processing(this);
  return output;
}

Array.prototype.flatten = flatten;

Version 2 (Iterative)

function flatten() {
  /**
   * Goal:
   * Convert a deeply nested array into a flat array.
   *
   * Instead of recursion, we use a stack to avoid
   * call stack overflow for very deep arrays.
   */

  const result = [];

  /**
   * We copy the original array into a stack.
   * Why?
   * - We don’t want to modify the original array.
   * - We will simulate recursion manually using this stack.
   *
   * Example:
   * input: [1, 2, [3]]
   * stack: [1, 2, [3]]
   */
  const stack = [...this];

  /**
   * Loop until stack becomes empty
   * Each iteration:
   *  - Remove the last element (LIFO behavior)
   *  - If it's an array → expand it
   *  - If it's a value → push into result
   */
  while (stack.length) {
    const value = stack.pop();

    /**
     * If current value is an array:
     * Example:
     *   stack: [1, 2, [3, 4]]
     *   pop() → [3, 4]
     *
     * We push its elements back into stack
     * so they can be processed individually.
     */
    if (Array.isArray(value)) {
      stack.push(...value);
    } else {
      /**
       * If it's a primitive (number/string/etc),
       * push directly into result.
       *
       * Example:
       *   value: 3
       *   result: [3]
       */
      result.push(value);
    }
  }

  /**
   * Important:
   * Because stack is LIFO (Last In First Out),
   * the order of elements becomes reversed.
   *
   * So we reverse the result at the end
   * to maintain original left-to-right order.
   */
  return result.reverse();
};

Array.prototype.flatten = flatten;

Video Solution

It is a good question in which interviewer can ask a lot of concepts ranging from Prototype Chain, Closures, Arrow functions, and more. It is mostly asked in SDE 1 / SDE 2 interviews.

This feels empty

0 day

0 day

Study Guides

Top JavaScript Multiple Choice Questions (MCQ) with Answers | Frontend Interview Questions | Beginner Friendly

Top JavaScript Array Interview Questions | Problem Solving | Array Polyfills

Frontend Coding Challenges | JavaScript | ReactJS | DevKode DOM Challenge

Advanced JavaScript Interview Questions | Problem Solving | Frontend Interview Questions

Top JavaScript Promises Interview Questions | Problem Solving | Promise Polyfills

Video Tutorials

Contribution Opportunities

Grow with like-minded people,

Join the devtools.tech community

Stay in the know

Instagram

YouTube

Twitter