Benchmark: Array.prototype.concat vs splice for joining many arrays

Tests:

immutable with concat
var a = [ "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello" ] var other = []; for(const x of Array(10000)) { other = other.concat(a) }
direct mutation with splice + spread
var a = [ "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello" ] var other = []; for(const x of Array(10000)) { other.splice(other.length, 0, ...a); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
immutable with concat
direct mutation with splice + spread

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.75 Safari/537.36

Browser/OS: Chrome 86 on Windows

View result in a separate tab

Test name	Executions per second
immutable with concat	0.4 Ops/sec
direct mutation with splice + spread	301.0 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 its options.

**Overview**

The benchmark compares two approaches to join many arrays in JavaScript: using `Array.prototype.concat()` (immutable) and using `Array.prototype.splice()` with array spread syntax (`...`) (direct mutation).

**Options compared**

1. **Immutable with `concat()`**: This approach creates a new copy of the original array (`a`) by calling `Array.prototype.concat()`. The resulting array is then appended to another empty array (`other`) in a loop.
2. **Direct Mutation with Splice + Spread**: This approach modifies the existing array (`other`) by calling `Array.prototype.splice()` and spreading the contents of `a` into it.

**Pros and Cons**

* **Immutable with `concat()`**:
	+ Pros: Creates a new copy of the data, which can be beneficial for performance-critical applications where modifying an existing object could lead to unpredictable behavior.
	+ Cons: Allocates more memory due to creating a new array, and may incur additional overhead due to the creation of a new array instance.
* **Direct Mutation with Splice + Spread**:
	+ Pros: Modifies an existing array in-place, which can be faster than creating a new copy. Also, using spread syntax (`...`) can help avoid unnecessary type conversions.
	+ Cons: Modifies the original data, which may lead to unexpected behavior if not handled properly.

**Library and special JS feature**

Neither of these approaches relies on any specific libraries or advanced JavaScript features (like async/await or generators). However, it's worth noting that some browsers, like V8 in Chrome, have optimized array operations for modern JavaScript engines.

**Benchmark preparation code**

The script preparation code is empty, which means the benchmark starts from a clean slate. This allows for fair comparison between the two approaches.

**Other alternatives**

For joining arrays, other approaches include:

* Using `Array.prototype.push()` and `Array.prototype.unshift()`
* Utilizing libraries like Lodash's `flattenDeep` function
* Leveraging modern JavaScript features like array destructuring or using `Promise.all()` with `Array.prototype.map()`

However, for this specific benchmark, the comparison between `concat()` and `splice()` + spread is likely intended to highlight the trade-offs between creating a new copy of data versus modifying an existing array in-place.

Related benchmarks:

Array.prototype.concat vs splice for joining many arrays (version: 0)

Comparing performance of: immutable with concat vs direct mutation with splice + spread

Created: 4 years ago by: Guest

Jump to the latest result

immutable with concat

direct mutation with splice + spread

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