Benchmark: For of vs map - MeasureThat.net

Script Preparation code:

var arr = [];
for (var i = 0; i < 1000; i++) {
     arr[i] = {i: i, test: "test"};
}

function someFn(i) {
 return i * 3 * 8;
}

Tests:

for of
for (const value of arr) { console.log(value.i); }
map
arr.map((item)=>{ console.log(item.i) })

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:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

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

LLMs can make mistakes. Check important info.

Let's break down what's being tested in the provided JSON.

The benchmark is comparing two approaches for iterating over an array: `for...of` and the `map()` method.

**For...of**

* The script preparation code creates an array `arr` with 1000 elements, each containing an object with properties `i` and `test`.
* The script contains a function `someFn(i)` that takes an integer `i` as input and returns its result multiplied by 3 and 8.
* The benchmark definition uses the `for...of` loop to iterate over the array. It assumes that each element of the array has an `i` property that can be accessed directly.

**Map()**

* The script preparation code creates an array `arr` with 1000 elements, just like above.
* The benchmark definition uses the `map()` method to transform the array into a new array, where each element is logged to the console using `console.log(item.i)`.
* The `map()` method applies a callback function to each element of the original array, returning an array of transformed values.

**Comparison and Pros/Cons**

The comparison between `for...of` and `map()` has several aspects:

1. **Performance**: `map()` is generally faster than `for...of` because it avoids the overhead of repeated pushes to the array using `push()`. However, for small arrays or simple transformations, the difference might be negligible.
2. **Memory usage**: `map()` uses more memory than `for...of`, as it creates a new array with transformed values.
3. **Readability and conciseness**: Both approaches have their trade-offs. `for...of` is often considered more readable and concise, especially for simple transformations. However, `map()` can be more expressive when dealing with complex operations.

**Library and Special JS features**

There are no libraries used in this benchmark, as the focus is on comparing two built-in JavaScript features: `for...of` and `map()`.

**Special JS feature: Arrow functions**

The `map()` method uses an arrow function to transform each element of the array. An arrow function is a concise way to define small, single-expression functions in JavaScript. It's denoted by the arrow symbol (`=>`) before the function parameters.

Other alternatives for iterating over arrays include:

1. **Traditional `for` loop**: A more verbose approach that uses a `for` loop with an index variable.
2. **Array.prototype.forEach()**: A method that calls a provided function once for each element in the array, without returning any value.
3. **Array.prototype.reduce()**: A method that applies a reducer function to each element of the array, accumulating a result.

These alternatives might be used depending on the specific use case and personal preference. However, `for...of` and `map()` are two of the most commonly used and efficient approaches for iterating over arrays in JavaScript.

Related benchmarks:

For of vs map (version: 0)

Comparing performance of: for of vs map

Created: 6 years ago by: Guest

Jump to the latest result

for of

map

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

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