Run results for: [Object.entries after] Reduce vs Looping vs Ifs vs Destructuring

Run details:

User agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:83.0) Gecko/20100101 Firefox/83.0

Browser: Firefox 83

Operating system: Windows 7

Device Platform: Desktop

Date tested: 3 years ago

Test name	Executions per second
Reduce	1114656.0 Ops/sec
Looping	1101684.0 Ops/sec
Ifs	1475403.0 Ops/sec
Destructuring	1034450.0 Ops/sec

Script Preparation code:

var input = { foo: 'lorem', bar: 'ipsum', baz: null }
var reduce = (itemsArray, callback, seed) => {
  let accumulator = seed;
  for (let i = 0; i < itemsArray.length; i += 1) {
    accumulator = callback(accumulator, itemsArray[i], i);
  }
  return accumulator;
};

Tests:

Reduce
const keys = ['foo', 'bar', 'baz']; const setProperty = (acc, key, value) => value ? (acc[key] = value) && acc : acc; const result = keys.reduce((acc, key) => setProperty(acc, key, input[key]), {}); Object.entries(result).map( ([key, value]) => value ? `data-analytics-view-custom-analytics-${key}="${value}"` : '', )
Looping
const keys = ['foo', 'bar', 'baz']; const setProperty = (acc, key, value) => value ? (acc[key] = value) && acc : acc; const result = reduce( keys, (acc, key) => setProperty(acc, key, input[key]), {} ); Object.entries(result).map( ([key, value]) => value ? `data-analytics-view-custom-analytics-${key}="${value}"` : '', )
Ifs
const { foo, bar, baz } = input; const result = {}; if (foo) { result.foo = foo; } if (bar) { result.bar = bar; } if (baz) { result.baz = baz; } Object.entries(result).map( ([key, value]) => value ? `data-analytics-view-custom-analytics-${key}="${value}"` : '', )
Destructuring
const { foo, bar, baz } = input; const result = { foo, bar, baz }; Object.entries(result).map( ([key, value]) => value ? `data-analytics-view-custom-analytics-${key}="${value}"` : '', )