Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
Feature Requests
FAQ
Register
Log In
spread vs concat for adding new value to array
(version: 0)
Benchmark.js
Comparing performance of:
spread vs concat
Created:
2 years ago
by:
Guest
Go to the latest result
Tests:
spread
const array1 = Array.from({length: 5000}, (v, i) => i) const newArray = [...array1, 'newvalue']
concat
const array1 = Array.from({length: 5000}, (v, i) => i) const newArray = array1.concat(['newvalue'])
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (2)
Previous results
Fork
Test case name
Result
spread
concat
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
2 years ago
)
User agent:
Mozilla/5.0 (iPhone; CPU iPhone OS 16_1_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.1 Mobile/15E148 Safari/604.1
Browser/OS:
Mobile Safari 16 on iOS 16.1.1
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=504397" width="100%" height="500px"></iframe>
concat
10K/s
spread
9K/s
View exact numbers
Test name
Executions per second
✓
concat
10,373 Ops/sec
spread
9,245 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
I'll explain the benchmark in detail. **Benchmark Definition** The provided JSON represents a JavaScript microbenchmark test case. A benchmark is a performance measurement of an application or part of an application. In this case, the benchmark tests two different approaches for adding a new value to an array: using the spread operator (`...`) and concatenation (`.concat()`). **Options Compared** There are only two options being compared in this test: 1. **Spread Operator (`...`)**: This approach creates a new array by spreading the elements of `array1` into a new array, followed by adding the new value `'newvalue'`. 2. **Concatenation (`.concat()`)**: This approach creates a new array by concatenating `array1` with an array containing the new value `'newvalue'`. **Pros and Cons** * **Spread Operator (`...`)**: + Pros: - Creates a new array, which can be more efficient than modifying the original array. - Can be more readable for some developers. + Cons: - May incur additional memory allocation. - Not supported in older browsers or environments (e.g., Internet Explorer). * **Concatenation (`.concat()`)**: + Pros: - Modifies the original array, which can reduce memory allocation and garbage collection. - Widely supported across modern browsers and environments. + Cons: - Can be less readable for some developers due to the use of a method call. **Library** There is no external library used in this benchmark. The JavaScript code uses only built-in functions like `Array.from()` and the spread operator (`...`). **Special JS Feature or Syntax** The test case does not use any special JavaScript features or syntax, such as async/await, destructuring, or object literals. **Other Considerations** When choosing between these two approaches, consider the trade-offs in terms of memory allocation, performance, and readability. If you need to modify an array frequently, concatenation might be a better choice. However, if you prefer to create a new array or have concerns about modifying the original array, the spread operator (`...`) could be a better option. **Other Alternatives** If you're interested in exploring alternative approaches for adding elements to an array, consider: 1. Using `push()`: This method modifies the original array and is generally faster than concatenation. 2. Using `unshift()`: This method adds an element to the beginning of the array and can be more efficient than using `concat()` or the spread operator (`...`). 3. Using a library like Lodash, which provides various array manipulation methods. Keep in mind that the best approach depends on your specific use case, performance requirements, and personal preference as a developer.
Related benchmarks
Array push vs spread vs concat
Comments
Confirm delete:
Do you really want to delete benchmark?