Benchmark: map vs for of - MeasureThat.net

Script Preparation code:

var itemCount = 10000
var items = new Array(itemCount)

for (var i = itemCount - 1; i >= 0; i--) {
  items[i] = { id: i, data: 920501 }
}

Tests:

for in
let arr = [] for(let i in items){ arr[i] = {...items[i], idx: i} }
map
items.map((v,i)=>({...v,idx:i}))

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
for in
map

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 2 years ago)

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/122.0.0.0 Safari/537.36

Browser/OS: Chrome 122 on Linux

View result in a separate tab

Test name	Executions per second
for in	1430.0 Ops/sec
map	6575.2 Ops/sec

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

LLMs can make mistakes. Check important info.

**What is being tested?**

The provided JSON benchmark definition tests the performance of two different ways to iterate over an array in JavaScript: `for...in` and the `map()` method.

In this benchmark, we have an array `items` containing 10,000 objects. The test cases aim to find out which approach is faster when we need to create a new array with transformed data from the original array.

**Options being compared**

There are two main options being compared:

1. **For loop with `in` keyword**: This method uses a traditional `for` loop and the `in` keyword to iterate over the array's indices.
2. **Array.map() method**: This method creates a new array by applying a transformation function to each element of the original array.

**Pros and Cons**

### For loop with `in` keyword

Pros:

* Well-established and widely supported in older browsers
* Can be used for complex iteration logic that may not be easily expressible with `map()`

Cons:

* Can be slower than `map()` due to the overhead of the loop variable `i`
* May have performance issues when dealing with large arrays or complex iteration logic

### Array.map() method

Pros:

* Fast and efficient, especially for large datasets
* Expressive and concise syntax allows for easy creation of transformed data
* Well-supported in modern browsers and Node.js

Cons:

* May not be suitable for older browsers that don't support `map()`
* Can throw errors if the transformation function is invalid or throws an exception

**Library usage**

In this benchmark, no external libraries are used. The only library mentioned in the test cases is JavaScript itself.

**Special JS features or syntax**

There are two special JavaScript features being tested:

1. **For loop with `in` keyword**: This is a traditional iteration method that has been part of JavaScript since its early days.
2. **Array.map() method**: Introduced in ECMAScript 2009, this method allows for concise and expressive array transformation.

**Other alternatives**

If we wanted to test other approaches, we could consider:

1. **For loop without `in` keyword**: Using a traditional `for` loop without the `in` keyword would still achieve the same result as the original test case.
2. **Reduce() method**: Instead of using `map()` or a `for` loop, we could use the `reduce()` method to accumulate transformed data from an array.
3. **ES6 `forEach()` method**: Although not directly applicable here, this method can be useful for iterating over arrays with more expressive syntax.

These alternatives would require modifications to the benchmark definition and test cases to reflect the changes.

Related benchmarks:

map vs for of (version: 0)

Comparing performance of: for in vs map

Created: 3 years ago by: Guest

Jump to the latest result

for in

map

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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