Script Preparation code:
x
 
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(key, value) {
  return value ? `data-analytics-view-custom-analytics-${key}="${value}"` : '';
}
var attributeName = 'data-analytics-view-custom-analytics-';
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 shared

     
    const { foo, bar, baz } = input;
    const html = `
      ${foo ? `${attributeName}-foo="${foo}"` : ''}
      ${bar ? `${attributeName}-bar="${bar}"` : ''}
      ${baz ? `${attributeName}-baz="${baz}"` : ''}
    `
Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Experimental features:

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

    Fastest: N/A

    Slowest: N/A

Latest run results:
Run details: (Test run date: 4 years ago)
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.111 Safari/537.36
Chrome 86 on Windows
View result in a separate tab
Test name Executions per second
Reduce 715824.2 Ops/sec
Looping 683269.2 Ops/sec
Ifs 1080388.4 Ops/sec
Destructuring 976561.0 Ops/sec
Object.entries 687165.9 Ops/sec
Single loop 626486.7 Ops/sec
Single reduce 676162.6 Ops/sec
Template string 7385299.0 Ops/sec
Template shared 2987200.5 Ops/sec