Benchmark: spread vs push vs concat for large arrays

Script Preparation code:

var size = 50000;
var iterations = 1;

var arr1 = [];
var arr2 = [];

for (var i = 0; i < size; i++) {
  arr1.push({foo: i, bar: i});
  arr2.push({foo: i, bar: i});
}

Tests:

spread
var res = []; for (var i = 0; i < iterations; i++) { res = [...res, ...arr1]; res = [...res, ...arr2]; }
spread (combined)
var res = []; for (var i = 0; i < iterations; i++) { res = [...res, ...arr1, ...arr2]; }
push
var res = []; for (var i = 0; i < iterations; i++) { res.push(...arr1); res.push(...arr2); }
push (combined)
var res = []; for (var i = 0; i < iterations; i++) { res.push(...arr1, ...arr2); }
concat
var res = []; for (var i = 0; i < iterations; i++) { res = res.concat(arr1).concat(arr2); }
concat (nested)
var res = []; for (var i = 0; i < iterations; i++) { res = res.concat(arr1.concat(arr2)); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
spread
spread (combined)
push
push (combined)
concat
concat (nested)

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.114 Safari/537.36

Browser/OS: Chrome 91 on Linux

View result in a separate tab

Test name	Executions per second
spread	746.9 Ops/sec
spread (combined)	849.8 Ops/sec
push	399.3 Ops/sec
push (combined)	295.4 Ops/sec
concat	2489.0 Ops/sec
concat (nested)	1655.5 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the benchmark and explain what's being tested.

**Benchmark Overview**

The benchmark measures the performance of three different approaches to concatenate (join) large arrays:

1. Using `concat()`
2. Using `push()` with spreading
3. Using `spread` operator (introduced in ES6)

Each approach is compared across multiple test cases, which will be explained later.

**Approaches Compared**

Here's a brief explanation of each approach:

* **Concatenation using `concat()`**: This method creates a new array by concatenating two arrays using the `concat()` method. The resulting array contains all elements from both input arrays.
* **Using `push()` with spreading**: This approach uses the spread operator (`...`) to add multiple values to an existing array, effectively creating a new array with all elements.
* **Using `spread` operator**: This method uses the spread operator (`...`) to create a new array by taking multiple arrays as input and concatenating them.

**Pros and Cons of Each Approach**

Here are some pros and cons of each approach:

* **Concatenation using `concat()`**:
	+ Pros: Simple, well-established syntax.
	+ Cons: Creates a new array, which can lead to performance issues with large datasets.
* **Using `push()` with spreading**: 
	+ Pros: Allows for efficient addition of elements to an existing array without creating a new one.
	+ Cons: Requires multiple `push()` calls, which can be less readable than other approaches.
* **Using `spread` operator**:
	+ Pros: Simple syntax, effective concatenation of arrays.
	+ Cons: Not as widely supported in older browsers or versions of JavaScript.

**Library Used**

The benchmark uses the `concat()` method from the built-in Array prototype. No external libraries are required.

**Special JS Features/Syntax**

The benchmark takes advantage of some newer JavaScript features:

* **Spread operator (`...`)**: Introduced in ES6, this operator allows for concise creation and manipulation of arrays.
* **Rest parameters (`...`)**: Used to define a rest parameter, which captures any remaining arguments (e.g., `push(...arr1)`).

**Other Alternatives**

If you need alternative approaches or variations on the benchmark, consider exploring other methods:

* Using `Array.prototype.reduce()` for concatenation
* Employing `Array.prototype.push()` with multiple arguments
* Investigating newer array methods like `Array.prototype.addAll()`

Keep in mind that each approach has its trade-offs and might not be suitable for all use cases. The benchmark provides a solid foundation for comparing performance, but it's essential to consider your specific requirements and implementation details when selecting an approach.

Related benchmarks:

spread vs push vs concat for large arrays (version: 0)

Comparing performance of: spread vs spread (combined) vs push vs push (combined) vs concat vs concat (nested)

Created: 3 years ago by: Guest

Jump to the latest result

spread

spread (combined)

push

push (combined)

concat

concat (nested)

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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