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

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 (w cache)
for (let i=0; i < window.arr.length; i++) { const cache = window.arr[i] window.arr[i] = {label: cache, value: cache} }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
map
forEach/push
inplace for (w cache)

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:122.0) Gecko/20100101 Firefox/122.0

Browser/OS: Firefox 122 on Linux

View result in a separate tab

Test name	Executions per second
map	4499337.5 Ops/sec
forEach/push	4216147.5 Ops/sec
inplace for (w cache)	751768.8 Ops/sec

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

LLMs can make mistakes. Check important info.

**What is being tested?**

MeasureThat.net is testing the performance of three different approaches to iterate over an array and transform its elements:

1. **Map**: The `map()` method creates a new array with the results of applying a provided function on every element in this array.
2. **forEach/push**: This approach uses the `forEach()` method to iterate over the array, and for each element, it pushes a transformed version of that element into a new array.
3. **In-place for loop with caching**: This approach uses a traditional `for` loop to iterate over the array, and for each element, it updates the original array by assigning a new object with the same value.

**Options compared**

These three approaches are being compared to determine which one is the fastest in terms of performance. The performance metrics used here include the number of executions per second (ExecutionsPerSecond) on different devices and browsers.

**Pros and cons of each approach:**

1. **Map**:
	* Pros: Creates a new array, which can be more efficient when working with large datasets.
	* Cons: Requires extra memory allocation and copying of data.
2. **forEach/push**:
	* Pros: Can be more flexible and easier to implement than map, as it allows for the creation of an intermediate array.
	* Cons: Requires pushing elements into a new array, which can be slower and consume more memory.
3. **In-place for loop with caching**:
	* Pros: Does not create any additional arrays or objects, making it potentially faster and more memory-efficient.
	* Cons: Can be more complex to implement, especially when dealing with larger datasets.

**Library used**

None of the provided benchmark definitions use a specific library like Lodash or Ramda. However, the `map()` function is a built-in method in JavaScript that operates on arrays, so it's not considered as external library usage.

**Special JS feature or syntax**

There are no special features or syntaxes being tested here (e.g., ES6 classes, async/await, or generators).

**Other alternatives**

If you want to explore alternative approaches for transforming an array in JavaScript, here are a few options:

1. **Reduce**: A method that reduces the array to a single value by applying a function on each element.
2. **Filter**: A method that creates a new array with elements filtered based on a provided condition.
3. **Array.prototype.reduceRight** or **Array.prototype.filter()**: Similar methods to `reduce()` and `filter()`, but with opposite order of operations.

When choosing an approach, consider factors like performance, memory usage, readability, and maintainability, depending on the specific requirements of your project.

Related benchmarks:

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

Comparing performance of: map vs forEach/push vs inplace for (w cache)

Created: 2 years ago by: Guest

Jump to the latest result

map

forEach/push

inplace for (w cache)

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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