Benchmark: Array of objects loop for vs foreach vs map vs for..of + slice vs for

Script Preparation code:

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

Tests:

foreach
arr.forEach(function (item){ someFn(item); })
for
for (var i = 0, len = arr.length; i < len; i++) { someFn(arr[i]); }
map
arr.map(item => someFn(item))
for..of
for (const el of arr) { someFn(el); }
slice + [x, ...y]
let f=someFn(arr[0]); let rest=arr.slice(1).map(el => (someFn(el))); let result = [f, ...rest];
for (no slice)
let result = [someFn(arr[0])]; for (let i=1; i<arr.length; i++) { result[i] = someFn(arr[i]); }
for + push
let result = [someFn(arr[0])]; for (let i=1; i<arr.length; i++) { result.push(someFn(arr[i])); }
slice + [x, ...y] v2
let result = [someFn(arr[0]), ...arr.slice(1).map(el => (someFn(el)))];
slice + [x, ...y] v3
let rest=arr.slice(1).map(el => (someFn(el))); let result = [someFn(arr[0]), ...rest];

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
foreach
for
map
for..of
slice + [x, ...y]
for (no slice)
for + push
slice + [x, ...y] v2
slice + [x, ...y] v3

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36 OPR/112.0.0.0

Browser/OS: Opera 112 on Windows

View result in a separate tab

Test name	Executions per second
foreach	23487.2 Ops/sec
for	11938.3 Ops/sec
map	22811.2 Ops/sec
for..of	21701.9 Ops/sec
slice + [x, ...y]	18631.7 Ops/sec
for (no slice)	7851.7 Ops/sec
for + push	7491.2 Ops/sec
slice + [x, ...y] v2	18574.8 Ops/sec
slice + [x, ...y] v3	18667.1 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 benchmark definition and test cases to understand what is being tested.

**Benchmark Definition**

The benchmark defines a script that creates an array of 1000 objects, each with a `data` property, and then uses various loop constructs (forEach, for, map, for..of) to iterate over this array and apply a function (`someFn`) to each element. The purpose of this benchmark is to compare the performance of different loop constructs in JavaScript.

**Options Compared**

The options being compared are:

1. `arr.forEach(function (item){\r\n  someFn(item);\r\n})`: Uses the `forEach` method to iterate over the array.
2. `for (var i = 0, len = arr.length; i < len; i++) {\r\n  someFn(arr[i]);\r\n}`: Uses a traditional for loop to iterate over the array.
3. `arr.map(item => someFn(item))`: Uses the `map` method to create a new array with the transformed elements.
4. `for (const el of arr) {\r\n  someFn(el);\r\n}`: Uses a for..of loop to iterate over the array.
5. Various variations of `slice + [x, ...y]`: These are used to split the array into chunks and then process each chunk.

**Performance Comparison**

The benchmark measures the execution time of each option in different browsers (in this case, only Opera 112). The results show that:

* `for..of` loop is the fastest
* `map` method is slower than the for loops
* `forEach` method is slower than both for loops and map
* Various variations of `slice + [x, ...y]` are slow due to their use of array slicing

**Takeaways**

This benchmark highlights the importance of choosing the right loop construct for a specific problem. In this case, the for..of loop provides the best performance, while the `map` method and `forEach` method may be slower due to their overhead.

It's also worth noting that the use of array slicing in the `slice + [x, ...y]` variations can lead to poor performance, as it creates new arrays and involves additional copies of the data.

Related benchmarks:

Array of objects loop for vs foreach vs map vs for..of + slice vs for (version: 0)

Comparing performance of: foreach vs for vs map vs for..of vs slice + [x, ...y] vs for (no slice) vs for + push vs slice + [x, ...y] v2 vs slice + [x, ...y] v3

Created: 2 years ago by: Guest

Jump to the latest result

foreach

for

map

for..of

slice + [x, ...y]

for (no slice)

for + push

slice + [x, ...y] v2

slice + [x, ...y] v3

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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