Benchmark: Array concat vs spread operator vs push - with large arrays6

Script Preparation code:

// make an array with lots of items
var array1 = [0,1,2,3,4,5,6,7,8,9]; 
for (var i=0;i<13;i++) array1.push(...array1);
var array2 = [...array1];
console.log('array1.length = ' + array1.length)

Tests:

Array.prototype.concat
var result = array1.concat(array2); // the 'push' test needs to do more setup. Repeat it here so it's not unfairly hindered. var pushResult = []; pushResult.push(...array1);
spread operator
var result = [...array1, ...array2]; // the 'push' test needs to do more setup. Repeat it here so it's not unfairly hindered. var pushResult = []; pushResult.push(...array1);
Push
// setup for push var pushResult = []; pushResult.push(...array1); // push test: pushResult.push(...array2);

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.

Let's dive into the explanation of the provided benchmark.

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

1. `Array.prototype.concat()`
2. The spread operator (`...`)
3. Using the `push()` method

**Options Compared:**

* **`Array.prototype.concat()`**: This is a traditional method for concatenating arrays, which creates a new array and copies the elements from both input arrays into it.
* **The Spread Operator (`...`)**: Introduced in ES6, this operator allows you to expand an array (or other iterable) into individual elements. It's more concise than `concat()` but has similar performance characteristics.
* **Using the `push()` method**: This approach uses the `push()` method of an array to add new elements to it. Since arrays are dynamic and grow in size, this can lead to slower performance compared to the other two methods.

**Pros and Cons:**

* **`Array.prototype.concat()`**: Pros:
	+ Widely supported across browsers.
	+ Simple to use.
Cons:
	+ Creates a new array, which can be inefficient for large datasets.
	+ May have overhead due to array creation and copying elements.
* **The Spread Operator (`...`)**: Pros:
	+ More concise than `concat()`.
	+ Less overhead compared to `push()` since it doesn't require creating a new array.
Cons:
	+ Less widely supported across older browsers (prior to ES6).
	+ May have performance issues if the input iterable is very large.
* **Using the `push()` method**: Pros:
	+ Dynamic and flexible, as arrays can grow or shrink in size.
Cons:
	+ Slower than the other two methods due to array growth and copying elements.

**Library Used:**
In the provided benchmark, no external libraries are used. The test cases rely solely on built-in JavaScript features.

**Special JS Feature/Syntax:**
The spread operator (`...`) is a feature introduced in ES6, which allows you to expand an iterable into individual elements. This syntax was added to provide a more concise and expressive way to work with arrays and other iterables.

**Other Alternatives:**

* **`Array.prototype.slice()`**: Another traditional method for concatenating arrays, which returns a shallow copy of the array from the start index (0) up to but not including the end index.
* **`Array.prototype.reduce()`**: A method that reduces an array by applying a function against each element and returns a single output value.

Keep in mind that these alternatives might have different performance characteristics or use cases, so it's essential to consider the specific requirements of your project when choosing a concatenation approach.

Related benchmarks:

Array concat vs spread operator vs push - with large arrays6 (version: 2)

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: 5 years ago by: Registered User

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