Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
Feature Requests
FAQ
Register
Log In
Array.prototype.map.call() vs [...array].map()
(version: 0)
Benchmark.js
Compare the new ES6 spread operator with the traditional slice() method
Comparing performance of:
Array.prototype.map.call() vs [...array].map()
Created:
7 years ago
by:
Guest
Go to the latest result
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>
Run tests (2)
Previous results
Fork
Test case name
Result
Array.prototype.map.call()
[...array].map()
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; rv:134.0) Gecko/20100101 Firefox/134.0
Browser/OS:
Firefox 134 on Windows
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=582999" width="100%" height="500px"></iframe>
Array.prototype.map.call()
22.3M/s
[...array].map()
11.8M/s
View exact numbers
Test name
Executions per second
✓
Array.prototype.map.call()
22,294,142 Ops/sec
[...array].map()
11,816,997 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
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.slice vs spread operator.
Array.prototype.slice vs spread operator on a bigger array
Array.prototype.slice vs spread operator - large array 100000
Array.prototype.slice vs spread operator performance
Comments
Confirm delete:
Do you really want to delete benchmark?