Benchmark: JavaScript Array concat vs spread vs push

Tests:

Concat
const first = Array(1000).fill(null).map((_, i) => i); const second = Array(1000).fill(null).map((_, i) => i + 1000); const third = first.concat(second);
Spread
const first = Array(1000).fill(null).map((_, i) => i); const second = Array(1000).fill(null).map((_, i) => i + 1000); const third = [...first, ...second];
Push
const first = Array(1000).fill(null).map((_, i) => i); const second = Array(1000).fill(null).map((_, i) => i + 1000); const third = []; third.push(...first); third.push(...second);

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/119.0.0.0 Safari/537.36

Browser/OS: Chrome 119 on Linux

View result in a separate tab

Test name	Executions per second
Concat	67863.8 Ops/sec
Spread	70610.0 Ops/sec
Push	75367.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and explain what's being tested, the different approaches compared, and their pros and cons.

**What is being tested?**

The benchmark is measuring the performance of three different ways to concatenate (add elements to) an array in JavaScript:

1. Using the `concat()` method
2. Using the spread operator (`...`)
3. Using the `push()` method with multiple arguments

These methods are used to create a new array by combining two existing arrays.

**Options compared:**

Here's a brief overview of each option and their characteristics:

* **Concat()**: This method creates a new array and returns it, containing all elements from both input arrays. It's the most straightforward way to concatenate arrays.
	+ Pros: Easy to understand, widely supported, and suitable for small datasets.
	+ Cons: Creates a new array, which can be memory-intensive for large datasets.
* **Spread operator (`...`)**: This operator creates a new array by spreading all elements from both input arrays. It's a shorthand way of concatenating arrays.
	+ Pros: Memory-efficient (no need to create a new array), widely supported, and suitable for small to medium-sized datasets.
	+ Cons: Can be less readable than other methods, especially for complex scenarios.
* **Push() with multiple arguments**: This method modifies the existing array by adding one or more elements at the end. It's often used in conjunction with `push()` and can be combined with other methods (e.g., `concat()`).
	+ Pros: Memory-efficient (no need to create a new array), suitable for modifying arrays, and widely supported.
	+ Cons: Can be less readable than other methods, especially when using multiple `push()` calls.

**Library usage:**

There are no libraries explicitly mentioned in the benchmark definition or test cases. However, it's worth noting that some JavaScript engines (like V8) have built-in optimizations for certain operations, which might affect performance.

**Special JS features:**

The benchmark doesn't use any special JavaScript features, such as `let` or `const` declarations, arrow functions, or classes. It focuses on the basic array concatenation methods.

**Other alternatives:**

If you were to implement an alternative approach for array concatenation, some options could be:

* Using a loop to iterate over both arrays and add elements to a new array
* Utilizing a library like Lodash, which provides utility functions for array manipulation (e.g., `lodash.concat()`)
* Implementing a custom, optimized algorithm using bitwise operations or other low-level techniques

However, these alternatives might not be as efficient or memory-friendly as the tested methods.

**Benchmark result analysis:**

The benchmark results show that, on average, the **Push() with multiple arguments** approach performed the best (highest ExecutionPerSecond) among the three options. This is likely due to its memory efficiency and ability to modify the existing array in place. However, it's essential to note that these results might not be representative of all use cases or environments.

Overall, this benchmark provides a good starting point for comparing the performance of different array concatenation methods in JavaScript, which can help developers make informed decisions about their coding choices.

Related benchmarks:

JavaScript 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>

Fastest: N/A

Slowest: N/A

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