Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
Feature Requests
FAQ
Register
Log In
speed test: concat vs spread vs push
(version: 0)
Benchmark.js
Comparing performance of:
concat vs push vs spread
Created:
5 years ago
by:
Registered User
Go to the latest result
Tests:
concat
var array1 = ["dog", "cat", "red", "blue", "yellow", "one", "two" ]; var array2 = ["bird", "snake", "green", "brown", "black", "three", "four" ]; array1.concat(array2);
push
var array1 = ["dog", "cat", "red", "blue", "yellow", "one", "two" ]; var array2 = ["bird", "snake", "green", "brown", "black", "three", "four" ]; array2.map(el => array1.push(el));
spread
var array1 = ["dog", "cat", "red", "blue", "yellow", "one", "two" ]; var array2 = ["bird", "snake", "green", "brown", "black", "three", "four" ]; array1 = [...array1, ...array2];
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (3)
Previous results
Fork
Test case name
Result
concat
push
spread
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
2 years 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
Browser/OS:
Chrome 122 on Windows
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=513189" width="100%" height="500px"></iframe>
spread
34.9M/s
push
34.6M/s
concat
17.0M/s
View exact numbers
Test name
Executions per second
✓
spread
34,870,324 Ops/sec
push
34,585,948 Ops/sec
concat
17,000,994 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
**Overview of the Benchmark** The provided benchmark measures the performance differences between three approaches to concatenate arrays: `concat()`, `push()` with `map()`, and spread syntax (`...`). The benchmark aims to identify which approach is the fastest for concatenating two arrays. **Benchmark Definition** The benchmark definition in JSON format specifies: * Three test cases, each testing a different array concatenation method. * No script preparation code or HTML preparation code are required for this benchmark. **Test Cases** 1. **Concat**: This test case uses the traditional `concat()` method to concatenate two arrays, `array1` and `array2`. The script prepares these two arrays with some sample values. 2. **Push**: This test case uses the `push()` method in combination with `map()` to concatenate the same two arrays, `array1` and `array2`. 3. **Spread**: This test case utilizes the spread syntax (`...`) to concatenate the two arrays, `array1` and `array2`. **Options Compared** The three options being compared are: * `concat()`: The traditional method of concatenating arrays using the `concat()` function. * `push()` with `map()`: This approach uses the `push()` method in combination with `map()` to concatenate the arrays. However, this is not a direct concatenation method and involves additional operations. * Spread syntax (`...`): A newer approach that allows for more concise array manipulation. **Pros and Cons** Here's an overview of the pros and cons for each approach: * **concat()**: Pros: * Widely supported * Easy to understand and implement * Cons: * Can be slower due to its nature (creating a new array) * **Push** with `map()`: Pros: * More efficient than traditional concatenation methods in some cases * Cons: * Involves additional operations, which can affect performance * **Spread**: Pros: * Concise and expressive syntax * Can be more efficient than traditional concatenation methods * Cons: * May require better browser support **Library Used** None of the test cases explicitly use a library. However, they do rely on standard JavaScript features like `map()`. **Special JS Feature or Syntax** The spread syntax (`...`), used in the "spread" test case, is an example of a newer feature introduced in ECMAScript 2015 (ES6). **Alternative Approaches** Other alternatives for array concatenation include: * Using `Array.prototype.push.apply()` * Utilizing `Array.concat.apply()`
Related benchmarks
Large Array concat vs spread operator vs push
Array concat vs spread operator vs push with large arrays
Comments
Confirm delete:
Do you really want to delete benchmark?