Benchmark: For loop vs For of vs Map()

Script Preparation code:

var strs = Array.from(new Array(10000)).map(() => 'String concat. ')
var result = []

Tests:

(For loop)
for (let i = 0; i < strs.length; i++) { result.push(strs[i]) }
(For of loop)
for (let i of strs) { result.push(strs[i]); }
(Map)
result = strs.map((a) => a)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
(For loop)
(For of loop)
(Map)

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.1:latest, generated one year ago):

LLMs can make mistakes. Check important info.

Let's dive into the provided JSON data and explain what's being tested, compared, and other considerations.

**Benchmark Name:** For Loop vs For of vs Map()

**What's Being Tested:**

The benchmark compares three different ways to iterate over an array (`strs`) and push its elements onto a new array (`result`). The test cases are:

1. **For Loop**: A traditional `for` loop that increments an index variable (`i`) from 0 to the length of the array, accessing each element using `strs[i]`.
2. **For Of Loop**: An ECMAScript 6 (ES6) feature called "for...of" loop, which iterates over an iterable object (in this case, the array `strs`), assigning each value to a variable (`i`) without the need for an index variable.
3. **Map() Function**: A method call on the `map()` function, which creates a new array by applying a given callback function to each element of the original array.

**Comparison Options:**

The test cases compare the performance of these three approaches in terms of how many executions per second (EPS) they can perform on a Chrome 109 browser running on Windows desktop.

**Pros and Cons:**

Here's a brief summary of the pros and cons of each approach:

1. **For Loop**:
	* Pros: Well-established, widely supported.
	* Cons: Requires manual index management, less concise code.
2. **For Of Loop**:
	* Pros: More concise code, easier to read, and write.
	* Cons: Introduced in ES6 (2015), may not be supported by older browsers or environments.
3. **Map() Function**:
	* Pros: Efficient for creating new arrays from existing ones, more modern approach.
	* Cons: May incur performance overhead due to function call overhead.

**Other Considerations:**

1. **Library Used:** None.
2. **Special JS Feature or Syntax:** The "for...of" loop uses a special feature introduced in ECMAScript 6 (ES6).
3. **Alternatives:** Other alternatives for iterating over arrays include using `forEach()` method, `reduce()`, or even recursive functions.

In conclusion, this benchmark compares the performance of three different approaches to iterate over an array: traditional `for` loop, "for...of" loop (ECMAScript 6), and the `map()` function. The results show that the `map()` function is the fastest approach on Chrome 109 browser running on Windows desktop.

Related benchmarks:

For loop vs For of vs Map() (version: 0)

Comparing performance of: (For loop) vs (For of loop) vs (Map)

Created: 3 years ago by: Guest

Jump to the latest result

(For loop)

(For of loop)

(Map)

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

Autogenerated LLM Summary (model llama3.1:latest, generated one year ago):