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

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

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Reduce
Looping
Ifs
Destructuring
Object.entries

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 explain the benchmark and its options in detail.

**Benchmark Overview**

The benchmark compares the performance of four different approaches to create an object from an input object:

1. Reduce
2. Looping
3. Ifs
4. Destructuring
5. Object.entries (used as a comparison for both Reduce and a standalone test case)

**Options Compared**

Here's a brief description of each approach:

*   **Reduce**: Uses the `reduce()` method to iterate over an array and accumulate values into a single object.
    *   Example: `result = keys.reduce((acc, key) => setProperty(acc, key, input[key]), {})`
    *   Pros: Efficient for large datasets and can be easily parallelized.
    *   Cons: May have higher memory usage due to the accumulator parameter.
*   **Looping**: Uses a traditional loop to iterate over an array and accumulate values into a single object.
    *   Example: `const result = {};` then `for (let i = 0; i < keys.length; i++) { setProperty(result, keys[i], input[keys[i]]); }`
    *   Pros: Memory-efficient and easy to understand for beginners.
    *   Cons: May not be as efficient for large datasets.
*   **Ifs**: Uses a series of conditional statements (`if-else`) to create the object from scratch.
    *   Example: `const result = {};` then `if (foo) { result.foo = foo; }` and so on.
    *   Pros: Easy to understand for beginners and does not require memory allocation.
    *   Cons: May be slower due to the overhead of conditional statements.

**Destructuring**

*   Example: `const result = { foo, bar, baz };`
    *   Pros: Memory-efficient, easy to read, and concise.
    *   Cons: Does not allow for dynamic property names or null/undefined values.

**Object.entries**

*   Example: `Object.entries(result).map(([key, value] => `data-analytics-view-custom-analytics-${key}=\"${value}\"`,)`
    *   Pros: Provides a convenient way to iterate over object properties and values.
    *   Cons: May not be as efficient for large datasets due to the overhead of `Object.entries()`

**Library Used**

*   The `reduce()` method is a built-in JavaScript function.
*   No additional libraries are used in this benchmark.

**Special JS Features/Syntax**

*   The `reduce()` method uses a callback function, which is a common pattern in functional programming languages like Lisp or Scheme.
*   The use of destructuring (`const { foo, bar, baz } = input;`) and the spread operator (`{ ... }`) demonstrates modern JavaScript syntax features.

**Alternatives**

Other approaches that could be used to create an object from an input object include:

*   Using a library like Lodash or Ramda for functional programming-inspired solutions.
*   Employing a custom solution using a loop, conditional statements, and memory allocation (e.g., manually creating properties on the object).
*   Utilizing a data-binding framework like React or Angular to manage state changes.

The benchmark provides an opportunity to compare the performance of different approaches in JavaScript, allowing developers to choose the most efficient method for their specific use cases.

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	1364668.8 Ops/sec
Looping	1552143.2 Ops/sec
Ifs	1881359.0 Ops/sec
Destructuring	1617620.5 Ops/sec
Object.entries	1255154.4 Ops/sec

Related benchmarks:

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

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

Created: 4 years ago by: Guest

Jump to the latest result

Reduce

Looping

Ifs

Destructuring

Object.entries

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