#52 How to flatten an array in javascript?

An array that contains other arrays within it is often referred to as a nested array or an array of arrays. While powerful for structuring complex data, sometimes you need to "un-nest" them into a single, flat list. This process is known as flattening an array.

What Exactly is a Flattened Array?

In simple terms, flattening an array means transforming a multi-dimensional array into a one-dimensional array. All the elements from the nested arrays are extracted and placed directly into the top-level array.

Consider this example:

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

A flattened version of this array (to a certain depth) would look like:

const partiallyFlattened = [1, 2, 3, 4, 5, [6, 7]]; // Flattened one level deep
const fullyFlattened = [1, 2, 3, 4, 5, 6, 7]; // Fully flattened

Why Do We Need to Flatten Arrays?

Flattening arrays is a common operation in data processing, especially when dealing with:

• API Responses: Sometimes APIs return data in a nested structure that's easier to process as a flat list.
• Data Transformation: When you're consolidating data from various sources that might naturally produce nested structures.
• Iterating or Filtering: It's often simpler to iterate over or apply filters/maps to a single, flat array rather than navigating through multiple levels of nesting.
• UI Rendering: Building lists or tables where all items need to be displayed sequentially, regardless of their original nested hierarchy.

How to Flatten an Array in JavaScript?

JavaScript offers several ways to flatten arrays, ranging from a modern built-in method to more manual or classic approaches.

The Modern Way: Array.prototype.flat() (ES2019)

The most straightforward and recommended way to flatten arrays in modern JavaScript is using the flat() method, introduced in ECMAScript 2019.

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

// Flatten one level deep (default behavior)
const flatOnce = nestedArray.flat();
console.log(flatOnce);
// Output: [1, 2, 3, 4, 5, [6, 7]]

// Flatten two levels deep
const flatTwice = nestedArray.flat(2);
console.log(flatTwice);
// Output: [1, 2, 3, 4, 5, 6, 7]

// Flatten all levels deep
const fullyFlat = nestedArray.flat(Infinity);
console.log(fullyFlat);
// Output: [1, 2, 3, 4, 5, 6, 7]

The flat() method takes an optional argument: the depth level specifying how deep a nested array structure should be flattened.

• If no argument is provided, it defaults to 1.
• To flatten all nested arrays regardless of their depth, pass Infinity as the argument.

Manual Flattening (For Deeper Understanding or Older Browsers)

Before flat() was widely available, developers often used recursive functions or combinations of other array methods to achieve flattening. Here's a recursive approach that mimics flat(Infinity):

function flattenDeep(arr) {
    let result = [];
    arr.forEach(item => {
        if (Array.isArray(item)) {
            result = result.concat(flattenDeep(item)); // Recursively flatten
        } else {
            result.push(item);
        }
    });
    return result;
}

const nestedArray = [1, [2, 3], 4, [5, [6, 7]]];
const fullyFlatManual = flattenDeep(nestedArray);
console.log(fullyFlatManual);
// Output: [1, 2, 3, 4, 5, 6, 7]

This function iterates through the array. If an element is an array itself, it recursively calls flattenDeep on that element and concatenates the result. Otherwise, it just pushes the element into the result array.

Using reduce() and concat()

Another common pattern for flattening (especially one level deep) involves using reduce() and concat():

const nestedArray = [1, [2, 3], 4];

const flatArray = nestedArray.reduce((acc, val) => acc.concat(val), []);
console.log(flatArray);
// Output: [1, 2, 3, 4]

This method works by iterating over each element. If the element is an array, concat() will merge its contents into the accumulator. If it's a non-array element, concat() simply appends it.

For flattening multiple levels, you would need to combine this with recursion or adapt it for deeper flattening.

// Example for deep flattening with reduce (less readable than flat(Infinity))
function deepFlattenReduce(arr) {
    return arr.reduce((acc, val) => Array.isArray(val) ? acc.concat(deepFlattenReduce(val)) : acc.concat(val), []);
}

const deepNestedArray = [1, [2, 3], 4, [5, [6, 7]]];
const fullyFlatReduce = deepFlattenReduce(deepNestedArray);
console.log(fullyFlatReduce);
// Output: [1, 2, 3, 4, 5, 6, 7]

Conclusion

Flattening an array is a fundamental operation when working with nested data structures in JavaScript. While several methods exist, the Array.prototype.flat() method is by far the most elegant, readable, and efficient solution for modern JavaScript development. Remember to use the depth argument, especially Infinity, when you need to handle arrays with unknown or varying levels of nesting.

Understanding how to flatten arrays empowers you to better manipulate and process complex data, making your JavaScript code cleaner and more effective.