Benchmark: map vs new - MeasureThat.net

Tests:

map
const a = [{b: 1},{b: 1},{b: 1},{b: 1},{b: 1},{b: 1},{b: 1},{b: 1},{b: 1},{b: 1}]; const b = a.map(e => e.b);
for each plus push
const a = [{b: 1},{b: 1},{b: 1},{b: 1},{b: 1},{b: 1},{b: 1},{b: 1},{b: 1},{b: 1}]; const b = []; a.forEach(e => b.push(e.b));

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
map
for each plus 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.

I'd be happy to explain the benchmark and its results.

**Benchmark Overview**

The benchmark measures the performance of two approaches for creating an array from an existing array with a single property: `map` vs `forEach + push`.

**Test Cases**

There are two test cases:

1. **"map"`**: This test case uses the `map()` method to create a new array with the same number of elements as the original array, but only accessing the value of the `b` property.
2. **"for each plus push"`**: This test case uses the `forEach()` method to iterate over the original array and push the `b` property into a new empty array.

**Library**

There is no external library used in these test cases.

**Special JS Feature/Syntax**

None mentioned, but it's worth noting that both methods use modern JavaScript features: arrow functions (`e => e.b`) are not necessary for older browsers, but they are widely supported.

**Approaches Compared**

The two approaches compared are:

1. **`map()`**: This method creates a new array by iterating over the elements of the original array and applying the provided callback function to each element.
2. **`forEach + push()`**: This approach uses the `forEach()` method to iterate over the original array, but instead of returning anything, it pushes the value of the `b` property into a new empty array.

**Pros and Cons**

Here's a brief summary:

* **`map()`**:
	+ Pros: Creates a new array with the desired shape, is often more concise, and can be easily chained with other methods.
	+ Cons: Can create a new object if the original array has non-primitive values, which might incur additional memory allocation.
* **`forEach + push()`**:
	+ Pros: Allows for manual control over the output array, can be more flexible, and avoids creating a new array altogether.
	+ Cons: Requires an empty array to be created beforehand, can lead to performance issues if not done correctly, and is generally less concise.

**Other Alternatives**

There are other approaches that could have been used:

1. **`reduce()`**: This method creates a new array by reducing the original array into a single value. However, it's often more complex to use than `map()`.
2. **`Array.from()`**: This method creates a new array from an iterable or an array-like object. It can be more flexible than `map()`, but is not as widely supported.

**Benchmark Results**

The latest benchmark results show that the `map()` approach outperforms the `forEach + push()` approach, with 37.48% more executions per second in Chrome 114 on a desktop platform running Windows.

Keep in mind that these results are specific to this particular benchmark and may vary depending on other factors such as browser version, hardware, and input data.

Related benchmarks:

map vs new (version: 0)

Comparing performance of: map vs for each plus push

Created: 2 years ago by: Guest

Jump to the latest result

map

for each plus 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):