Benchmark: [Object.entries after fixed] Reduce vs Looping vs Ifs vs Destructuring vs Object.entries vs Single loop vs Single reduce vs Template string vs Template function

Script Preparation code:

var input = { foo: 'lorem', bar: 'ipsum', baz: null, qux: 'dosol', quz: 'set'}
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;
};
var allowedKeys = ['foo', 'bar', 'baz'];

function renderAttribute(parameters, key) {
  const value = parameters[key];
  if (!value) {
    return ''
  }

  return `data-analytics-view-custom-analytics-${key}="${value}"`;
}

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]) => `data-analytics-view-custom-analytics-${key}="${value}"`, ).join(' ')
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]) => `data-analytics-view-custom-analytics-${key}="${value}"`, ).join(' ')
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]) => `data-analytics-view-custom-analytics-${key}="${value}"`, ).join(' ')
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}"` : '', ).join(' ')
Object.entries
const { foo, bar, baz } = input; const result = Object.entries({ foo, bar, baz }).filter(([key, value]) => value !== null && value !== undefined); result.map( ([key, value]) => `data-analytics-view-custom-analytics-${key}="${value}"`, ).join(' ')
Single loop
reduce( Object.entries(input), (acc, [key, value]) => (~allowedKeys.indexOf(key) && value) ? `${acc} data-analytics-view-custom-analytics-${key}="${value}"` : acc, '' );
Single reduce
Object.entries(input).reduce( (acc, [key, value]) => (~allowedKeys.indexOf(key) && value) ? `${acc} data-analytics-view-custom-analytics-${key}="${value}"` : acc, '' )
Template string
const { foo, bar, baz } = input; const html = ` ${foo ? `data-analytics-view-custom-analytics-foo="${foo}"` : ''} ${bar ? `data-analytics-view-custom-analytics-bar="${bar}"` : ''} ${baz ? `data-analytics-view-custom-analytics-baz="${baz}"` : ''} `
Template function
const html = ` ${renderAttribute(input, 'foo')} ${renderAttribute(input, 'bar')} ${renderAttribute(input, 'baz')} `

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Reduce
Looping
Ifs
Destructuring
Object.entries
Single loop
Single reduce
Template string
Template function

Fastest: N/A

Slowest: N/A

ⓘ Get performance results from real users on your website with Request Metrics.

Website Performance Monitoring by Request Metrics

Latest run results:

Run details: (Test run date: 3 years ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.111 Safari/537.36

Browser/OS: Chrome 86 on Windows

View result in a separate tab

Test name	Executions per second
Reduce	726008.9 Ops/sec
Looping	689139.3 Ops/sec
Ifs	1146395.0 Ops/sec
Destructuring	1008809.0 Ops/sec
Object.entries	713096.6 Ops/sec
Single loop	560583.6 Ops/sec
Single reduce	666971.6 Ops/sec
Template string	7642505.0 Ops/sec
Template function	1480410.0 Ops/sec

[Object.entries after fixed] Reduce vs Looping vs Ifs vs Destructuring vs Object.entries vs Single loop vs Single reduce vs Template string vs Template function (version: 0)

Comparing performance of: Reduce vs Looping vs Ifs vs Destructuring vs Object.entries vs Single loop vs Single reduce vs Template string vs Template function

Created: 3 years ago by: Guest

Jump to the latest result

Reduce

Looping

Ifs

Destructuring

Object.entries

Single loop

Single reduce

Template string

Template function

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A