Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Array concat vs spread operator vs push performance
(version: 0)
Compare the new ES6 spread operator with the traditional concat() method and push
Comparing performance of:
Concat vs Spread operator vs Push
Created:
4 years ago
by:
Guest
Jump to the latest result
Tests:
Concat
var a = [ "hello", true, 7 ]; var b = [ 1, 2 ]; var c = a.concat(b);
Spread operator
var a = [ "hello", true, 7 ]; var b = [ 1, 2 ]; var c = [ ...a, ...b ]
Push
var a = [ "hello", true, 7 ]; var b = [ 1, 2 ]; var c = []; c.push(...a); c.push(...b);
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (3)
Previous results
Fork
Test case name
Result
Concat
Spread operator
Push
Fastest:
N/A
Slowest:
N/A
Latest run results:
No previous run results
This benchmark does not have any results yet. Be the first one
to run it!
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
**Benchmark Overview** The provided benchmark measures the performance of three different methods for concatenating arrays in JavaScript: `concat()`, the spread operator (`...`), and the `push()` method with multiple arguments. **Options Compared** 1. **Concat() Method**: The traditional way to concatenate two or more arrays in JavaScript. 2. **Spread Operator (`...`)**: A new ES6 feature that allows you to expand an array into individual elements. 3. **Push Method with Multiple Arguments**: Using the `push()` method to add multiple elements to an existing array. **Pros and Cons of Each Approach** 1. **Concat() Method**: * Pros: Simple, straightforward, and widely supported. * Cons: Creates a new array object, which can lead to performance issues if not used carefully (e.g., large arrays). 2. **Spread Operator (`...`)**: * Pros: More concise, efficient, and modern approach. * Cons: Requires support for ES6 syntax, may not be compatible with older browsers or versions of JavaScript. 3. **Push Method with Multiple Arguments**: * Pros: Fast, as it modifies the existing array without creating a new one. * Cons: Less readable than other approaches, especially when dealing with large arrays. **Library and Purpose** None are used in this benchmark. The test cases only rely on built-in JavaScript features. **Special JS Features or Syntax** The spread operator (`...`) is a special feature introduced in ES6 syntax. It allows you to expand an array into individual elements by placing the `...` symbol before it. **Other Alternatives** If you prefer not to use the spread operator, you could also consider using other approaches like: * Using `Array.prototype.reduce()` or `Array.prototype.pushAll()` * Creating a new array with `Array.from()` and passing an array of elements * Using libraries like Lodash (e.g., `_concat` method) However, these alternatives are not included in this benchmark. **Benchmarking Results** The latest benchmark results show that the **Push Method** performs the best, followed by the spread operator (`...`). The Concat() method is the slowest. Keep in mind that these results may vary depending on the specific use case, array size, and JavaScript environment.
Related benchmarks:
Array.prototype.concat vs spread operator
Array.prototype.concat vs Spread operator
concat 2 arrays: Array.prototype.concat vs spread operator
Array concat vs spread operator vs push with more data
Array.prototype.concat vs spread operator on large array
Comments
Confirm delete:
Do you really want to delete benchmark?