Benchmark: Array concat vs spread operator vs push with single element

Tests:

Array.prototype.concat
var arr = [1, 2, 3, 4, 5] var other = arr.concat(3);
spread operator
var arr = [1, 2, 3, 4, 5] var other = [ ...arr, 3 ]
Push
var arr = [1, 2, 3, 4, 5] var other = arr.push(3);

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: 4 years ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.138 Safari/537.36

Browser/OS: Chrome 81 on Mac OS X 10.15.4

View result in a separate tab

Test name	Executions per second
Array.prototype.concat	4437041.0 Ops/sec
spread operator	30229826.0 Ops/sec
Push	47660772.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the test cases and explain what's being tested.

**General Overview**

The benchmark is comparing three different ways to add an element to an array in JavaScript: `concat()` method, spread operator (`...`), and `push()` method.

**Options Compared**

1. **Concat() Method**: The traditional way of concatenating arrays using the `concat()` method.
2. **Spread Operator (New ES6 Feature)**: A new way of spreading elements into an array using the `...` operator.
3. **Push Method**: The built-in `push()` method to add a single element to the end of an array.

**Pros and Cons**

1. **Concat() Method**
	* Pros:
		+ Wide browser support (older browsers may not support it)
		+ Familiar syntax for many developers
	* Cons:
		+ Creates a new array, which can lead to performance issues with large arrays
2. **Spread Operator (New ES6 Feature)**
	* Pros:
		+ More efficient and faster than `concat()` method
		+ Less memory-intensive
		+ Modern syntax that's widely adopted in modern JavaScript development
	* Cons:
		+ Requires a compatible browser or transpiler to work
3. **Push Method**
	* Pros:
		+ Fastest and most memory-efficient way
		+ Built-in method, so no need for additional imports or libraries
	* Cons:
		+ Less familiar syntax for some developers

**Library and Special JS Features**

None of the test cases use any external libraries. However, it's worth noting that the spread operator is a new feature introduced in ECMAScript 2018 (ES9), so it requires a compatible browser or transpiler to work.

**Other Considerations**

When choosing between these methods, consider the following factors:

* Performance: If you're dealing with large arrays, the `push()` method might be the fastest option. For smaller arrays, the spread operator might be sufficient.
* Memory efficiency: The spread operator is generally more memory-efficient than `concat()`.
* Browser support: If you need to support older browsers, you might want to use the `concat()` method.

**Alternatives**

If you're looking for alternative ways to add an element to an array, consider using:

* `Array.prototype.splice()`: Replaces elements at a specified index with new elements and shifts other elements.
* `Array.prototype.unshift()`: Adds one or more elements to the beginning of an array.
* `Array.prototype.concat()` with `Array.from()`: Creates a new array from an existing iterable (e.g., another array).

Keep in mind that each method has its own trade-offs, so choose the one that best fits your specific use case.

Related benchmarks:

Array concat vs spread operator vs push with single element (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 Push

Created: 4 years ago by: Guest

Jump to the latest result

Array.prototype.concat

spread operator

Push

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):