Benchmark: Array spread vs. push performance

Script Preparation code:

var arr = [1, 1, 1, 1, 1];

Tests:

Array.prototype.push
arr.push(1);
Array.prototype.concat
arr.concat(1);
Array spread
[...arr, 1];

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.prototype.push
Array.prototype.concat
Array spread

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one month ago)

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36

Browser/OS: Chrome 130 on Linux

View result in a separate tab

Test name	Executions per second
Array.prototype.push	10452134.0 Ops/sec
Array.prototype.concat	2.1 Ops/sec
Array spread	2.7 Ops/sec

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

LLMs can make mistakes. Check important info.

I'd be happy to help explain the benchmark.

**Benchmark Overview**

The provided JSON represents a JavaScript microbenchmark that compares the performance of three different ways to add an element to an array: using `push`, `concat`, and array spread (`[...]`).

**Test Cases**

There are three individual test cases:

1. **Array.prototype.push**: This test case measures the performance of adding a single element to the end of the array using the `push()` method.
2. **Array.prototype.concat**: This test case measures the performance of adding a single element to the end of the array using the `concat()` method.
3. **Array spread ([...arr, 1])**: This test case measures the performance of creating a new array by spreading the existing array and then concatenating an additional element.

**Comparison of Options**

Here's a brief overview of each option:

* **push()**: The `push()` method is a built-in JavaScript method that appends one or more elements to the end of an array. It returns the new length of the array.
	+ Pros: Efficient, widely supported, and easy to use.
	+ Cons: May involve copying internal array buffers, which can be expensive in some cases.
* **concat()**: The `concat()` method returns a new array that is the concatenation of the existing array and one or more elements. It does not modify the original array.
	+ Pros: Allows for flexible control over array creation and modification.
	+ Cons: Creates a new array, which can be expensive in terms of memory allocation.
* **Array spread ([...arr, 1])**: This syntax is a shorthand way to create a new array by spreading an existing array and then concatenating an additional element. It's equivalent to writing `new Array(arr.length).fill(0).splice(0, arr.length, ...arr, 1)`.
	+ Pros: Creates a new array with minimal overhead, which can be faster than `push()` or `concat()`.
	+ Cons: Less intuitive and less widely supported than the other two options.

**Library**

There is no explicit library mentioned in the benchmark. However, it's worth noting that some JavaScript engines may use additional libraries or optimizations that affect performance.

**Special JS Feature/Syntax**

The benchmark uses array spread syntax (`[...arr, 1]`), which is a modern JavaScript feature introduced in ECMAScript 2015 (ES6). This syntax is supported by most modern browsers and engines, but it may not work in older versions of JavaScript.

**Other Considerations**

When choosing between these options, consider the following factors:

* Performance: If you need to perform frequent array modifications, `push()` might be a good choice. However, if you're working with large arrays or need more control over array creation and modification, `concat()` or array spread might be better.
* Memory allocation: If memory is a concern, array spread might be the most efficient option due to its minimal overhead.
* Intuition and familiarity: Familiarity with the different methods can affect performance. Developers who are comfortable using `push()` will likely be faster than those who need to learn it.

**Alternatives**

If you're looking for alternative approaches, consider:

* Using `Array.prototype.fill()` instead of array spread: This method fills a portion of an array with a specified value and is often faster than array spread.
* Using `Array.prototype.set()` (if supported): Some browsers support this method, which can be more efficient than array push or concat.
* Optimizing array operations using caching or bulk modifications: Depending on your specific use case, you might be able to optimize performance by batching multiple array operations together.

Keep in mind that each browser and engine may have different performance characteristics for these methods. The benchmark provided is just one example of how you can test the performance of these options.

Related benchmarks:

Array spread vs. push performance (version: 0)

Comparing performance of: Array.prototype.push vs Array.prototype.concat vs Array spread

Created: 6 years ago by: Guest

Jump to the latest result

Array.prototype.push

Array.prototype.concat

Array spread

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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