Flattening multidimensional JavaScript arrays

June 22, 2018
I'm making an alternative to DevTools. Click here to check it out.

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:

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

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