Benchmark: concat vs spread vs push three arrays to new one FIX

Script Preparation code:

var a = [1, 2, 3, 4, 5, 'a', 'b', 'c'];
var b = [6, 7, 8, 9, 10, 'd', 'e', 'f'];
var c = [11, 12, 13, 14, 'g', 'h', 'i'];

Tests:

concat
var res = [].concat(a, b, c);
spread
var res = [...a, ...b, ...c];
push
const res = []; res.push(...a); res.push(...b); res.push(...c);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
concat
spread
push

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 123 on Linux

View result in a separate tab

Test name	Executions per second
concat	2248988.2 Ops/sec
spread	3652131.5 Ops/sec
push	3230086.5 Ops/sec

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

LLMs can make mistakes. Check important info.

I'll break down the provided benchmark and its test cases, explaining what's being tested, the pros and cons of each approach, and other considerations.

**Benchmark Definition**

The benchmark is designed to compare three ways of creating a new array by combining multiple arrays:

1. Using the `concat` method.
2. Using the spread operator (`...`).
3. Using the `push` method with an array spread syntax.

**Test Case 1: concat**

```javascript
var res = [].concat(a, b, c);
```

The test creates a new array `res` by concatenating arrays `a`, `b`, and `c`. This approach is useful when you need to merge multiple arrays into one, but it can be inefficient for large datasets.

Pros:

* Easy to read and understand.
* Works well for small to medium-sized datasets.

Cons:

* Can be slow for large datasets due to the overhead of creating a new array and copying elements from the original arrays.

**Test Case 2: spread**

```javascript
var res = [...a, ...b, ...c];
```

The test creates a new array `res` by spreading arrays `a`, `b`, and `c`. This approach is more efficient than `concat` for large datasets because it uses a single operation to create the new array.

Pros:

* Fast for large datasets.
* Creates a new array without modifying the original arrays.

Cons:

* Can be less readable than `concat` for small datasets.

**Test Case 3: push**

```javascript
const res = [];
res.push(...a);
res.push(...b);
res.push(...c);
```

The test creates an empty array `res` and pushes elements from `a`, `b`, and `c` using the spread operator. This approach is similar to `concat`, but it modifies the original array `res`.

Pros:

* Fast for large datasets.
* Modifies the original array.

Cons:

* Can be less readable than `concat`.
* Modifies the original array, which might not be desirable in some cases.

**Library Used: None**

There are no libraries used in this benchmark.

**Special JS Feature/Syntax: Spread Operator (`...`)**

The spread operator is a modern JavaScript feature introduced in ECMAScript 2015. It allows you to create new arrays or objects by spreading elements from existing ones. In the `spread` test case, the spread operator is used to combine multiple arrays into one.

**Other Considerations**

* **Performance**: The `push` method with array spread syntax is likely to be the fastest option for large datasets due to its single operation and lack of overhead.
* **Memory Usage**: All three approaches allocate new memory for the resulting array, but the `concat` method might use more memory than the other two due to the creation of intermediate arrays.
* **Code Readability**: The choice between `concat`, spread, and `push` ultimately depends on personal preference and the specific requirements of your codebase.

**Alternatives**

If you're interested in alternative approaches or variations on these methods, consider:

* Using `Array.prototype.reduce()` instead of concatenating arrays (e.g., `[...a, ...b, ...c].reduce((acc, val) => acc.concat(val), [])`).
* Utilizing libraries like Lodash or Ramda for array manipulation functions.
* Exploring other array creation methods, such as using `Set` objects or the `Array.from()` method.

Related benchmarks:

concat vs spread vs push three arrays to new one FIX (version: 0)

Compare the spread, concat, push three arrays to new one

Comparing performance of: concat vs spread vs push

Created: 2 years ago by: Guest

Jump to the latest result

concat

spread

push

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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