Benchmark: Array concat vs spread operator vs push (1)

Script Preparation code:

var existing = [ 1, 2, "hello", true, 7 ];
var newi = 1;

Tests:

Array.prototype.concat
var other = existing.concat([newi]);
spread operator
var other = [ ...existing, newi ];
copy on push
var other = existing.concat().push(newi);
directly push
existing.push(newi);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.prototype.concat
spread operator
copy on push
directly 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):

LLMs can make mistakes. Check important info.

The provided JSON represents a JavaScript benchmark test case, specifically comparing the performance of three different approaches for concatenating an array: `Array.prototype.concat`, the spread operator (`...`), and pushing elements to an existing array.

Let's break down each option:

1. **Array.prototype.concat**: This is a traditional method of concatenating arrays in JavaScript. It creates a new array instance by copying all elements from both arrays and returns the resulting array.

Pros: Simple, straightforward approach that works well with large arrays.
Cons: Creates a new array instance, which can be memory-intensive for very large datasets.

2. **Spread operator (`...`)**: Introduced in ECMAScript 2015 (ES6), this operator allows you to expand an iterable (like an array) into individual elements.

Pros: More efficient than `concat()` since it doesn't create a new array instance; it uses native CPU instructions.
Cons: Requires modern JavaScript versions (ES6+) and may not work in older browsers or environments.

3. **Copy on push**: This approach creates a copy of the existing array, then pushes the new element to the copied array.

Pros: Similar to `concat()`, as it also creates a new array instance; however, it might be faster than `concat()` since it avoids the overhead of creating an entirely new array.
Cons: Creates an additional memory allocation for the copied array.

The benchmark test case includes four test cases:

* `Array.prototype.concat`: The traditional method of concatenating arrays.
* `spread operator`: The spread operator approach, which is more efficient than `concat()`.
* `copy on push`: A hybrid approach that creates a copy of the existing array before pushing the new element.
* `directly push`: This test case is not directly related to the original question but seems to be an error in the benchmark. It likely compares performance to other methods, such as `push()`.

The latest benchmark results show the performance of each approach on Safari 16 running on a Mac with Intel Mac OS X 10.15.7:

| Test Name | ExecutionsPerSecond |
| --- | --- |
| directly push | 14048991.0 (very high) |
| spread operator | 10813093.0 |
| Array.prototype.concat | 10465505.0 |
| copy on push | 6784341.0 |

The results suggest that:

* `directly push` is the fastest, likely due to its direct manipulation of the array's internal buffer.
* The spread operator approach is more efficient than `concat()`.
* `copy on push` is slower than `concat()` and the spread operator.

Keep in mind that these results may vary depending on other factors, such as system resources, browser version, and JavaScript engine optimizations.

Other alternatives to consider:

* **Array.prototype.slice() + concat()**: This approach creates a slice of the original array and then concatenates it with another array.
* **Array.prototype.pushAll()`: Some modern browsers (e.g., Chrome) support `pushAll()` method, which pushes multiple elements at once. However, this method may not be widely supported across all browsers and versions.

Please note that JavaScript performance optimizations can be complex and depend on various factors, including browser implementation, system resources, and specific use cases. These results should be considered in the context of a benchmark test case, rather than as absolute truths for every situation.

Related benchmarks:

Array concat vs spread operator vs push (1) (version: 1)

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

Created: 5 years ago by: Registered User

Jump to the latest result

Array.prototype.concat

spread operator

copy on push

directly push

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):