Array Flattening

function flatten(arr) {
  return Array.isArray(arr)
    ? arr.reduce((a, b) => a.concat(flatten(b)), [])
    : [arr];
};

Context

As a JavaScript developer, encountering situations where you need to flatten an array is common. For example, when working with data coming from an API or even a database, you may receive nested arrays that need to be flattened before you can properly use them.

If you're not sure what i'm talking about, flattening an array means converting a multi-dimensional array into a one-dimensional array, where all the elements are at the same level.

const multiLevelDeepArray = [1, 2, [3, [4]], 5];
const oneLevelDeepArray = [1, 2, [3], 4, 5];
const flatArray = [1, 2, 3, 4, 5];

Usage

Once upon a time, if you wanted to recursively flatten an array you could use the reduce() with the concat() method like this:

function flatten(arr) {
  return Array.isArray(arr)
    ? arr.reduce((a, b) => a.concat(flatten(b)), [])
    : [arr];
};

const flattened = flatten([1, 2, [3, [4, [5, 6]]]]); 
// [1, 2, 3, 4, 5, 6]

Here our dear flatten function recursively flattens the array by concatenating the elements of each sub-array into an accumulator array. In case the provided element is not an array, we simply return an array with the element inside.

Let's break it step by step:

1. We have a = [] and b = 1, recursively calling flatten on 1 simply returns [1] which is then concatenated with [] given use [1];
2. We have a = [1] and b = 2, again calling flatten on 2 returns [2] which is then concatenated with [1] given use [1, 2];
3. We have a = [1, 2] and b = [3, [4, [5, 6]]], this time though calling flatten on [3, [4, [5, 6]]] will launch an all new flattening cycle until it returns [3, 4, 5, 6] to be concatenated with [1, 2] giving us the final result: [1,2,3,4,5,6]

ES6 to the rescue

Thankfully, ES6 introduced the flat() method for interacting with nested (even deeply) arrays. This method creates and returns a new array with all sub-array elements concatenated into it recursively up to the specified depth.

So in order to flatten a single level deep array, you can simply call the flat() method without any arguments (as 1 is the default depth):

const arr = [1, 2, [3, 4], 5];
const flattened = arr.flat(); // [1, 2, 3, 4, 5]

For more complex use cases you can flatten a Multi-Level Deep Array using the same logic all you have to do is pass the depth as an argument to the flat() method. For example, to flatten a 2-level deep array, you can pass 2 as the argument:

const arr = [1, 2, [3, [4, 5]], 6];
const flattened = arr.flat(2); // [1, 2, 3, 4, 5, 6]

If you don't know the depth of the array, you can use the Infinity keyword as the argument to flatten the array to any depth:

const arr = [1, 2, [3, [4, [5, 6]]]];
const flattened = arr.flat(Infinity); // [1, 2, 3, 4, 5, 6]

Conclusion

Flattening an array is a common task in JavaScript development, especially when working with nested arrays. In the past, the reduce() and concat() methods were used to recursively flatten an array. However, with the introduction of the flat() method in ES6, flattening an array has become much easier and probably more efficient.