Benchmark: for-of-vs-map - MeasureThat.net

Script Preparation code:

var arr = [];
for (var i = 0; i < 1000; i++) {
    arr[i] = {
        name: `${i}`,
        value: i
    };
}

function someFn(i) {
    const x24 = i.value * 3 * 8;
    i.value = x24;
    i.name = `${x24}`;
    return i;
}

Tests:

for of
const x = [] for (var y of arr) { x.push(someFn(y)); }
map
arr.map(item => someFn(item))

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
for of
map

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 28 days ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/146.0.0.0 Safari/537.36

Browser/OS: Chrome 146 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
for of	90091.5 Ops/sec
map	162372.7 Ops/sec

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 benchmark.

**Benchmark Definition**

The benchmark is designed to compare two approaches for iterating over an array in JavaScript:

1. **For-of loop**: This approach uses the `for...of` loop, which is a more modern way of iterating over arrays and other iterable objects.
2. **Array.prototype.map()**: This approach uses the `map()` method, which applies a function to each element of an array and returns a new array with the results.

**Options Compared**

The two options being compared are:

* For-of loop: `for (const y of arr) { ... }`
* Array.prototype.map(): `arr.map(item => someFn(item))`

**Pros and Cons**

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

**For-of Loop**

Pros:

* More readable and concise code
* Allows for early returns and breaking out of loops
* Can be more efficient in certain cases (e.g., when using `for...of` with `Array.from()` or `Promise.all()`)

Cons:

* May not work as expected if the array is modified during iteration
* Limited control over iteration order

**Array.prototype.map()**

Pros:

* Returns a new array, preserving the original data
* Allows for more complex transformations and filtering
* Can be used with other methods like `forEach()`, `filter()`, and `reduce()`.

Cons:

* Creates a new array, which can lead to memory allocation overhead
* May not be as readable or concise as the for-of loop in some cases

**Other Considerations**

In this benchmark, we're also interested in the JavaScript runtime (V8) used by each browser. The provided raw UA string indicates that both browsers use Firefox 114 on a Linux desktop.

Now, let's look at the individual test cases:

**Test Case 1: For-of Loop**

The test case uses the `for...of` loop to iterate over the array and call the `someFn()` function for each element. The `const x = []` initialization creates an empty array that will be populated with results from the `someFn()` calls.

**Library/Function:** None

This is a built-in JavaScript feature, and no external library or module is required.

**Special JS Feature/Syntax:** For-of loop (not exactly a "feature" but rather a new syntax introduced in ECMAScript 2015)

**Test Case 2: Array.prototype.map()**

The test case uses the `map()` method to apply the `someFn()` function to each element of the array. The resulting array is not used, and the focus is on measuring the execution time of this approach.

**Library/Function:** Array.prototype.map()

This method is a built-in part of the JavaScript standard library (ECMAScript 262).

Overall, the benchmark provides a simple yet informative way to compare two common approaches for iterating over arrays in JavaScript. The results can help developers choose the most suitable approach depending on their specific use case and performance requirements.

Related benchmarks:

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

Comparing performance of: for of vs map

Created: 3 years ago by: Guest

Jump to the latest result

for of

map

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):