Benchmark: Concat vs push(...) vs spread

Script Preparation code:

var test1 = (new Array(50)).fill(0).map((d, i) => Math.random().toString());
var test2 = (new Array(50)).fill(0).map((d, i) => Math.random().toString());

Tests:

Concat
var both = test1.concat(test2); both[0] = both[50];
Push spread
var both = [].push(...test1, ...test2); both[0] = both[50];
Spread 2
var both = [...test1, ...test2]; both[0] = both[50];
Push
var len1 = test1.length; var len2 = test2.length; var both = new Array(len1 + len2); for (var i = 0; i < len1; ++i) both[i] = test1[i]; for (var i = 0; i < len2; ++i) both[i + len1] = test2[i]; both[0] = both[50];

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Concat
Push spread
Spread 2
Push

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 2 years ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/123.0.0.0 Safari/537.36

Browser/OS: Chrome 123 on Windows

View result in a separate tab

Test name	Executions per second
Concat	4360948.5 Ops/sec
Push spread	869511.6 Ops/sec
Spread 2	2877261.5 Ops/sec
Push	186723.6 Ops/sec

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

LLMs can make mistakes. Check important info.

**Benchmark Explanation**

The provided JSON represents a JavaScript microbenchmarking test case on MeasureThat.net, which compares the performance of three different approaches to append elements to an array: concatenation (`concat`), spreading (`push(...)`), and pushing individual elements.

**Options Compared**

1. **Concatenation (`concat`)**: This approach creates a new array by concatenating two existing arrays using the `concat()` method.
2. **Spreading (`push(...)`)**: This approach uses the spread operator (`...`) to add multiple elements to an array in a single operation, followed by the `push()` method to append the resulting array to another array.
3. **Pushing individual elements**: This approach creates two separate arrays and then uses the `push()` method to append each element of one array to the other.

**Pros and Cons**

* **Concatenation (`concat`)**:
	+ Pros: Simple and easy to understand, works well for small arrays.
	+ Cons: Creates a new array, which can be inefficient for large datasets.
* **Spreading (`push(...)`)**:
	+ Pros: Efficient for large datasets, as it avoids creating multiple intermediate arrays.
	+ Cons: Requires modern JavaScript features (ES6+) and may not work in older browsers or environments.
* **Pushing individual elements**:
	+ Pros: Can be more memory-efficient than concatenation, especially for large datasets.
	+ Cons: More complex and harder to understand, as it requires creating multiple arrays.

**Library and Special JS Features**

The `concat()` method is a built-in JavaScript function that doesn't require any external libraries. The spread operator (`...`) is also a built-in feature introduced in ES6+. However, the `push(...)` approach may not work in older browsers or environments without support for modern JavaScript features.

**Considerations**

* For small arrays, concatenation (`concat`) might be sufficient and easy to understand.
* For large datasets, spreading (`push(...)`) is likely to be more efficient.
* Pushing individual elements can be a good option when memory efficiency is critical, but it requires more complex code and may not be as intuitive.

**Alternatives**

Other approaches to append elements to an array include:

1. Using `Array.prototype.set()`: This method allows you to set values in an array by index, which can be more efficient than concatenation or pushing individual elements.
2. Using a loop to create the new array: Instead of using concatenation or spreading, you can use a loop to create a new array by iterating over the elements of the original arrays and adding them to the new array one by one.
3. Using a library like Lodash: If you need to perform complex array operations, libraries like Lodash provide a range of utility functions that can help simplify your code.

Note that these alternatives may have their own trade-offs in terms of performance, memory usage, and complexity, so it's essential to evaluate each option based on your specific use case.

Related benchmarks:

Concat vs push(...) vs spread (version: 0)

Comparing the various ways to append to an array

Comparing performance of: Concat vs Push spread vs Spread 2 vs Push

Created: 2 years ago by: Guest

Jump to the latest result

Concat

Push spread

Spread 2

Push

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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