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

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;
};

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]) => (~['foo', 'bar', 'baz'].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

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 dive into the world of JavaScript microbenchmarks on MeasureThat.net.

The provided benchmark defines six different approaches to create an object with specific properties, using various methods such as loops, conditionals, and destructuring. We'll break down each approach, its pros and cons, and other considerations.

**Approach 1: Reduce**

* Benchmark Definition:
```javascript
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]), {});
```
* Pros: This approach uses the `reduce` method, which is a concise and expressive way to iterate over an array. It also avoids explicit loops.
* Cons: The `reduce` method can be less readable for those unfamiliar with it, and it may not perform as well on very large arrays.
* Other Considerations: The `setProperty` function uses the `&&` operator to ensure that the property is added only if its value is truthy.

**Approach 2: Looping**

* Benchmark Definition:
```javascript
const keys = ['foo', 'bar', 'baz'];

const result = {};

for (let i = 0; i < keys.length; i++) {
  const key = keys[i];
  result[key] = input[key];
}
```
* Pros: This approach uses a traditional loop to iterate over the array of keys. It's easy to understand and doesn't rely on any specific function.
* Cons: The loop is explicit, which can make it less concise than other approaches.
* Other Considerations: None notable.

**Approach 3: Ifs**

* Benchmark Definition:
```javascript
const { foo, bar, baz } = input;

const result = {};

if (foo) {
  result.foo = foo;
}

if (bar) {
  result.bar = bar;
}

if (baz) {
  result.baz = baz;
}
```
* Pros: This approach uses explicit conditionals to add properties to the object. It's easy to read and understand.
* Cons: The use of multiple `if` statements can make it less concise than other approaches.
* Other Considerations: None notable.

**Approach 4: Destructuring**

* Benchmark Definition:
```javascript
const { foo, bar, baz } = input;

const result = {};
```
* Pros: This approach uses destructuring to extract the properties from the `input` object. It's concise and expressive.
* Cons: The syntax can be unfamiliar to those not familiar with destructuring.
* Other Considerations: None notable.

**Approach 5: Object.assign**

* Benchmark Definition:
```javascript
const keys = ['foo', 'bar', 'baz'];
const result = {};

Object.assign(result, {
  foo: input.foo,
  bar: input.bar,
  baz: input.baz
});
```
* Pros: This approach uses `Object.assign` to create a new object with the desired properties. It's concise and easy to read.
* Cons: The use of an object literal can make it less explicit than other approaches.
* Other Considerations: None notable.

**Approach 6: Object.keys()**

* Benchmark Definition:
```javascript
const keys = ['foo', 'bar', 'baz'];
const result = {};

Object.keys(input).forEach(key => {
  result[key] = input[key];
});
```
* Pros: This approach uses `Object.keys()` to get an array of the object's keys and then iterates over it using `forEach`. It's concise and expressive.
* Cons: The use of `forEach` can make it less explicit than other approaches.
* Other Considerations: None notable.

Now, let's look at the benchmark results:

The "Single loop" approach performs best, with an execution rate of 1,139,277.625 executions per second. This is likely due to the optimized nature of the `reduce` method in modern JavaScript engines.

The other approaches perform similarly, but with slightly lower execution rates. The "Ifs" and "Destructuring" approaches are tied for third place, while the "Object.assign" and "Object.keys()" approaches trail behind.

In conclusion, each approach has its pros and cons, and the choice of which one to use depends on the specific requirements of your project. If you need a concise and expressive way to create an object with specific properties, `reduce` or destructuring might be good choices. If readability is more important, "Ifs" or "Object.assign" might be better options.

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	533879.8 Ops/sec
Looping	547958.0 Ops/sec
Ifs	613705.1 Ops/sec
Destructuring	589090.1 Ops/sec
Object.entries	541770.9 Ops/sec
Single loop	1139277.6 Ops/sec

Related benchmarks:

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

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

Created: 4 years ago by: Guest

Jump to the latest result

Reduce

Looping

Ifs

Destructuring

Object.entries

Single loop

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