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

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

Autogenerated LLM Summary (model llama3.2:3b, generated one year 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.

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: 5 years ago by: Guest

Jump to the latest result

Reduce

Looping

Ifs

Destructuring

Object.entries

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

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