Benchmark: concat vs spread operator vs push (object reference)

Script Preparation code:

class X { uuid = "0123456789ABCDEF" }

var array1 = []
for (let i = 0; i < 100; i++) {
  array1.push(new X())
}

var array2 = []
for (let i = 0; i < 100; i++) {
  array2.push(new X())
}

Tests:

concat
array1 = array1.concat(array2)
Spread operator
array1 = [...array1, ...array2]
push
array1.push(...array2)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
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.1:latest, generated one year ago):

LLMs can make mistakes. Check important info.

Let's break down what's being tested on MeasureThat.net.

**Benchmark Name and Description**

The benchmark is called "concat vs spread operator vs push (object reference)" with the description "concat vs spread operator vs push (object reference) with array of 100 elements." This tells us that we're comparing three different ways to concatenate two arrays: using the `concat()` method, the spread operator (`...`), and the `push()` method.

**Script Preparation Code**

The script preparation code is a JavaScript snippet that prepares an array `array1` and another array `array2`, both containing 100 elements. Each element is an instance of a class `X`, which has a property called `uuid`. The purpose of this code is to create two identical arrays, so we can compare the performance of different concatenation methods.

**Individual Test Cases**

We have three test cases:

1. **Concat**: `array1 = array1.concat(array2)`. This uses the built-in `concat()` method to concatenate the two arrays.
2. **Spread Operator**: `array1 = [...array1, ...array2]`. This uses the spread operator (`...`) to concatenate the two arrays.
3. **Push**: `array1.push(...array2)`. This uses a loop to add each element of `array2` to `array1`.

**Latest Benchmark Result**

The latest benchmark result shows that:

* The **Push** method is the fastest, with an execution speed of 104,717.3 operations per second.
* The **Concat** method is the slowest, with an execution speed of 278.2 operations per second.
* The **Spread Operator** method has a moderate execution speed of 102,317.4 operations per second.

**Library and Special JS Features**

There's no external library used in this benchmark. However, we're using the spread operator (`...`), which is a special feature introduced in JavaScript (ECMAScript) since version 2015 (ES6). The spread operator allows us to expand an array or object into individual elements.

**Pros and Cons of Different Approaches**

* **Concat**: This method creates a new array with all elements from both input arrays. It's simple to use but can be slow for large arrays, as it requires creating a new array with all the elements.
	+ Pros: Simple to understand and implement.
	+ Cons: Can be slow for large arrays.
* **Spread Operator**: This method creates a new array by expanding an array or object into individual elements. It's also simple to use but can lead to performance issues when working with large arrays.
	+ Pros: Simple to understand and implement.
	+ Cons: Can be slow for large arrays.
* **Push**: This method adds each element of one array to another array using a loop. It's more efficient than `concat` and the spread operator, especially for large arrays.
	+ Pros: Efficient for large arrays.
	+ Cons: Requires a loop, which can make the code less readable.

**Alternatives**

If you need to concatenate two arrays efficiently, consider using the **Push** method or a library like Lodash, which provides an optimized `concat` function. If you're working with small arrays, the spread operator and `concat` method might be sufficient.

Keep in mind that these results are specific to the test environment (Firefox 75) and may vary on other browsers and platforms.

Related benchmarks:

concat vs spread operator vs push (object reference) (version: 0)

concat vs spread operator vs push (object reference) with array of 100 elements.

Comparing performance of: concat vs Spread operator vs push

Created: 6 years ago by: Guest

Jump to the latest result

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.1:latest, generated one year ago):