Benchmark: Array concat vs spread operator vs push for single values

Script Preparation code:

var value = 7;
var arr = [1, 2];

Tests:

Array.prototype.concat
const other = arr.concat(value);
spread operator
const other = [ ...arr, value ];
Push
const other = [ 1, 2 ].push(value);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.prototype.concat
spread operator
Push

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 3 months ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/138.0.0.0 Safari/537.36

Browser/OS: Chrome 138 on Windows

View result in a separate tab

Test name	Executions per second
Array.prototype.concat	9101756.0 Ops/sec
spread operator	46969416.0 Ops/sec
Push	61320372.0 Ops/sec

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

LLMs can make mistakes. Check important info.

**Benchmark Explanation**

The provided JSON represents a JavaScript microbenchmark that compares the performance of three methods for adding a single value to an array: `Array.prototype.concat()`, the spread operator (`[ ... ]`), and the `push()` method.

**Options Compared**

1. **Array.prototype.concat()**: This is a traditional method for concatenating arrays in JavaScript. It creates a new array by copying all elements from the original array and then appends the new value to the end of the new array.
2. **Spread Operator (`[ ... ]`)**: This is a new feature introduced in ES6 that allows you to spread elements of an iterable (such as an array) into a new array. In this benchmark, it's used to add a single value to an existing array by spreading the existing array and then appending the new value.
3. **Push() method**: This method adds one or more elements to the end of an array without creating a new array.

**Pros and Cons**

* **Array.prototype.concat()**:
	+ Pros: Simple and widely supported, but can be slow for large arrays due to the overhead of creating a new array.
	+ Cons: Creates a new array, which can lead to performance issues if dealing with very large arrays.
* **Spread Operator (`[ ... ]`)**:
	+ Pros: Fast and memory-efficient, as it only creates a new array reference without actually copying the elements.
	+ Cons: Requires support for ES6 features, and some older browsers or environments might not execute it correctly.
* **Push() method**:
	+ Pros: Fast and efficient, as it only modifies the existing array by adding a new element to the end.
	+ Cons: May be slower than the spread operator if dealing with very large arrays due to potential cache misses.

**Library and Special JS Feature**

In this benchmark, there is no library or special JavaScript feature being used beyond the standard ECMAScript features. The tests only rely on the built-in `Array` prototype methods.

No special JavaScript features like `async/await`, `let`, `const`, etc., are mentioned in the provided code snippets.

**Other Alternatives**

If you're looking for alternative approaches, consider the following:

* Using a library like Lodash, which provides a `concat` function that can be faster and more efficient than the built-in method.
* Implementing a custom concatenation function using a loop or recursion to avoid creating new arrays.
* Utilizing a specialized array library like ArrayStream or Ramda for array operations.

Keep in mind that these alternatives might come with additional overhead, dependencies, or trade-offs, so it's essential to evaluate their suitability based on your specific use case and performance requirements.

Related benchmarks:

Array concat vs spread operator vs push for single values (version: 0)

Compare the new ES6 spread operator with the traditional concat() method and push for single values

Comparing performance of: Array.prototype.concat vs spread operator vs Push

Created: 4 years ago by: Registered User

Jump to the latest result

Array.prototype.concat

spread operator

Push

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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