Benchmark: map vs forEach/push (1000 elements pure)

Script Preparation code:

window.arr = new Array({ length: 1000 }, (_, i) => `Option ${i + 1}`);

Tests:

map
const newArr = window.arr.map(element => ({ label: element, value: element }));
forEach/push
const newArr = []; window.arr.forEach(element => { newArr.push({ label: element, value: element }) })
inplace for
for (let i=0; i < window.arr.length; i++) { window.arr[i] = {label: window.arr[i], value: window.arr[i]} }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
map
forEach/push
inplace for

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; rv:123.0) Gecko/20100101 Firefox/123.0

Browser/OS: Firefox 123 on Linux

View result in a separate tab

Test name	Executions per second
map	3747553.5 Ops/sec
forEach/push	3259020.8 Ops/sec
inplace for	493051.8 Ops/sec

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

LLMs can make mistakes. Check important info.

**Benchmark Explanation**

The provided JSON represents a JavaScript microbenchmark that compares the performance of three different approaches to iterate over an array and perform a transformation on each element:

1. `map()`
2. `forEach()` with `push()`
3. `inplace for` loop

**Options Comparison**

* **`map()`**: This approach uses the built-in `map()` method, which creates a new array with the results of applying the provided function to each element in the original array.
	+ Pros: concise and efficient, as it avoids explicit iteration.
	+ Cons: creates a new array, which can be memory-intensive for large datasets.
* **`forEach()` with `push()`**: This approach uses the `forEach()` method to iterate over the array and push transformed elements onto a new array using the `push()` method.
	+ Pros: flexible, as it allows for arbitrary transformations and side effects during iteration.
	+ Cons: slower than `map()`, as it involves explicit pushes and potentially unnecessary allocations.
* **`inplace for` loop**: This approach uses a traditional `for` loop to iterate over the array and assign transformed elements back to their original indices in the same array.
	+ Pros: often faster, as it avoids creating new arrays or performing excessive allocations.
	+ Cons: can be verbose and error-prone due to the need for indexing and assignment.

**Library Usage**

None of the benchmark test cases explicitly use any libraries. However, it's worth noting that `Array.prototype.map()` is a built-in method in JavaScript, while `Array.prototype.forEach()` is also a native method (albeit with some limitations compared to `map()`).

**Special JS Features/Syntax**

The benchmark test case uses the following feature:

* **Arrow functions**: The `map()` and `forEach()` methods use arrow functions (`(_, i) => ...`), which are a shorthand syntax for defining small, anonymous functions. This is a modern JavaScript feature introduced in ECMAScript 2015 (ES6).

**Alternative Approaches**

Other approaches to iterate over an array and perform transformations on each element might include:

* Using `Array.prototype.forEach()`, but without the `push()` method to create a new array.
* Using a `while` loop or recursion instead of `map()` or `forEach()`.
* Using libraries like Lodash or Ramda, which provide various utility functions for working with arrays.

Keep in mind that these alternative approaches might have different trade-offs and characteristics compared to the benchmarked methods.

Related benchmarks:

map vs forEach/push (1000 elements pure) (version: 0)

Comparing performance of: map vs forEach/push vs inplace for

Created: 2 years ago by: Guest

Jump to the latest result

map

forEach/push

inplace for

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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