Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
Feature Requests
FAQ
Register
Log In
js spread vs concat vs push
(version: 0)
Benchmark.js
Comparing performance of:
concat vs spread vs push
Created:
5 years ago
by:
Guest
Go to the latest result
Tests:
concat
var params = [ "hello", true, 7 ]; var other = [ 1, 2 ].concat(params);
spread
var params = [ "hello", true, 7 ]; var other = [ 1, 2, ...params ];
push
var params = [ "hello", true, 7 ]; var other = [ 1, 2 ].push(...params);
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (3)
Previous results
Fork
Test case name
Result
concat
spread
push
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
2 months ago
)
User agent:
Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:152.0) Gecko/20100101 Firefox/152.0
Browser/OS:
Firefox 152 on Windows
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=630064" width="100%" height="500px"></iframe>
push
30.5M/s
spread
26.6M/s
concat
23.8M/s
View exact numbers
Test name
Executions per second
✓
push
30,455,260 Ops/sec
spread
26,603,556 Ops/sec
concat
23,754,834 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's break down the provided benchmark and explain what is being tested, compared, and the pros and cons of each approach. **What is being tested:** The provided benchmark tests three ways to create an array in JavaScript: 1. `concat()`: The `concat()` method creates a new array by concatenating two or more arrays. 2. Spread operator (`...`): The spread operator creates a new array by spreading the elements of an existing array. 3. `push()`: The `push()` method adds one or more elements to the end of an array. **Options being compared:** The benchmark compares the performance of these three approaches on the same set of test cases, which are: * Creating an array with a variable number of elements using `concat()`, spread operator (`...`), and `push()`. * The arrays contain a mix of string values, boolean values, and numbers. **Pros and cons of each approach:** 1. **`concat()`**: * Pros: Simple to use, widely supported. * Cons: Creates a new array, which can be memory-intensive for large datasets. 2. **Spread operator (`...`)**: * Pros: More concise than `concat()`, creates a shallow copy of the original array, allowing for mutable objects. * Cons: Only supported in modern browsers and ECMAScript versions (ES6+), may not work as expected with complex data structures. 3. **`push()`**: * Pros: Fastest way to add elements to an array, modifies the existing array in-place. * Cons: Not suitable for creating a new array, requires multiple method calls. **Library and special JS features:** There are no libraries or special JavaScript features being tested in this benchmark. However, it's worth noting that modern browsers support the spread operator (`...`) since ECMAScript 2015 (ES6). **Other alternatives:** If you're looking for alternative ways to create arrays, consider: * Using `Array.prototype.slice()` to create a shallow copy of an array. * Utilizing libraries like Lodash or Array.prototype's other methods (e.g., `fill()`, `slice()`) if you need more advanced array manipulation capabilities. In summary, the benchmark provides a simple and informative way to compare the performance of three common ways to create arrays in JavaScript: `concat()`, spread operator (`...`), and `push()`. The results can help developers optimize their code for better performance on specific browsers or devices.
Comments
Confirm delete:
Do you really want to delete benchmark?