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

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'];

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, '' )

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

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one month ago):

LLMs can make mistakes. Check important info.

Let's break down the benchmark and its various components.

**Benchmark Overview**

The benchmark measures the performance of different ways to create an object with specific properties. The input data is an object with four properties: `foo`, `bar`, `baz`, and `qux`. Two additional objects, `result` and `input`, are defined in the script preparation code. The goal is to extract the values from these properties and construct a new string.

**Benchmark Options Compared**

The benchmark compares six different approaches:

1. **Reduce**: Uses the `reduce()` method to iterate over the input object's entries.
2. **Looping**: Uses a traditional loop (for...of or for...in) to iterate over the input object's entries.
3. **Ifs**: Uses conditional statements to check if each property value is truthy, and only add it to the result object if so.
4. **Destructuring**: Uses destructuring assignment to extract the values from the `input` object into separate variables (not directly used in this benchmark).
5. **Single Reduce**: A variant of the reduce method with a simplified syntax.
6. **Single Loop**: A traditional loop with a simplified syntax.

**Performance Results**

The latest benchmark results show the performance of each approach on a Chrome 86 browser on a Windows desktop. The results are measured in executions per second (EPS).

1. **Ifs**: 952,962 EPS
2. **Destructuring**: 704,414 EPS
3. **Reduce**: 656,993 EPS
4. **Object.entries**: 628,181 EPS
5. **Looping**: 586,191 EPS
6. **Single Reduce**: 468,374 EPS

**Interpretation**

The results suggest that:

* The **Ifs** approach is the fastest, likely due to its simple and efficient conditional statement implementation.
* **Destructuring** is slower than expected, possibly because it involves additional function calls or memory allocation.
* The **Reduce** method is relatively fast, indicating good performance in this specific use case.
* The **Single Reduce** variant is slower than the standard reduce method, which might be due to some implementation detail.
* **Looping** and **Single Loop** are slowest, likely because they require more manual iteration and conditional checks.

Keep in mind that these results may vary depending on your specific use case, browser, and system configuration.

Latest run results:

Run details: (Test run date: 4 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	704414.8 Ops/sec
Looping	628181.1 Ops/sec
Ifs	1106888.8 Ops/sec
Destructuring	952962.7 Ops/sec
Object.entries	656993.4 Ops/sec
Single loop	468374.8 Ops/sec
Single reduce	586191.4 Ops/sec

Related benchmarks:

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

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

Created: 4 years ago by: Guest

Jump to the latest result

Reduce

Looping

Ifs

Destructuring

Object.entries

Single loop

Single reduce

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one month ago):