Benchmark: Array.prototype.concat vs push with spread operator

Tests:

Array.prototype.concat
var params = [ "hello", true, 7 ]; var other = [ 1, 2 ]; var another = other.concat(params);
push with spread operator
var params = ["hello", true, 7]; var other = [1, 2]; var another = other.push(...params);
two spread operators
var params = ["hello", true, 7]; var other = [1, 2]; var another = [...other, ...params];

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.prototype.concat
push with spread operator
two spread operators

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 114 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Array.prototype.concat	6450684.0 Ops/sec
push with spread operator	31150930.0 Ops/sec
two spread operators	18947908.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and explain what's being tested, compared, and their pros/cons.

**Benchmark Overview**

The benchmark compares three approaches to add elements to an array:

1. `Array.prototype.concat()`
2. `push()` with spread operator (`...` syntax)
3. Two-way spread operator (`[...array, ...elements]`)

These approaches are being compared on a sample input: `[ "hello", true, 7 ]` and `[ 1, 2 ]`.

**Test Case Analysis**

Each test case represents a specific implementation of the above approaches:

1. `Array.prototype.concat()`: The traditional way to concatenate arrays using the `concat()` method.
2. `push()` with spread operator (`...` syntax): A modern approach that uses the spread operator to add elements to an array while preserving its length.
3. Two-way spread operator (`[...array, ...elements]`): A more concise and expressive way to create a new array by copying an existing one and adding new elements.

**Pros and Cons**

Here's a brief summary of each approach:

* `Array.prototype.concat()`: Pros:
	+ Well-established and widely supported
	+ Easy to understand for developers familiar with the method
Cons:
	+ Creates a new, concatenated array, which can lead to performance issues if not optimized correctly
	+ Does not preserve the original array's length
* `push()` with spread operator (`...` syntax): Pros:
	+ Preserves the original array's length and is more efficient than `concat()`
	+ Uses modern JavaScript features that are widely adopted
Cons:
	+ May be less intuitive for developers unfamiliar with the spread operator
	+ Can lead to performance issues if not used correctly (e.g., excessive allocations)
* Two-way spread operator (`[...array, ...elements]`): Pros:
	+ Most concise and expressive way to create a new array
	+ Preserves the original array's length and is more efficient than `concat()`
Cons:
	+ May be less familiar for developers who are not used to modern JavaScript syntax

**Library or Special JS Feature**

There are no external libraries used in this benchmark. However, the use of spread operators (`...`) is a feature introduced in ECMAScript 2015 (ES6).

**Other Considerations**

When choosing between these approaches, consider the trade-offs:

* Performance: If you need to concatenate large arrays frequently, `push()` with spread operator or two-way spread operator might be more efficient. However, if performance is not critical and readability is important, `concat()` remains a viable option.
* Code Readability: For code that needs to be easily understood by others, `concat()` might be a better choice. For concise, modern code, the spread operators are often preferred.

**Alternatives**

Other approaches for adding elements to an array include:

1. Using the `Array.prototype.slice()` method with `...` syntax.
2. Creating a new array using the `Array.from()` method and spreading elements into it.
3. Utilizing libraries like Lodash or Underscore.js, which provide additional utility functions for array manipulation.

Keep in mind that the choice of approach often depends on specific requirements, such as performance, code readability, or compatibility with older browsers.

Related benchmarks:

Array.prototype.concat vs push with spread operator (version: 0)

Compare the new ES6 spread operator with the traditional concat() method

Comparing performance of: Array.prototype.concat vs push with spread operator vs two spread operators

Created: one year ago by: Registered User

Jump to the latest result

Array.prototype.concat

push with spread operator

two spread operators

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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