Benchmark: simple array and map vs forEach vs for by cuteLuna v2

Script Preparation code:

const arr = [{ name: 'luna', id: 3 },{ name: 'abc', id: 4 }, { name: 'eee', id: 3 }]

Tests:

map
const arr = [{ name: 'luna', id: 3 },{ name: 'abc', id: 4 }, { name: 'eee', id: 3 }] const newArr = arr.map(e=> ({ label: e.name, id: e.id}))
foreach
const arr = [{ name: 'luna', id: 3 },{ name: 'abc', id: 4 }, { name: 'eee', id: 3 }] const newArr = []; arr.forEach(item => { newArr.push({ label: item.name, id: item.id }) })
for
const arr = [{ name: 'luna', id: 3 }, { name: 'abc', id: 4 }, { name: 'eee', id: 3 }]; const arrLength = arr.length; const newArr = []; for (let i = 0; i < arrLength; i++) { newArr.push({ label: arr[i].name, id: arr[i].id }); }

Historical Performance Data aggregated from 10 community runs

Desktop Results:

Chrome 10 runs

map

40.3M/s

for

32.3M/s

foreach

31.4M/s

Fastest: map (1.3x faster)

View exact numbers

✓ map: 40,327,240 ops/sec
• for: 32,345,428 ops/sec
• foreach: 31,439,084 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
map
foreach
for

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Mobile Safari/537.36

Browser/OS: Chrome Mobile 120 on Android

View result in a separate tab

for

6.7M/s

foreach

6.0M/s

map

5.3M/s

View exact numbers

Test name	Executions per second
✓ for	6,691,300 Ops/sec
foreach	5,999,242 Ops/sec
map	5,266,814 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 benchmark test cases and explain what is being tested.

**Benchmark Test Cases**

The benchmark test cases are comparing three different approaches to process an array of objects:

1. **`map()`**: This method creates a new array with the results of applying a provided function on every element in this array.
2. **`forEach()`**: This method calls a provided callback function once for each element in an array, without returning any value.
3. **`for` loop**: This is a traditional loop that iterates over the elements of an array.

**Options being compared**

The three approaches are being compared to determine which one is faster and more efficient.

**Pros and Cons of each approach:**

1. **`map()`**:
	* Pros: concise, expressive, and easy to read.
	* Cons: creates a new array, which can lead to increased memory usage.
2. **`forEach()`**:
	* Pros: flexible, allows for more control over the iteration process.
	* Cons: does not create a new array, but rather modifies the original array (if the callback function is assigned).
3. **`for` loop**:
	* Pros: traditional, well-understood approach that can be optimized for performance.
	* Cons: more verbose and harder to read.

**Library usage**

None of the test cases use any external libraries.

**Special JS features or syntax**

The `map()` method uses a modern JavaScript feature called "arrow functions" (`=>`), which is a shorthand way to define small, anonymous functions. The `forEach()` method does not use any special features, and the `for` loop uses traditional variable declarations.

**Other alternatives**

There are other approaches that could be compared in this benchmark:

* **`reduce()`**: This method applies a function against an accumulator and each element in the array (from left to right) to reduce it to a single value.
* **`Array.prototype.filter()`**: This method creates a new array with all elements that pass the test implemented by the provided function.
* **Other iterative approaches**, such as using `Array.prototype.forEach()` with a loop or creating a custom iterator.

However, these alternatives are not currently being tested in this benchmark.

Overall, this benchmark provides a simple and concise way to compare the performance of different array processing methods in JavaScript.

simple array and map vs forEach vs for by cuteLuna v2 (version: 1)

Comparing performance of: `map vs foreach vs for`

Created: 2 years ago by: Registered User

Go to the latest result

map

foreach

for

Historical Performance Data aggregated from 10 community runs

Desktop Results:

Chrome 10 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

simple array and map vs forEach vs for by cuteLuna v2 (version: 1)

Comparing performance of: map vs foreach vs for

Created: 2 years ago by: Registered User

Go to the latest result

map

foreach

for

Historical Performance Data aggregated from 10 community runs

Desktop Results:

Chrome 10 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

Comparing performance of: `map vs foreach vs for`