Flattening multidimensional JavaScript arrays

If you want to flatten an array, you can use this simple ES6 spread syntax:

const arr = [['Dolores'], ['William'], ['Ford'], ['Bernard']]
const flat = [].concat(...arr)
console.log(flat) // ['Dolores', 'William', 'Ford', 'Bernard']

If you want to flatten an array full of arrays that might also contain arrays – a deep array structure – you can use this slightly more advanced version:

const deepArray = [
[['Dolores', 'Wyatt'], 'Teddy'],
[['William', 'Man In Black'], 'Emily'],
[['Bernard', 'Arnold'], 'Charlie'],
[['Ford', 'Fordnard'], 'Maeve']
]

// Flatten deep arrays
function flatten(x) {
return Array.isArray(x)
? [].concat(...x.map(flatten))
: x
}

console.log(flatten(deepArray)) // ['Dolores', 'Wyatt', 'Teddy', ...]

concat is just a method for joining arrays together. The real magic comes in with the recursive flatten(...) function, which accepts an item that’s either an array, or not an array. I feel it’s best explained in this pseudocode:

FLATTEN
Is this an array?
YES: FLATTEN its children.
NO: Leave it alone.

Now that I type that, it sounds a little harsh…

I'm Mark Thomas Miller, an engineer, designer, and maker of things.