Benchmark: Array concat vs spread operator vs push comparison

Tests:

Array.prototype.concat
let array = [{'optionA': 1}, {'optionB': 2}, {'optionC': 3}]; return array.concat([{'optionD': 4}, {'optionE': 5}]);
spread operator
let array = [{'optionA': 1}, {'optionB': 2}, {'optionC': 3}]; return [...array, {'optionD': 4}, {'optionE': 5}];
Push
let array = [{'optionA': 1}, {'optionB': 2}, {'optionC': 3}]; array.push([{'optionD': 4}, {'optionE': 5}]); return array;

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) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/85.0.4183.84 Safari/537.36

Browser/OS: Chrome 85 on Windows

View result in a separate tab

Test name	Executions per second
Array.prototype.concat	2027052.9 Ops/sec
spread operator	7062876.0 Ops/sec
Push	10358444.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks on MeasureThat.net.

**Benchmark Overview**

The benchmark measures the performance of three different approaches to concatenate arrays in JavaScript:

1. `Array.prototype.concat()`
2. The new ES6 spread operator (`...`)
3. `array.push()` (with a twist)

The goal is to compare these approaches and understand their pros and cons.

**Library: None**

There are no external libraries used in this benchmark. All tests are self-contained within the JavaScript code provided.

**Test Cases**

Each test case represents one of the three approaches being compared:

1. **`Array.prototype.concat()`**: This method concatenates two or more arrays and returns a new array.
2. **Spread Operator (`...`)**: The spread operator is a new way to create an array from an existing array or other iterable, by spreading its elements into a new array.
3. **`array.push()`**: Although `push()` is typically used for adding single elements, we're using it here with an array as the second argument to concatenate arrays.

**Pros and Cons**

Here's a brief summary of each approach:

* **`Array.prototype.concat()`**:
	+ Pros: Efficient and widely supported across browsers.
	+ Cons: Creates a new array object, which can lead to performance overhead for very large datasets.
* **Spread Operator (`...`)**:
	+ Pros: Creates a new array without the need for an intermediate `concat()` method call. Fast and memory-efficient.
	+ Cons: May not work correctly in older browsers or JavaScript engines that don't support it.
* **`array.push()`** (with an array as the second argument):
	+ Pros: Memory-efficient, as only a single operation is performed on the existing array.
	+ Cons: May require more CPU cycles than the other two methods due to the need for additional memory accesses.

**Other Considerations**

When choosing between these approaches, consider the following factors:

* Browser support: If you need to support older browsers, `Array.prototype.concat()` might be a safer choice.
* Memory constraints: For large datasets, spreading or pushing arrays might be more efficient.
* Performance-critical code: The spread operator is likely to be the fastest option.

**Alternatives**

Other approaches that could have been used in this benchmark include:

* Using `Array.prototype.unshift()`, which appends elements to the beginning of an array.
* Utilizing a library like Lodash, which provides a `concat` function with additional features and optimizations.
* Exploring alternative array manipulation techniques, such as using `Set` or `Map` data structures.

Keep in mind that this benchmark focuses on simple concatenation scenarios. In real-world applications, more complex use cases may require different approaches or optimization strategies.

Related benchmarks:

Array concat vs spread operator vs push comparison (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 6 months ago):