Benchmark: splice vs spread operator for adding elements into very large 2D arrays

Script Preparation code:

var arr = []; 
for (let i = 0; i < 4000; i++) {
  arr.push(Array.from({length: 40}, () => Math.floor(Math.random() * 40)));
}

Tests:

splice
arr.splice(3000, 0, [5, 4, 8, 21, 16, 22, 18, 38, 19, 16, 37, 28, 17, 17, 29, 34, 38, 8, 39, 2, 12, 16, 12, 6, 9, 33, 6, 1, 39, 9, 39, 15, 26, 32, 34, 31, 11, 14, 29, 4]);
spread
arr = [ ...arr.slice(0,3000), [5, 4, 8, 21, 16, 22, 18, 38, 19, 16, 37, 28, 17, 17, 29, 34, 38, 8, 39, 2, 12, 16, 12, 6, 9, 33, 6, 1, 39, 9, 39, 15, 26, 32, 34, 31, 11, 14, 29, 4], ...arr.slice(3000) ];

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
splice
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 on MeasureThat.net.

**Benchmark Definition**

The benchmark tests two approaches for adding elements to a large 2D array: `splice` and the spread operator (`...`). The script preparation code generates a massive 2D array with 4000 rows, each row containing 40 random numbers. The HTML preparation code is empty in this case.

**Options Compared**

The benchmark compares two options:

1. **Splice**: Using the `splice()` method to add a new row at a specific index (3000) in the large array.
2. **Spread Operator**: Using the spread operator (`...`) to create a new array that includes all elements from the original array and then adds a new row at the specified index.

**Pros and Cons**

* **Splice:**
	+ Pros:
		- Can be more efficient for adding multiple elements to an array.
		- Can modify the original array in place.
	+ Cons:
		- Modifies the original array, which might not be desirable if the array needs to remain unchanged.
		- Might be slower than other methods due to the overhead of modifying the array.
* **Spread Operator:**
	+ Pros:
		- Does not modify the original array (returns a new array).
		- Can be faster for adding only one element at a time, as it creates a new array and copies elements from the original array.
	+ Cons:
		- Creates a new array, which can be memory-intensive.
		- Might be slower than other methods when dealing with large amounts of data.

**Library and Special JS Features**

There are no libraries mentioned in this benchmark. However, it's worth noting that some JavaScript features, like `for...of` loops or arrow functions, might affect the performance of the benchmark. But in this case, they are not used.

**Other Considerations**

* **Array Concatenation**: Another approach to adding elements to an array is using `concat()`. This method also creates a new array and copies elements from the original array. However, it's generally slower than the spread operator.
* **Object Assignement**: If you're working with 2D arrays of objects instead of numbers, object assignment (`arr[i] = obj` or `arr.splice(i, 0, obj)` might be more suitable.

**Alternative Benchmarks**

MeasureThat.net offers many other JavaScript microbenchmarks that test various aspects of performance, such as:

* Loop optimization (e.g., using `for...of`, `forEach`, or `reduce`)
* Array manipulation (e.g., sorting, reversing, filtering)
* Object creation and comparison
* Function call overhead

You can explore these and other benchmarks to find the ones that interest you most.

Related benchmarks:

splice vs spread operator for adding elements into very large 2D arrays (version: 0)

Tests the speed of using spread vs splice for adding a row at a specific index in a very large array.

Comparing performance of: splice vs spread

Created: 5 years ago by: Guest

Jump to the latest result

splice

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