Benchmark: for vs. for-of vs. reduce (array to ID-keyed object)

Script Preparation code:

var itemCount = 1000
var items = new Array(itemCount)

for (var i = itemCount - 1; i >= 0; i--) {
  items[i] = { id: i, data: 920501 }
}

Tests:

for loop
const itemsById = {} for (let i = items.length - 1; i >= 0; i--) { itemsById[items[i].id] = items[i] }
for-of loop
const itemsById = {} for (const item of items) { itemsById[item.id] = item }
reduce
const itemsById = items.reduce((result, item) => { return { ...result, [item.id]: item } }, {})

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
for loop
for-of loop
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.

I'll provide an explanation of the provided benchmark, its options, pros and cons, library usage, special JS features, and other considerations.

**Benchmark Description**

The provided JSON represents a JavaScript microbenchmark test case that compares three different approaches to iterate over an array and convert it to an object with `id` values as keys:

1. **For loop**: A traditional for loop with manual index decrement.
2. **For-of loop**: The new for...of loop, introduced in ECMAScript 2015 (ES6), which allows iterating over arrays without manual indexing.
3. **Reduce**: The Array.prototype.reduce() method, also introduced in ES6, which can be used to iterate over an array and accumulate values.

**Benchmark Preparation Code**

The preparation code is identical for all three approaches:
```javascript
var itemCount = 1000;
var items = new Array(itemCount);

// Initialize array with objects containing 'id' and 'data' properties
for (var i = itemCount - 1; i >= 0; i--) {
  items[i] = { id: i, data: 920501 };
}
```
**Options Comparison**

Here's a brief summary of the three approaches:

### For Loop

* **Pros**: Simple and straightforward.
* **Cons**: Requires manual indexing, which can be error-prone.

```javascript
for (var i = items.length - 1; i >= 0; i--) {
  itemsById[items[i].id] = items[i];
}
```

### For-Of Loop

* **Pros**: Elegant and efficient with modern JavaScript engines.
* **Cons**: Not supported in older browsers.

```javascript
for (const item of items) {
  itemsById[item.id] = item;
}
```

### Reduce

* **Pros**: Concise and expressive, leveraging the Array.prototype.reduce() method.
* **Cons**: May require additional library imports if not built-in to the browser or environment.

```javascript
const itemsById = items.reduce((result, item) => {
  return { ...result, [item.id]: item };
}, {});
```

**Library Usage**

The `Array.prototype.reduce()` method is a built-in method in modern JavaScript. However, some older browsers may not support it natively. If needed, polyfills or library imports can be used to ensure compatibility.

**Special JS Feature: For-Of Loop**

The for...of loop was introduced in ECMAScript 2015 (ES6) and is a new iteration syntax that allows iterating over arrays and other iterable objects without manual indexing. It's designed to be more concise and expressive than traditional for loops.

In this benchmark, the for-of loop provides an efficient and modern approach to iterating over the array, but it may not be supported in older browsers or environments.

**Other Considerations**

When choosing between these approaches, consider the following factors:

* **Browser support**: If you need to support older browsers, choose a method that's more widely supported (e.g., for loop).
* **Code conciseness**: If readability is less of a concern, use the reduce() method for its concise nature.
* **Performance**: In modern JavaScript engines, the for-of loop and reduce() method are often comparable in performance.

Latest run results:

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

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/100.0.4896.127 Safari/537.36

Browser/OS: Chrome 100 on Linux

View result in a separate tab

Test name	Executions per second
for loop	5578.1 Ops/sec
for-of loop	62593.4 Ops/sec
reduce	2402.9 Ops/sec

Related benchmarks:

for vs. for-of vs. reduce (array to ID-keyed object) (version: 0)

Convert array of objects with `id` property to object with `id` values as keys.

Comparing performance of: for loop vs for-of loop vs reduce

Created: 2 years ago by: Guest

Jump to the latest result

for loop

for-of loop

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