polyfills for Flatten an Array

Flattening an array is a common JavaScript interview topic that involves converting a nested array into a single-dimensional array. While JavaScript provides the built-in flat() method, interviews often require you to write your own implementation (polyfill).

• Flattening removes all levels of nesting from an array
• Useful when working with complex or deeply nested data structures
• Writing a polyfill demonstrates strong understanding of arrays and recursion

Flattening an Array

Consider the following array:

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

Flattening this array would result in:

// Output: [1, 2, 3, 4, 5, 6, 7, 8]

The goal is to transform the nested structure into a single-level array. JavaScript’s flat() method does this up to a specified depth.

Using the flat() Method

The flat() method is simple to use:

const result = arr.flat();
console.log(result); // Output: [1, 2, 3, 4, 5, 6, [7, 8]]

By default, flat() only flattens the array one level deep. To flatten deeper levels, you can specify the depth as an argument:

const result = arr.flat(2);
console.log(result); // Output: [1, 2, 3, 4, 5, 6, 7, 8]

For arrays with unknown levels of nesting, you can use Infinity:

const result = arr.flat(Infinity);
console.log(result); // Output: [1, 2, 3, 4, 5, 6, 7, 8]

Writing a Polyfill for flat()

Now, let’s create our own version of the flat() method, a polyfill. This will help you understand how flat() works under the hood and prepare you for similar interview challenges.

[Step 1]: Set Up the Polyfill Structure

We start by extending the Array.prototype with a new method called myFlat:

• Array.prototype.myFlat: Adds a new method to all array instances.
• depth: The number of levels to flatten. By default, it is set to 1.
• tempArray: A temporary array that will hold the flattened result.
• flatten(): A recursive function that checks each element of the array. If the element is an array and the depth is greater than 0, it recursively calls itself with a decremented depth. Otherwise, it pushes the element into the tempArray.

[Step 2]: Testing the Polyfill

Now, let’s test our myFlat method:

const arr = [1, 2, 3, 4, [5, 6], [[7, 8]]];
const result = arr.myFlat(2);
console.log(result); // Output: [1, 2, 3, 4, 5, 6, 7, 8]

This test shows that our polyfill correctly flattens the array up to the specified depth.

Working of Polyfill

1. Initialization: We define a tempArray to store the flattened elements.
2. Recursive Flattening: The flatten() function is called recursively. It iterates through the array and checks if each element is an array. If it is, and if the depth allows, it calls itself recursively with the nested array and a decremented depth.
3. Adding Non-Array Elements: If the element is not an array or the depth limit has been reached, the element is pushed into tempArray.
4. Return the Flattened Array: Finally, after all elements have been processed, tempArray is returned as the flattened array.