Flattening arrays of objects

map with join vs forEach with concat vs forEach with push

by Génesis García Morilla

HTML

<div id="join"></div>
<div id="concat"></div>
<div id="push"></div>

JavaScript

// map with join vs forEach with concat
let array = [];

// Returns an array of n elements filled with content
let get_array = (n, content) => Array(n).fill(content);

// Returns an object with a name property that has a content value
let get_object = (name, content) => Object.defineProperty({}, name, {
    value: content
  })

// 3 levels of arrays with objects (nested)
let alphas = 
get_array(3, get_object('gammas', 
  get_array(2, get_object('betas', 
    get_array(1, 'stuff')
  ))
));

// join
array = alphas.map(a => 
  a.gammas.map(g => g.betas)
).join();
document.querySelector('#join').textContent = array;

// concat
array = [];
alphas.forEach(a => 
  a.gammas.forEach(g => {
    array = array.concat(g.betas);
  })
);
document.querySelector('#concat').textContent = array;

// push
array = [];
alphas.forEach(a => 
  a.gammas.forEach(g => {
    g.betas.forEach(b => array.push(b));
  })
);
document.querySelector('#push').textContent = array;