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

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]) => `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]) => `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]) => `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}"` : '', )

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Reduce
Looping
Ifs
Destructuring

Fastest: N/A

Slowest: N/A

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

LLMs can make mistakes. Check important info.

I'll break down the benchmark and explain what's being tested, along with the pros and cons of each approach.

**Benchmark Overview**

The benchmark compares four different methods to iterate over an object's properties:

1. **Reduce**: uses the `reduce()` method to accumulate values from an array of key-value pairs.
2. **Looping**: uses a traditional `for` loop to iterate over the object's properties.
3. **Ifs**: uses conditional statements (`if-else`) to set properties based on object value presence.
4. **Destructuring**: uses destructuring assignment to create a new object with extracted values.

**Benchmark Definition**

The benchmark definition is in JSON format and includes:

* `Name`: a descriptive name for the benchmark
* `Description`: an empty string, which indicates no detailed description is provided
* `Script Preparation Code`: a JavaScript function that sets up the input data (`input`) used throughout the benchmark
* `Html Preparation Code`: an empty string, indicating no HTML setup is needed

**Individual Test Cases**

Each test case has a unique benchmark definition in JSON format, including:

* A brief description of the test
* The actual code to be executed for each test case

These test cases are designed to execute the four different methods on the same input data.

**Library Used: `reduce()` method**

The `reduce()` method is used in two test cases (Reduce and Looping) as part of the benchmark. This method is a built-in JavaScript function that applies a reduction function to each element of an array, accumulating a value.

Pros:

* Efficient and concise way to process arrays
* Built-in JavaScript function, reducing dependencies

Cons:

* May be slower than custom looping methods in certain cases (e.g., smaller arrays)
* Requires understanding of the accumulator variable and callback functions

**Special JS Feature/ Syntax: `Destructuring`**

The "Destructuring" test case uses destructuring assignment to create a new object with extracted values. This feature is not specific to JavaScript, as it's a common programming concept, but in this context, it's used for benchmarking purposes.

Pros:

* Simplifies code and reduces the need for manual property assignments
* Can be faster than traditional assignment methods

Cons:

* May require additional computations due to object creation and property access
* Not all browsers may support or optimize destructuring correctly

**Other Considerations**

When interpreting these results, keep in mind that:

* The benchmark is running on a specific JavaScript engine (Firefox 83) and platform (Windows 7 Desktop)
* The input data (`input`) is fixed for each test case
* Other factors like system load, network latency, or disk I/O may impact benchmark performance

**Alternatives**

Other approaches to iterate over an object's properties include:

1. `for...in` loop: uses a traditional loop with the `for...in` construct to access object properties.
2. `Object.keys()` and indexing: uses the `Object.keys()` method to get an array of property names, then uses indexing to access each property value.
3. Custom looping using `Array.prototype.forEach()`: uses the `forEach()` method from the Array prototype to process each property value.

These alternatives may have different performance characteristics depending on the specific use case and environment.

Latest run results:

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

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

Browser/OS: Firefox 83 on Windows 7

View result in a separate tab

Test name	Executions per second
Reduce	1698250.2 Ops/sec
Looping	1645076.8 Ops/sec
Ifs	2215145.5 Ops/sec
Destructuring	1657935.0 Ops/sec

Related benchmarks:

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

Comparing performance of: Reduce vs Looping vs Ifs vs Destructuring

Created: 4 years ago by: Guest

Jump to the latest result

Reduce

Looping

Ifs

Destructuring

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):