Benchmark: array.map with arrow function or without

Script Preparation code:

window.arr = [];
  for (let i = 0; i < 10000; ++i) {
    arr.push(String(i));
  }

Tests:

arr.map(n => Number(n))
arr.map(n => Number(n))
arr.map(Number)
arr.map(Number)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
arr.map(n => Number(n))
arr.map(Number)

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/122.0.0.0 Safari/537.36 Edg/122.0.0.0

Browser/OS: Chrome 122 on Windows

View result in a separate tab

Test name	Executions per second
arr.map(n => Number(n))	818.3 Ops/sec
arr.map(Number)	10554.4 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the benchmark and explain what's being tested.

**Benchmark Definition**

The benchmark is defined by two scripts:

1. `"window.arr = [];\r\n  for (let i = 0; i < 10000; ++i) {\r\n    arr.push(String(i));\r\n  }"`
This script creates an array `arr` and populates it with 10,000 elements, each being a string representation of a number. The purpose of this script is to create a large dataset for the benchmark.

2. `"var arr = []; for (let i = 0; i < 10000; ++i) {\r\n    arr.push(String(i));\r\n  }"`
This script is identical to the first one, but uses `var` instead of `window.arr`. This is an older way of declaring variables in JavaScript and is used for comparison.

**Individual Test Cases**

The benchmark consists of two test cases:

1. `"arr.map(Number)"`
This test case uses the `map()` method on the `arr` array, applying the `Number()` function to each element. The purpose of this test case is to measure the performance of using a function as an argument to `map()`, specifically with and without immediately invoked function expression (IIFE).

2. `"arr.map(n => Number(n))"`
This test case uses an arrow function (`=>`) instead of a traditional function declaration. It applies the same logic as the previous test case, but with an arrow function.

**Options being compared**

The two test cases are comparing the performance of:

1. Using a named function (e.g., `function() { return Number(n); }`) vs. using an IIFE (e.g., `n => Number(n)`).
2. Using `var` to declare variables vs. using `window.arr` (although this is not strictly related to the performance difference, as it's mainly a syntax difference).

**Pros and Cons**

1. **Named function**: Pros:
	* Easier to read and understand for some developers.
	* More explicit intent of the code.
Cons:
	* May be slower due to function overhead (e.g., function call, parameter parsing).
2. **IIFE**: Pros:
	* Can be faster due to reduced function overhead.
	* Can help avoid variable hoisting issues.
Cons:
	* Can be less readable and harder to understand for some developers.

3. **`var` vs. `window.arr`**:

The performance difference between these two is likely negligible, as it's mainly a syntax difference with no significant impact on execution speed.

**Library**

There are no libraries used in this benchmark.

**Special JS feature or syntax**

Arrow functions (`=>`) were introduced in ECMAScript 2015 and provide a concise way to define small, single-expression functions. They are not specific to any particular browser version.

**Other alternatives**

Some alternative approaches could include:

* Using `function()` instead of arrow functions.
* Using a different mapping function (e.g., `Array.prototype.forEach()`).
* Using a different data structure (e.g., `Set` or `Map`) for the dataset.

Keep in mind that these alternatives might affect the benchmark's results, so it's essential to consider the specific use case and requirements when choosing an approach.

Related benchmarks:

array.map with arrow function or without (version: 0)

Comparing performance of: arr.map(n => Number(n)) vs arr.map(Number)

Created: one year ago by: Guest

Jump to the latest result

arr.map(n => Number(n))

arr.map(Number)

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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