Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Array concat vs spread operator vs push (many)
(version: 0)
Compare the new ES6 spread operator with the traditional concat() method and push
Comparing performance of:
Array.prototype.concat vs spread operator vs copy on push vs directly push vs flat
Created:
5 years ago
by:
Registered User
Jump to the latest result
HTML Preparation code:
<script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.min.js'></script>
Script Preparation code:
var existing = [ 1, 2, "hello", true, 7 ]; var newi = [1, 1, 1];
Tests:
Array.prototype.concat
var other = existing.concat(newi);
spread operator
var other = [ ...existing, ...newi ];
copy on push
var other = newi.forEach(i => existing.concat().push(i));
directly push
newi.forEach(i => existing.push(i));
flat
var other = _.flatten([ existing, newi ]);
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (5)
Previous results
Fork
Test case name
Result
Array.prototype.concat
spread operator
copy on push
directly push
flat
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):
Let's dive into the world of JavaScript microbenchmarks and explore what's being tested in this benchmark. **Benchmark Definition** The benchmark is designed to compare four different approaches for concatenating arrays or modifying existing arrays: 1. `Array.prototype.concat()`: Using the traditional `concat()` method. 2. Spread operator (`[...]`): Utilizing the new ES6 spread operator to create a new array. 3. "Copy on push" (assuming `push()` modifies an existing array by copying its elements and then pushing the new ones): This approach uses `forEach()` to iterate over the new array and append it to the existing one using `concat()`. 4. Directly pushing (`newi.forEach(i => existing.push(i))`): Modifying the original array directly by iterating over the new array and pushing each element into the existing array. **Pros and Cons of Each Approach** 1. **Array.prototype.concat()**: This approach is straightforward, but it creates a new array on every iteration, which can lead to performance issues with large datasets. 2. **Spread operator ([...] ```newi```). This approach creates a new array without modifying the existing one, making it more memory-efficient. 3. **Copy on push (copying elements using `concat()` and then pushing new ones)**: While this approach modifies an existing array, it still has the overhead of creating intermediate arrays, which might be less efficient than other methods. 4. **Directly pushing (`newi.forEach(i => existing.push(i))`)**: This approach directly modifies the original array by iterating over the new array and appending each element to the existing one. It's likely the most memory-efficient option. **Library Usage** The benchmark uses Lodash, a popular JavaScript utility library, in its `flat()` test case: ```javascript var other = _.flatten([existing, newi]); ``` `_flatten()` is used to flatten an array of arrays into a single array. This approach is useful when you need to perform operations on nested arrays, but it may not be the most efficient way to concatenate or modify arrays. **Special JS Features/Syntax** The benchmark does not use any special JavaScript features or syntax beyond what's standard in modern browsers (ECMAScript 2015+). **Alternative Approaches** Here are some alternative approaches that could be used for this benchmark: 1. **Using `Array.prototype.pushAll()`**: This method is available in ECMAScript 2022, which allows pushing multiple values into an array at once. ```javascript existing.push(...newi); ``` 2. **Using a custom implementation with `Set` or `Map`**: You could create a custom function that iterates over the new array and adds each element to a `Set` or `Map`, which would then be converted back to an array. This approach can be more efficient than using `push()` or `concat()`. 3. **Using a parallel processing library (e.g., Web Workers)**: If you have a multi-core processor, you could use Web Workers to run each test case in parallel, reducing overall execution time. Keep in mind that these alternative approaches might not be as straightforward or well-documented as the original methods used in the benchmark.
Related benchmarks:
Array.prototype.concat vs spread operator
Array.prototype.concat vs spread operator - Immutable version
Array.prototype.concat vs spread operator vs lodash.concat - variable and constant
Adam - Array concat vs spread operator vs push
Comments
Confirm delete:
Do you really want to delete benchmark?