Benchmark: map vs forEach/push (10 000 000 elements)

Script Preparation code:

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

Tests:

map
const newArr = window.arr.map(element => ({ label: element, value: element })); newArr.unshift({ label: 'User', value: 'User' });
forEach/push
const newArr = []; newArr.push({ label: 'User', value: 'User' }) window.arr.forEach(element => { newArr.push({ label: element, value: element }) })

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
map
forEach/push

Fastest: N/A

Slowest: N/A

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

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

LLMs can make mistakes. Check important info.

Let's dive into explaining the provided benchmark.

**What is being tested?**

The test measures the performance difference between two approaches: using the `map()` method and using a combination of `forEach()` and `push()` methods to achieve similar results. The benchmark creates an array with 10 million elements, where each element has a label and value. The goal is to transform this array by adding another object at the beginning (for the "User" case) or at the end (for the standard case).

**Options compared**

There are two approaches being tested:

1. **`map()` method**: This method creates a new array with the results of applying a provided function on every element in the original array.
2. **`forEach()` and `push()` methods**: In this approach, an empty array is first created, then `forEach()` is used to iterate over the elements of the original array, adding objects at each iteration using `push()`. This approach requires two separate operations: creating the new array and pushing elements.

**Pros and Cons**

- **`map()` method**
	+ Pros:
		- More concise and expressive code.
		- Efficient, as it avoids the need for an extra loop or array creation.
	+ Cons:
		- Requires creating a new array, which can be expensive if the original array is very large.
- **`forEach()` and `push()` methods**
	+ Pros:
		- Can work with any array, not just those that support `map()`.
		- Allows for easy addition of objects at multiple positions in the new array (not just the end).
	+ Cons:
		- More verbose code.
		- Requires two separate operations: creating the new array and pushing elements.

**Library usage**

None is mentioned, but it's worth noting that both methods rely on JavaScript's built-in array functions. However, if you were to implement these methods manually without using `map()` or array iteration methods like `forEach()`, you might use a different library or approach (e.g., utilizing `for` loops and indexing).

**Special JS feature/syntax**

None are explicitly used in this benchmark. However, it's worth noting that the `map()` method relies on JavaScript's higher-order function capabilities.

**Other alternatives**

If you wanted to implement these operations manually without using built-in methods like `map()` or `forEach()`, you could use:

1. **Manual iteration**: Implement a custom loop (e.g., using `for` loops and indexing) to iterate over the original array and create the new array.
2. **Lodash library**: This popular JavaScript utility library provides functions for array manipulation, including alternatives to `map()` and `forEach()`.

Related benchmarks:

map vs forEach/push (10 000 000 elements) (version: 0)

Comparing performance of: map vs forEach/push

Created: 3 years ago by: Guest

Jump to the latest result

map

forEach/push

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

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