Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Array.prototype.concat vs spread operator vs push (no jQuery test)
(version: 0)
Compare the new ES6 spread operator with the traditional concat() method and push
Comparing performance of:
spread operator vs Push
Created:
6 years ago
by:
Guest
Go to the latest result
Tests:
spread operator
var params = [ "hello", true, 7 ] var other = [ 1, 2, ...params ]
Push
var params = [ "hello", true, 7 ]; params.push(1); params.push(2);
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (2)
Previous results
Fork
Test case name
Result
spread operator
Push
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; rv:136.0) Gecko/20100101 Firefox/136.0
Browser/OS:
Firefox 136 on Mac OS X 10.15
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=593538" width="100%" height="500px"></iframe>
Push
173.6M/s
spread operator
31.3M/s
View exact numbers
Test name
Executions per second
✓
Push
173,574,576 Ops/sec
spread operator
31,282,894 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's break down the provided benchmark and its test cases. **Benchmark Overview** The benchmark compares the performance of three different ways to create an array: using the spread operator (`...`), concatenation with `concat()`, and manual `push()` method. **Test Case 1: Spread Operator** In this test case, a sample array `params` is created with three elements: `"hello"`, `true`, and `7`. The test then creates another array `other` by using the spread operator to copy the elements of `params` into a new array. Specifically, the line `var other = [ 1, 2, ...params ]` uses the spread operator to create a shallow copy of `params`. The purpose of this test case is to measure the performance of the spread operator as an efficient way to create arrays. **Test Case 2: Push** In this test case, a similar sample array `params` is created. However, instead of using the spread operator, the test manually adds two elements to `params` using the `push()` method: `params.push(1)` and `params.push(2)`. The goal of this test case is to measure the performance of manual array creation using the `push()` method. **Library and Features** The benchmark uses no external libraries, as specified in the "Script Preparation Code" field. However, it does use some syntax features specific to JavaScript: * Spread operator (`...`): a feature introduced in ES6 (EcmaScript 2015) that allows creating arrays by spreading elements into an existing array. * Template literals (`\r\nvar ...`) are used for readability and to create multiline code blocks. **Pros, Cons, and Considerations** Here's a brief summary of the pros and cons of each approach: 1. **Spread Operator (`...`)**: * Pros: concise, efficient, and modern. * Cons: only works with arrays, may be slower for very large datasets due to overhead from creating an intermediate array. 2. **Concatenation with `concat()`**: * Pros: widely supported, can handle any type of data. * Cons: less concise, potentially slower than the spread operator. 3. **Manual `push()` method**: * Pros: flexible, allows for easy modification of the initial array. * Cons: more verbose, may be slower due to the overhead of multiple push operations. When choosing an approach, consider the trade-offs between conciseness, efficiency, and flexibility. The spread operator is a good choice when creating arrays with existing data, while manual `push()` method might be preferred for more complex use cases or when working with large datasets. **Other Alternatives** If you're looking for alternative approaches to create arrays, consider the following: * **Array.from()**: introduced in ES6 (EcmaScript 2015) as a faster and more efficient way to create arrays from iterables. * **Array.push.apply()**: uses the `apply()` method to pass the array elements as an argument to the `push()` method. * **String.prototype.split()**: can be used to split strings into arrays, although this may not be the most efficient approach for large datasets. Keep in mind that each alternative has its own trade-offs and use cases.
Related benchmarks
concat 2 arrays: Array.prototype.concat vs spread operator
Array.prototype.concat vs spread operator (fix)
Array.prototype.concat vs spread operator on large array
Array.prototype.concat vs spread operator on small array
Comments
Confirm delete:
Do you really want to delete benchmark?