Benchmark: Array.prototype.concat vs splice vs loop for joining lots of arrays

Tests:

immutable with concat
var a = [] var b = [ "hello", "jello" ] for (var i = 0; i < 1000; i++) { a = a.concat(b) }
mutation with splice + spread
var a = [] var b = [ "hello", "jello" ] for (var i = 0; i < 1000; i++) { a.splice(a.length, 0, ...b) }
mutation with splice into preallocated array
var a = new Array(2000) var b = [ "hello", "jello" ] for (var i = 0; i < 1000; i++) { a.splice(i * b.length, b.length, ...b) }
mutation with loop-assign
var a = new Array(2000) var b = [ "hello", "jello" ] for (var i = 0; i < 1000; i++) { for (var j = 0; j < b.length; j++) { a[i+j] = b[j] } }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
immutable with concat
mutation with splice + spread
mutation with splice into preallocated array
mutation with loop-assign

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 29 days ago):

LLMs can make mistakes. Check important info.

I'll break down the provided benchmark definition and test cases.

**Benchmark Definition**

The benchmark measures the performance of different approaches for joining lots of arrays in JavaScript. The options being compared are:

1. `Array.prototype.concat()`
2. `Array.prototype.splice()` with spread operator (`...`)
3. `Array.prototype.splice()` without spread operator
4. Loop-assign (using a nested loop to assign elements)

**Pros and Cons of each approach:**

1. `concat()`: This method creates a new array by concatenating the existing arrays. It's efficient because it avoids mutating the original array.
	* Pros: Efficient, no mutation of original array
	* Cons: Creates a new array, can be slower for large inputs
2. `splice()` with spread operator (`...`): This method inserts one or more elements at specified position(s) in an existing array. It's efficient because it avoids mutating the original array.
	* Pros: Efficient, no mutation of original array
	* Cons: Can be slower than `concat()` due to additional overhead of inserting elements
3. `splice()` without spread operator: This method mutates the original array by deleting and replacing existing elements with new ones.
	* Pros: Fastest approach (mutating the original array)
	* Cons: Mutates the original array, can be slower for large inputs

**Loop-assign**: This method uses a nested loop to assign elements from one array to another.
	* Pros: Can be faster than `splice()` with spread operator due to reduced overhead of inserting elements
	* Cons: Slowest approach (mutating the original array), requires more CPU cycles

**Library and purpose**

None of the test cases use any external libraries. They only rely on built-in JavaScript functions.

**Special JS features or syntax**

The benchmark uses some special JavaScript features:

1. Spread operator (`...`): Used in `splice()` with spread operator to insert elements.
2. Immutable arrays: The `concat()` method creates a new array, while the other approaches modify an existing array (although `concat()` doesn't mutate the original array).

**Other alternatives**

If the test cases didn't use any external libraries or special JavaScript features, alternative approaches could be:

1. Using `Array.prototype.reduce()`: Instead of using a loop to join arrays, you can use `reduce()` to concatenate elements.
2. Using `String.join()`: If the goal is to concatenate strings, you can use `String.join()` instead of any array-related methods.
3. Using `Array.prototype.push()`: You can push each element from one array to another using `push()` instead of `splice()`.

However, these alternatives might not be as efficient or straightforward as the original approaches, and may require additional considerations depending on the specific use case.

Latest run results:

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

User agent: Mozilla/5.0 (Android 9; Tablet; rv:66.0) Gecko/66.0 Firefox/66.0

Browser/OS: Firefox 66 on Android

View result in a separate tab

Test name	Executions per second
immutable with concat	23.4 Ops/sec
mutation with splice + spread	951.9 Ops/sec
mutation with splice into preallocated array	1024.8 Ops/sec
mutation with loop-assign	24848.8 Ops/sec

Related benchmarks:

Array.prototype.concat vs splice vs loop for joining lots of arrays (version: 0)

Comparing performance of: immutable with concat vs mutation with splice + spread vs mutation with splice into preallocated array vs mutation with loop-assign

Created: 5 years ago by: Guest

Jump to the latest result

immutable with concat

mutation with splice + spread

mutation with splice into preallocated array

mutation with loop-assign

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 29 days ago):