Benchmark: Array.prototype.map.call() vs [...array].map()

Tests:

Array.prototype.map.call()
var params = [ "hello", true, 7 ]; var other = Array.prototype.map.call(params, function(value) {return value});
[...array].map()
var params = [ "hello", true, 7 ] var other = [ ...params].map(function(value) {return value});

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.prototype.map.call()
[...array].map()

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 3 months ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:134.0) Gecko/20100101 Firefox/134.0

Browser/OS: Firefox 134 on Windows

View result in a separate tab

Test name	Executions per second
Array.prototype.map.call()	22294142.0 Ops/sec
[...array].map()	11816997.0 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated 6 months ago):

LLMs can make mistakes. Check important info.

Let's break down the benchmark definition and test cases.

**Benchmark Definition:**
The website is comparing two approaches for mapping over an array in JavaScript:

1. `Array.prototype.map.call()`
2. `[...array].map()` (using the new ES6 spread operator)

These two approaches are being compared to determine which one is faster.

**Options Compared:**

* **Traditional Method:** `Array.prototype.map.call(params, function(value) {return value})` - This method uses the `call()` method to invoke the `map()` function with an array as its first argument.
* **New ES6 Spread Operator Method:** `[...params].map(function(value) {return value})` - This method uses the spread operator (`[...]`) to create a new array from the original array, and then calls the `map()` function on this new array.

**Pros and Cons:**

* **Traditional Method (Array.prototype.map.call()):**
	+ Pros:
		- Widely supported across older browsers and versions of JavaScript.
		- Simple syntax for those familiar with traditional array methods.
	+ Cons:
		- May be slower due to the overhead of calling `call()` on an array.
* **New ES6 Spread Operator Method ([...array].map()):**
	+ Pros:
		- Faster execution speed, especially in modern browsers and versions of JavaScript.
		- Simplifies code for those familiar with functional programming concepts.
	+ Cons:
		- May not be supported in older browsers or versions of JavaScript.

**Library:**

There is no library being used in this benchmark. The two methods are comparing different approaches to mapping over an array, which is a built-in JavaScript feature.

**Special JS Feature/Syntax:**
The spread operator (`[...]`) was introduced in ECMAScript 2015 (ES6) and has become a widely supported feature across modern browsers and versions of JavaScript. However, older browsers and versions may not support this syntax.

**Other Alternatives:**

* Another approach for mapping over an array is using `forEach()` instead of `map()`. This method would iterate over the array and perform the desired operation on each element, but it would not return a new array.
* Additionally, some libraries like Lodash provide more advanced functional programming utilities, including higher-order functions that can be used to map over arrays.

Overall, this benchmark is designed to compare two approaches for mapping over an array in JavaScript, highlighting the trade-offs between traditional methods and newer, faster alternatives.

Related benchmarks:

Array.prototype.map.call() vs [...array].map() (version: 0)

Compare the new ES6 spread operator with the traditional slice() method

Comparing performance of: Array.prototype.map.call() vs [...array].map()

Created: 6 years ago by: Guest

Jump to the latest result

Array.prototype.map.call()

[...array].map()

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 6 months ago):