Benchmark: Array.prototype.concat vs spread operator vs push (no jQuery)

Tests:

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

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:

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.

**Overview of the Benchmark**

MeasureThat.net is a website that allows users to create and run JavaScript microbenchmarks, including this particular benchmark: "Array.prototype.concat vs spread operator vs push (no jQuery)". This benchmark compares the performance of three different approaches for concatenating arrays in JavaScript:

1. `Array.prototype.concat()`
2. The new ES6 spread operator (`...`)
3. The `push()` method

**Options Compared**

The benchmark tests the following options:

* `Array.prototype.concat()`: A traditional method for concatenating arrays, which creates a new array and returns it.
* The spread operator (`...`): A new syntax introduced in ES6 that allows spreading an array into another array.
* `push()` method: A method that adds one or more elements to the end of an array.

**Pros and Cons**

Here's a brief overview of each option:

* `Array.prototype.concat()`: Pros:
	+ Widely supported and well-documented
	+ Allows for easy iteration over the concatenated array
Cons:
	+ Creates a new array, which can be memory-intensive
	+ May not be the most efficient approach in terms of performance
* Spread operator (`...`): Pros:
	+ More concise and expressive syntax
	+ Avoids creating a new array, making it more efficient for large datasets
Cons:
	+ Requires modern JavaScript engines (ES6+) to support
	+ Can be less readable for those unfamiliar with the syntax
* `push()` method: Pros:
	+ Fast and efficient, as it modifies the original array in place
Cons:
	+ Requires iterating over the existing array elements to add new ones
	+ May not be suitable for large datasets due to performance considerations

**Library and Special Features**

None of the test cases use any libraries or special JavaScript features. However, note that the benchmark is designed for modern JavaScript engines (ES6+) that support the spread operator.

**Benchmark Preparation Code and Individual Test Cases**

The benchmark preparation code is empty (`"Script Preparation Code": null`), which means that the tests are only executed using the provided HTML template and no additional code needs to be executed before running each test. The individual test cases are:

1. `Array.prototype.concat()`: Tests concatenating an array with a smaller array using `concat()`.
2. Spread operator (`...`): Tests spreading an array into another array.
3. `push()` method: Tests appending elements to the end of an original array using `push()`.

**Benchmark Results**

The latest benchmark results show:

* `Push`: The fastest approach, with 31881646.0 executions per second.
* Spread operator (`...`): The middle performer, with 26128140.0 executions per second.
* `Array.prototype.concat()`: The slowest approach, with 5905581.5 executions per second.

**Alternatives**

Other alternatives for concatenating arrays in JavaScript include:

* Using the `Array.from()` method to create a new array from an iterable source.
* Utilizing libraries like Lodash or Underscore.js, which provide more comprehensive utility functions for working with arrays.
* Considering alternative data structures, such as linked lists or tree-based structures, depending on specific use cases and performance requirements.

Keep in mind that these alternatives may have trade-offs in terms of memory usage, iteration complexity, or compatibility with older JavaScript engines.

Related benchmarks:

Array.prototype.concat vs spread operator vs push (no jQuery) (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: 7 years ago by: Guest

Jump to the latest result

Array.prototype.concat

spread operator

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