Benchmark: for loop vs. .map (collection)

Script Preparation code:

var random = (x) => Math.round(x * Math.random());
                   
var creatures = new Array(1_000_000).fill(null).map(_ => ({
	name: 'Floantyrexitor',
  	age: random(100)
}));

var transform = ({name, age}) => ({
	mena: name.toUpperCase(),
  	gea: random(age)
})

Tests:

.map
creatures.map(item => transform(item));
for loop
var rescreatu = []; for (let key = 0; key < creatures.length; key++) { rescreatu.push(transform(creatures[key])); }

Historical Performance Data aggregated from 5 community runs

Desktop Results:

Chrome 5 runs

.map

2/s

for loop

2/s

Fastest: .map (1.3x faster)

View exact numbers

✓ .map: 2 ops/sec
• for loop: 2 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
for loop

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/123.0.0.0 Mobile Safari/537.36

Browser/OS: Chrome Mobile 123 on Android

View result in a separate tab

.map

2/s

for loop

2/s

View exact numbers

Test name	Executions per second
✓ .map	2 Ops/sec
for loop	2 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 benchmark and explain what's being tested, compared, and some pros and cons of each approach.

**Benchmark Definition**

The benchmark is comparing two approaches to transform an array of objects: using the `Array.prototype.map()` method versus a traditional `for` loop with an array index.

Here's a high-level overview of what's happening:

1. The script preparation code generates a large array (`creatures`) with 1,000,000 elements, each containing `name` and `age` properties.
2. A transformation function (`transform`) is defined to take an object as input and return a new object with transformed `name` and `age` values.
3. The benchmark definition consists of two test cases:
	* `.map()`: This uses the `Array.prototype.map()` method to apply the `transform` function to each element in the `creatures` array.
	* `for loop`: This uses a traditional `for` loop with an array index to iterate through the `creatures` array and apply the `transform` function to each element.

**Options Compared**

The two options being compared are:

1. **Array.prototype.map()**: A built-in JavaScript method that applies a provided function to each element in an array and returns a new array with the transformed elements.
2. **Traditional for loop**: A basic control structure used to iterate through an array and perform operations on its elements.

**Pros and Cons**

Here's a brief summary of the pros and cons of each approach:

* **Array.prototype.map()**:
	+ Pros: Efficient, concise, and readable. It's designed specifically for this kind of operation.
	+ Cons: Can be slower than traditional loops in certain cases (more on this later).
* **Traditional for loop**:
	+ Pros: Flexible, easy to understand, and can be optimized for specific use cases.
	+ Cons: More verbose, and the code might not be as readable.

In general, `Array.prototype.map()` is a better choice when:

* You need to perform an operation on each element of an array.
* Readability and conciseness are important.

However, traditional loops can be faster in some cases, especially when dealing with large datasets or specific optimization requirements.

**Library and Special JS Features**

In this benchmark, no external libraries are used. However, the `transform` function is a simple arrow function (`=>`) that's not commonly used outside of modern JavaScript.

No special JavaScript features are used in this benchmark (e.g., async/await, ES6 classes, etc.).

**Other Alternatives**

If you wanted to explore alternative approaches, here are some options:

1. **Reducing**: Another built-in method for reducing an array by applying a function to each element.
2. **forEach**: A method that executes a function once for each element in an array.
3. **Array.prototype.forEach() with a callback function**: Similar to the traditional loop but uses `forEach()` internally.

Keep in mind that these alternatives might not be as efficient or readable as the `Array.prototype.map()` approach.

**Benchmark Results**

The latest benchmark results show the execution times for both approaches on a specific device and browser:

* `.map()`: 1.9350677728652954 executions per second
* `for loop`: 1.554605484008789 executions per second

These results suggest that, in this particular case, the `Array.prototype.map()` approach is slightly faster than the traditional `for` loop.

Keep in mind that benchmarking can be device and browser dependent, so these results might not hold true on other platforms or devices.

for loop vs. .map (collection) (version: 0) Benchmark.js

Comparing performance of: `.map vs for loop`

Created: 2 years ago by: Guest

Go to the latest result

.map

for loop

Historical Performance Data aggregated from 5 community runs

Desktop Results:

Chrome 5 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

for loop vs. .map (collection) (version: 0) Benchmark.js

Comparing performance of: .map vs for loop

Created: 2 years ago by: Guest

Go to the latest result

.map

for loop

Historical Performance Data aggregated from 5 community runs

Desktop Results:

Chrome 5 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 for loop`