Benchmark: large array concat vs large array spread

Script Preparation code:

console.log('Testing array spread vs. array concatenation');

Tests:

Concatenation
const largeNumber = 1000; const largeArray = Array(largeNumber).fill('string'); const bigArray = Array(largeNumber).fill(99); let data; for (let i = 0; i < largeNumber; i++) { data = largeArray.concat(bigArray); }
Spread
const largeNumber = 1000; const largeArray = Array(largeNumber).fill('string'); const bigArray = Array(largeNumber).fill(99); for (let i = 0; i < largeNumber; i++) { data = [...largeArray, ...bigArray]; }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Concatenation
Spread

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 world of JavaScript microbenchmarks!

**What is being tested?**

The provided JSON benchmark measures the performance difference between two approaches to concatenate large arrays in JavaScript:

1. **Array concatenation**: Using the `concat()` method to combine two arrays.
2. **Array spread syntax**: Using the spread operator (`...`) to create a new array by spreading the elements of an existing array.

**Options compared**

The benchmark compares two options:

* Option 1: Concatenating large arrays using the `concat()` method.
* Option 2: Spreading large arrays using the spread operator (`...`).

**Pros and Cons of each approach:**

* **Array concatenation (Option 1)**:
	+ Pros:
		- Wide browser support, as it's a built-in method.
		- Can be used with any array type (not just primitive values).
	+ Cons:
		- Creates a new temporary array, which can lead to increased memory allocation and garbage collection overhead.
		- May incur additional overhead due to the need to iterate over the concatenated array.
* **Array spread syntax (Option 2)**:
	+ Pros:
		- More concise and expressive than `concat()`.
		- Can be faster for small arrays, as it avoids the creation of a temporary array.
	+ Cons:
		- Not supported in older browsers or versions of JavaScript (e.g., IE 11).
		- May not work with all array types.

**Library usage**

None of the benchmarked code uses any external libraries. The `Array()` constructor and the `concat()` method are built-in JavaScript functions.

**Special JS features or syntax**

The benchmark does not use any special JavaScript features or syntax, such as async/await, Promises, or Web Workers.

**Other alternatives**

If you're interested in exploring alternative approaches to array concatenation, consider the following:

* Using `Array.prototype.reduce()` to concatenate arrays.
* Implementing a custom iterative function to concatenate arrays (e.g., using a loop with a shared accumulator).
* Using a library like Lodash or Ramda for functional programming approaches.

Keep in mind that these alternatives may have varying performance characteristics and may not be supported by all browsers.

Related benchmarks:

large array concat vs large array spread (version: 0)

Comparing performance of: Concatenation vs Spread

Created: 4 years ago by: Guest

Jump to the latest result

Concatenation

Spread

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