Benchmark: Array concat vs. spread vs. push

Tests:

concat
let a = [...Array(100)].map(() => Math.random()); let addCount = 10000; while (--addCount) { a = a.concat(Math.random()); }
spread
let a = [...Array(100)].map(() => Math.random()); let addCount = 10000; while (--addCount) { a = [...a, Math.random()]; }
push
let a = [...Array(100)].map(() => Math.random()); let addCount = 10000; while (--addCount) { a.push(Math.random()); }

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

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 its options.

**Benchmark Definition**

The test is designed to measure the performance of three different ways to add elements to an array in JavaScript: `concat`, `spread`, and `push`. The arrays being added to are created using the spread operator (`[...Array(100)].map(() => Math.random())`) to ensure that each test case has a large number of random elements.

**Options Compared**

The three options being compared are:

1. **`concat`**: Uses the `concat()` method to add new elements to the end of the array.
2. **`spread`**: Uses the spread operator (`...`) to create a new array by spreading the existing array, and then adds new elements to this new array using the spread operator again.
3. **`push`**: Uses the `push()` method to add one or more elements to the end of the array.

**Pros and Cons**

Here are some pros and cons of each approach:

* **`concat`**:
	+ Pros: Simple and efficient, especially for small arrays.
	+ Cons: Creates a new array when called, which can be memory-intensive for large arrays.
* **`spread`**:
	+ Pros: More efficient than `concat` for large arrays, as it modifies the existing array in place.
	+ Cons: Can be slower for very large arrays due to the creation of a temporary copy.
* **`push`**:
	+ Pros: Most memory-efficient option, especially for large arrays, since it only modifies the existing array.
	+ Cons: Can be slower than `concat` or `spread` when dealing with very large arrays.

**Library and Special JS Features**

None of these tests use any libraries. They also don't test special JavaScript features like async/await or promises.

**Other Considerations**

When running benchmarks, it's essential to consider the following factors:

* **Garbage collection**: Modern JavaScript engines are designed to minimize the impact of garbage collection on performance. However, for very large arrays, the allocation and deallocation of memory can still affect performance.
* **Array resizing**: When using `concat` or `push`, the engine needs to resize the array, which can be an expensive operation.

**Alternatives**

There are other ways to add elements to an array in JavaScript:

* **`slice()`**: Can be used to create a new array by slicing the existing array.
* **`set()`**: Can be used to add all elements from another array to the end of the current array.
* **`Array.prototype.set()`**: A more efficient alternative to `concat`, but still creates a new array.

However, these alternatives are not being tested in this benchmark.

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 11_2_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.146 Safari/537.36

Browser/OS: Chrome 88 on Mac OS X 11.2.0

View result in a separate tab

Test name	Executions per second
concat	9.1 Ops/sec
spread	4.2 Ops/sec
push	560.5 Ops/sec

Related benchmarks:

Array concat vs. spread vs. push (version: 0)

Comparing performance of: concat vs spread vs push

Created: 3 years ago by: Guest

Jump to the latest result

concat

spread

push

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