Benchmark: map vs for...of vs for

Script Preparation code:

var data = [1,2,3,4,5,6,7,8,1,2,3,4,5,6,7,8,1,2,3,4,5,6,7,8,1,2,3,4,5,6,7,8,1,2,3,4,5,6,7,8,1,2,3,4,5,6,7,8,];

Tests:

map
data.map(function (number) { return number * 2});
for i loop
let items = []; for(let i = 0; i < data.length; i++){ items.push(data[i] * 2); }
for of loop
let items = []; for(let item of data){ items.push(item * 2); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
map
for i loop
for of loop

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 3 months ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:134.0) Gecko/20100101 Firefox/134.0

Browser/OS: Firefox 134 on Windows

View result in a separate tab

Test name	Executions per second
map	1958727.1 Ops/sec
for i loop	4128598.5 Ops/sec
for of loop	1348456.1 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated 6 months ago):

LLMs can make mistakes. Check important info.

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

**Benchmark Overview**

The benchmark compares three approaches to iterate over an array: `map`, `for...of` loop, and traditional `for` loop with an index variable (`i`). The goal is to determine which approach is most efficient in terms of execution speed.

**Test Case Breakdown**

Each test case represents a specific iteration method. Here's what's being tested:

1. **Map**: `data.map(function (number) { return number * 2 });` - This tests the use of the `map()` method to create a new array with transformed values.
2. **For...of Loop**: `let items = []; for(let item of data){ items.push(item * 2); }` - This tests the use of the `for...of` loop to iterate over an array and push values into a new array.
3. **Traditional For Loop**: `let items = []; for(let i = 0; i < data.length; i++){ items.push(data[i] * 2); }` - This tests the traditional `for` loop with an index variable.

**Library Used: None**

No specific libraries are used in these test cases, so there's no additional functionality or overhead to consider.

**Special JS Feature/ Syntax: For...of Loop**

The `for...of` loop is a relatively new feature introduced in ECMAScript 2015 (ES6). It allows iterating over arrays and other iterable objects without the need for an explicit index variable. The use of `let items = [];` before the loop suggests that the test case is verifying that the array is populated correctly, but this is not directly related to the performance comparison.

**Pros and Cons**

Here's a brief summary of each approach:

* **Map**: Pros: concise, efficient, and easy to read. Cons: can be slower for small arrays due to the overhead of creating a new array, and may have additional memory allocation.
* **For...of Loop**: Pros: readable, efficient, and often faster than traditional `for` loops due to its optimized implementation in modern browsers. Cons: less familiar to some developers, and may require additional setup (e.g., declaring variables before the loop).
* **Traditional For Loop**: Pros: widely supported, easy to understand, and flexible. Cons: can be slower than other approaches due to the need for manual indexing.

**Other Alternatives**

Some alternative iteration methods you might consider include:

* `forEach()`: similar to `map()` but returns no value.
* `reduce()`: can be used to accumulate values in an array.
* Generators or iterators: allow more fine-grained control over iteration and iteration logic.

Keep in mind that performance differences between these approaches may vary depending on specific use cases, data structures, and browser implementations.

Related benchmarks:

map vs for...of vs for (version: 0)

Comparing performance of: map vs for i loop vs for of loop

Created: 3 years ago by: Guest

Jump to the latest result

map

for i loop

for of loop

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 6 months ago):