Performance of JavaScript object reduce

Just a short post to look at assumptions. A few weeks ago was having one of those classic debates with a co-worker about the performance of object construction. Since with ES6 it is very easy to write:

const obj = data.reduce((acc, [k, v]) => ({ ...acc, [k]: v }), {});

I had internally always made the assumption that JavaScript’s runtime was making some tail call style optimizations on object reduce. But, after the discussion I realized that you should measure and not assume.

So measure we did, only to find that while it’s short in syntax it’s slow in performance:

This is on the 8.9.0 node runtime. All times are in ‘ms’

What you can see is this is pretty close to a exponentail growth based on the number of items. Sure it’s fast enough if it’s a small object (~10 items) but, very quickly grows if it’s anything of size.

The test program (run at each of the different input counts)

const {
  performance,
  PerformanceObserver
} = require('perf_hooks');

/*
** Construct some test data
*/
const data = [];

for (let i = 0; i < 1000; i ++) {
  data.push([String(i), i]);
}

/*
**  Test variations
*/
function reduceHead() {
  return data.reduce((acc, [k, v]) => ({ ...acc, [k]: v }), {});
}

function reduceTail() {
  return data.reduce((acc, [k, v]) => ({ [k]: v, ...acc }), {});
}

function reduceAssign() {
  return data.reduce((acc, [k, v]) => {
    acc[k] = v;
    return acc;
  }, {});
}

/*
**  Performance hooks
*/
const obs = new PerformanceObserver((list) => {
  const entries = list.getEntries();
  console.log(entries[0].name, entries[0].duration, 'ms');
});

const wrapHead = performance.timerify(reduceHead);
const wrapTail = performance.timerify(reduceTail);
const wrapAssign = performance.timerify(reduceAssign);

obs.observe({ entryTypes: ['function'] });

wrapHead();
wrapTail();
wrapAssign();