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

Image Optimisation for the Modern Web

Intuit Frontend Interview Questions

Blinkit Frontend Interview Questions

Makemytrip Frontend Interview Questions

Zeta Frontend Interview Questions

Video Tutorials

Contribution Opportunities

Grow with like-minded people,

Join the devtools.tech community

Stay in the know

Instagram

YouTube

Twitter