Benchmark: Array.map vs For Loop

Script Preparation code:

 datas = [];
for (let i=0; i<= 1000; i++) {
 	 datas.push({
       	objectId: null,
       	revisionId : null
     });
}

Tests:

Array.map
const result = []; datas.map(eg => result.push({ objectId: eg.objectId, revisionId: eg.revisionId }));
Loop for
const result = []; for (let i=0; i<= datas.lentgh; i++) { result.push({ objectId: datas[i].objectId, revisionId : datas[i].revisionId }); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.map
Loop for

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 29 days ago):

LLMs can make mistakes. Check important info.

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

**Benchmark Definition**

The benchmark is defined in two parts:

1. **Script Preparation Code**: This code creates an array `datas` with 1000 objects, each containing `objectId` and `revisionId` properties. The script uses a for loop to populate the array.
2. **Html Preparation Code**: This field is empty, indicating that no HTML preparation code is needed for this benchmark.

**Individual Test Cases**

There are two test cases:

1. **Array.map**: This test case creates an empty array `result` and then uses the `map()` function to push objects onto it. Each object is created from a corresponding element in the `datas` array, using destructuring assignment (`{ objectId: eg.objectId, revisionId: eg.revisionId }`). The loop iterates over each element in the `datas` array.
2. **Loop for**: This test case creates an empty array `result` and then uses a traditional for loop to push objects onto it. Each object is created from a corresponding element in the `datas` array, using indexing (`datas[i].objectId`).

**Comparison of Options**

Both test cases are comparing:

* A high-performance JavaScript method (`map()`) against a low-level iteration approach (`for loop`)
* The impact of using destructuring assignment versus indexing to create objects
* The performance difference between these two approaches on modern devices (specifically, Chrome Mobile 105)

**Pros and Cons**

Here's a brief summary:

* **Array.map**:
	+ Pros: concise, expressive, and efficient for iterating over arrays.
	+ Cons: may incur overhead due to function call and object creation.
* **Loop for**:
	+ Pros: low-level, control over iteration, no function calls or object creations.
	+ Cons: verbose, error-prone, and can lead to performance issues if not optimized.

**Library: None**

There are no external libraries used in this benchmark.

**Special JS Feature/Syntax**

None mentioned.

**Other Alternatives**

If you wanted to test alternative approaches, here are a few options:

* Using `forEach()` instead of `map()`
* Using `reduce()` instead of `map()`
* Using an arrow function with `map()`
* Using `for...of` loop instead of traditional `for` loop
* Using WebAssembly or other low-level languages for performance-critical sections

Keep in mind that each alternative has its own trade-offs and may not offer significant performance improvements.

In summary, this benchmark is testing the performance difference between using a high-level JavaScript method (`map()`) versus a low-level iteration approach (`for loop`) on modern devices.

Latest run results:

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

User agent: Mozilla/5.0 (Linux; Android 11; M6 Note) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/105.0.0.0 Mobile Safari/537.36

Browser/OS: Chrome Mobile 105 on Android

View result in a separate tab

Test name	Executions per second
Array.map	7500.8 Ops/sec
Loop for	754987.2 Ops/sec

Related benchmarks:

Array.map vs For Loop (version: 0)

Comparing performance of: Array.map vs Loop for

Created: 4 years ago by: Guest

Jump to the latest result

Array.map

Loop for

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 29 days ago):