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

Script Preparation code:

var itemCount = 10000
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 } }, {})
while loop reverse
const itemsById = {} let i = items.length const arr = new Array(i) while(i--) itemsById[items[i].id] = items[i]

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
for loop
for-of loop
reduce
while loop reverse

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.

Let's break down the provided JSON and explain what is being tested.

**Benchmark Definition**

The benchmark measures the performance of three different approaches to convert an array of objects with an `id` property into an object with `id` values as keys:

1. **For loop**: A traditional for loop that iterates over the array from end to beginning, assigning each item's id as a key in the resulting object.
2. **For-of loop**: The new for-of loop syntax introduced in ECMAScript 2015 (ES6), which allows iterating over arrays using a `for...of` loop, and automatically assigns the current value of the iteration variable to a variable declared in the loop.
3. **Reduce**: A method on the Array prototype that applies a specified function to each element of an array and reduces it to a single output value.

**Options Compared**

The benchmark compares the performance of these three approaches:

* For loop: A traditional, manual approach that uses a for loop with indexing to access array elements.
* For-of loop: The new syntax for iterating over arrays, which automates iteration and binding variables.
* Reduce: A method-based approach that uses an accumulator function to build the resulting object.

**Pros and Cons**

Here are some pros and cons of each approach:

1. **For loop**:
	* Pros: Well-known, widely supported, and easy to understand for developers familiar with traditional loops.
	* Cons: Requires manual indexing and can be error-prone if not implemented correctly.
2. **For-of loop**:
	* Pros: Simplifies iteration and reduces the risk of off-by-one errors, making it a good choice for modern development.
	* Cons: Less intuitive than traditional loops for some developers, especially those familiar with C-style programming languages.
3. **Reduce**:
	* Pros: Concise and expressive syntax, easy to read and write, and can be reused in other contexts.
	* Cons: May be slower due to the overhead of method calls, and requires a good understanding of accumulator functions.

**Library Usage**

None of the benchmark scripts explicitly use any libraries, but they do rely on built-in JavaScript features:

1. **Array methods**: The for-of loop uses Array's `length` property and indexing to access elements.
2. **Object creation**: All approaches create objects using the `=` operator or other object literal syntax.

**Special JS Features/Syntax**

The benchmark introduces a new feature:

* **For-of loop**: This is a relatively recent addition to JavaScript, introduced in ES6 (ECMAScript 2015). It allows iterating over arrays using a `for...of` loop, making it easier to write concise and expressive code.

**Alternatives**

If you're looking for alternatives or variations on these approaches:

1. **Loops**: Other iteration mechanisms like while loops, do-while loops, or recursive functions could be used instead of traditional for loops.
2. **Array destructuring**: Destructuring syntax (e.g., `const [id, data] = items[i];`) could simplify some parts of the for loop implementation.
3. **Array methods with `forEach` and `map`**: Using these methods in combination with other approaches might yield different results or simplify some parts of the benchmark.

Keep in mind that this is just a starting point, and there are many more ways to approach this problem. The goal of the BenchmarkThat.net website is to encourage experimentation, education, and understanding of JavaScript performance optimization techniques.

Related benchmarks:

for vs. for-of vs. reduce (array to ID-keyed object) vs. while (reversed) (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 vs while loop reverse

Created: 3 years ago by: Guest

Jump to the latest result

for loop

for-of loop

reduce

while loop reverse

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