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 gemma2:9b, generated one year ago):

LLMs can make mistakes. Check important info.

This benchmark tests the performance of three different ways to iterate over an array of strings in JavaScript:

* **Traditional `for` loop:** This is the most common way to iterate over arrays, using a counter variable and accessing elements by their index.

```javascript
   for (let i = 0; i < strs.length; i++) {
     result.push(strs[i])
   }
   ```

* **`for...of` loop:** This is a more modern way to iterate over arrays, introduced in ES6. It simplifies the syntax and makes the code more readable.

```javascript
   for (let i of strs) {
     result.push(strs[i]); 
   }  
   ```

* **`.map()` method:** This method creates a new array by applying a function to each element of an existing array. It's often used for transforming data, but it can also be used for iteration.

```javascript
   result = strs.map((a) => a) 
   ```

**Pros and Cons:**

* **`for` loop:**  The most performant in certain scenarios due to its direct index access. However, it can be less readable than other options.

* **`for...of` loop:** A good balance of readability and performance. It's generally faster than the `for` loop for simple iteration tasks.

* **`.map()` method:** The most concise syntax, but can sometimes have a slight performance overhead compared to loops.  It's often preferred when you need to transform data as you iterate.

**Consideration:**

* **Array Size:** The performance difference between these methods may become more significant with larger arrays.

* **Data Transformation:** If you need to modify the array elements during iteration, `.map()` is a good choice. For simple iteration without modification, `for...of` loops are often preferred.
* **Readability:** Choose the method that makes your code most understandable and maintainable.

**Alternatives:**

While not explicitly tested in this benchmark, other ways to iterate over arrays exist:

* **`.forEach()` method:** Similar to `for...of`, but it executes a callback function for each element.
* **Async iteration:** For iterating over asynchronous data sources (like promises or streams), use async/await with generators or async iterators.

Let me know if you'd like more details on any of these points!

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 gemma2:9b, generated one year ago):