Benchmark: Map (Immer vs Native)

HTML Preparation code:

<script src="https://cdn.jsdelivr.net/npm/immer/dist/immer.umd.js"></script>
<script src="https://unpkg.com/immer/dist/immer.umd.js"></script>

Script Preparation code:

function double(n) {
	return n*2;
}
var data = [1, 2, 3];

Tests:

Array.prototype.map
data.map(double);
Immer.produce
immer.produce(data, drf => { double(drf) })

Historical Performance Data aggregated from 8 community runs

Desktop Results:

Chrome 8 runs

Array.prototype.map

7.6M/s

Immer.produce

835K/s

Fastest: Array.prototype.map (9.1x faster)

View exact numbers

✓ Array.prototype.map: 7,627,210 ops/sec
• Immer.produce: 835,222 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
Array.prototype.map
Immer.produce

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/136.0.0.0 Safari/537.36

Browser/OS: Chrome 136 on Mac OS X 10.15.7

View result in a separate tab

Array.prototype.map

25.9M/s

Immer.produce

1.4M/s

View exact numbers

Test name	Executions per second
✓ Array.prototype.map	25,931,664 Ops/sec
Immer.produce	1,420,285 Ops/sec

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

LLMs can make mistakes. Check important info.

I'd be happy to help you understand the benchmark.

**What is being tested?**

The provided JSON represents a JavaScript microbenchmark that compares two approaches for mapping over an array: native `Array.prototype.map` and Immer's `immer.produce`.

**Options being compared:**

1. **Native `Array.prototype.map`:** This is a built-in method in JavaScript's Array prototype, which iterates over each element of the array and applies the provided function to each element.
2. **Immer's `immer.produce`:** Immer is a library that provides a more functional programming style for working with arrays and objects. Its `produce` function is used to create a new array by mapping over an existing array.

**Pros and Cons:**

* **Native `Array.prototype.map`:**
	+ Pros:
		- Built-in, so no additional libraries are needed.
		- Typically faster due to being native code.
	+ Cons:
		- May not be as intuitive or functional programming style compliant as Immer's approach.
* **Immer's `immer.produce`:**
	+ Pros:
		- Provides a more functional programming style, which can lead to better code organization and maintainability.
		- Can be faster than native `Array.prototype.map` in some cases due to optimized JavaScript compiler output.
	+ Cons:
		- Requires an additional library (Immer) to be included.

**Other considerations:**

* **Use case:** This benchmark is likely intended for developers who need to optimize array mapping performance. If your use case doesn't require the highest possible performance, you might not need to worry about these differences.
* **Implementation details:** The specific implementation of `immer.produce` can vary depending on the version of Immer used. However, in general, it works by creating a new array with the mapped values.

**Library and syntax:**

The benchmark uses Immer's library, which is included via two different scripts (`https://cdn.jsdelivr.net/npm/immer/dist/immer.umd.js` and `https://unpkg.com/immer/dist/immer.umd.js`). These scripts are loaded in the HTML preparation code before running the benchmark.

**Special JS feature or syntax:**

There isn't any special JavaScript feature or syntax used in this benchmark, aside from the use of Immer's library. However, the use of `immer.produce` does illustrate a functional programming style that might be unfamiliar to some developers.

**Alternatives:**

Other alternatives for array mapping include:

* Using a custom function to iterate over the array and apply the transformation.
* Utilizing other libraries like Lodash or Ramda, which provide more extensive functional programming utilities.
* Leveraging newer JavaScript features like `Array.prototype.forEach` with a callback function or the `map()` method with an arrow function.

Keep in mind that the choice of library or implementation approach depends on your specific use case, personal preference, and performance requirements.

Map (Immer vs Native) (version: 0)

Comparing performance of: `Array.prototype.map vs Immer.produce`

Created: 6 years ago by: Guest

Go to the latest result

Array.prototype.map

Immer.produce

Historical Performance Data aggregated from 8 community runs

Desktop Results:

Chrome 8 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Map (Immer vs Native) (version: 0)

Comparing performance of: Array.prototype.map vs Immer.produce

Created: 6 years ago by: Guest

Go to the latest result

Array.prototype.map

Immer.produce

Historical Performance Data aggregated from 8 community runs

Desktop Results:

Chrome 8 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Comparing performance of: `Array.prototype.map vs Immer.produce`