Benchmark: Search Results Web results Performance of for loops with JavaScript

Script Preparation code:

var posts = [];
for(let i = 0; i < 1000000; i++) {
  posts.push({
    upVotes: i,
  });
}

Tests:

reduce
let sum = 0; sum = posts.reduce((s, p) => s += p.upVotes, 0);
for loop
let sum = 0; for (let i = 0; i < posts.length; i++) { sum += posts[i].upVotes; }
for each
let sum = 0; posts.forEach(element => { sum += element.upVotes; });
for of
let sum = 0; for(const post of posts) { sum += post.upVotes; }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
reduce
for loop
for each
for of

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.198 Safari/537.36

Browser/OS: Chrome 86 on Windows

View result in a separate tab

Test name	Executions per second
reduce	40.8 Ops/sec
for loop	4.0 Ops/sec
for each	38.1 Ops/sec
for of	380.3 Ops/sec

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!

**Benchmark Definition**

The provided JSON represents a benchmark definition, which is a script that defines a specific task to be performed. In this case, the task is to calculate the sum of the `upVotes` array elements using different methods.

**Script Preparation Code**

The script preparation code is a JavaScript snippet that initializes an empty array `posts` with 1 million elements and assigns a random value to each element's `upVotes` property:
```javascript
var posts = [];
for (let i = 0; i < 1000000; i++) {
  posts.push({
    upVotes: i,
  });
}
```
This code creates an array of objects, where each object has a single property `upVotes` with a value ranging from 0 to 999,999.

**Html Preparation Code**

There is no HTML preparation code provided, which means that the benchmark doesn't involve any DOM manipulation or rendering.

**Individual Test Cases**

The test cases are defined in the `testCases` array. Each test case has two properties: `Benchmark Definition` and `Test Name`. The `Benchmark Definition` property contains a JavaScript snippet that performs the specified task (i.e., calculating the sum of the `upVotes` array elements using different methods). The `Test Name` property provides a human-readable name for each test case.

The four test cases are:

1. **Reduce**: Uses the `reduce()` method to calculate the sum.
2. **For Loop**: Uses a traditional `for` loop to iterate over the array and calculate the sum.
3. **For Each**: Uses the `forEach()` method to iterate over the array and calculate the sum.
4. **For Of**: Uses the `for...of` loop syntax (introduced in ECMAScript 2015) to iterate over the array and calculate the sum.

**Library Used**

None of these test cases use any external libraries.

**Special JS Features or Syntax**

* The `for...of` loop syntax is used for the first time in this benchmark.
* The `reduce()` method is a built-in JavaScript method introduced in ECMAScript 2009.

**Pros and Cons of Different Approaches**

1. **Reduce**: Pros:
	* Efficient use of memory, as it only iterates over the array once.
	* Fast execution time, especially for large arrays.
Cons:
	* May not be as intuitive or familiar to developers who are new to JavaScript.
2. **For Loop**: Pros:
	* Wide support across different browsers and versions.
	* Can be more readable and familiar to developers who have experience with traditional `for` loops.
Cons:
	* Can be slower for large arrays, as it iterates over the array multiple times.
3. **For Each**: Pros:
	* Similar efficiency benefits to `reduce()` method.
	* Can be a good choice when working with objects or collections that support iteration.
Cons:
	* May not be as widely supported as traditional `for` loops.
4. **For Of**: Pros:
	* Efficient use of memory and execution time, especially for large arrays.
	* Modern and concise syntax, making it easier to read and write.
Cons:
	* Limited support across different browsers and versions.

**Other Alternatives**

1. **Array.prototype.map()`: Could be used to calculate the sum by mapping over the array and then using `reduce()` or another method to combine the results.
2. **Async/await**: Could be used to implement a parallelized version of the benchmark, where each test case is executed concurrently.

Overall, the choice of which approach to use depends on the specific requirements and constraints of the project. For example, if speed is critical and memory usage is not a concern, `reduce()` or `for...of` might be good choices. If readability and familiarity are more important, `for Loop` might be a better fit.

Related benchmarks:

Search Results Web results Performance of for loops with JavaScript (version: 3)

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

Created: 4 years ago by: Registered User

Jump to the latest result

reduce

for loop

for each

for of

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