Benchmark: Array concat vs_spread operator vs push_

Tests:

Array.prototype.concat
const arr1 = Array(1000).fill(0); const arr2 = Array(1000).fill(0); var other = arr1.concat(arr2);
spread operator
const arr1 = Array(1000).fill(0); const arr2 = Array(1000).fill(0); var other = [ ...arr1, ...arr2 ]
Push
const arr1 = Array(1000).fill(0); const arr2 = Array(1000).fill(0); var other = arr1.push(...arr2);

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 (Windows NT 10.0; Win64; x64; rv:83.0) Gecko/20100101 Firefox/83.0

Browser/OS: Firefox 83 on Windows

View result in a separate tab

Test name	Executions per second
Array.prototype.concat	24284.1 Ops/sec
spread operator	14594.4 Ops/sec
Push	12235.3 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks!

**What is being tested?**

MeasureThat.net is testing three different approaches to concatenate arrays in JavaScript:

1. `Array.prototype.concat()`: This is a traditional method for concatenating arrays, which creates a new array and copies the contents of both input arrays into it.
2. The **new ES6 spread operator (`...`)**: Introduced in ECMAScript 2015 (ES6), this operator allows you to concatenate arrays by spreading their elements into a new array.
3. `Array.prototype.push()`: This method adds one or more elements to the end of an array and returns the updated length of the array.

**Options compared**

The benchmark is comparing these three approaches in terms of performance, likely in terms of:

* Execution time
* Number of operations performed (e.g., number of push/pop operations)
* Memory usage

**Pros and cons of each approach:**

1. `Array.prototype.concat()`:
	* Pros: Simple, easy to understand, and widely supported.
	* Cons: Creates a new array object, which can lead to increased memory usage for large arrays.
2. The **new ES6 spread operator (`...`)**:
	* Pros: More concise and expressive than `concat()` or `push()`, with potentially better performance due to its native implementation in modern browsers.
	* Cons: Less intuitive for some developers, especially those familiar with older JavaScript versions.
3. `Array.prototype.push()`:
	* Pros: Can be more efficient than `concat()` when dealing with large arrays, as it modifies the existing array object rather than creating a new one.
	* Cons: May have performance overhead due to the push/pop operations required.

**Library used**

In this benchmark, no specific library is mentioned. The examples use built-in JavaScript methods and objects, such as `Array` and its prototype methods.

**Special JS feature or syntax**

The **new ES6 spread operator (`...`)**
is a relatively recent addition to the JavaScript standard library, introduced in ECMAScript 2015 (ES6). It allows you to:

* Create new arrays from existing ones using `array [...array2]`.
* Add elements to an array using `array.push(...array2)`.

**Other alternatives**

If these three approaches are not sufficient, other methods for concatenating arrays could be considered, such as:

* Using the `Array.prototype.map()` method to create a new array with the desired elements.
* Utilizing libraries like Lodash or Underscore.js, which provide more comprehensive utility functions for working with arrays.

Keep in mind that these alternatives might have their own trade-offs and performance characteristics.

Related benchmarks:

Array concat vs_spread operator vs push_ (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):