Benchmark: array.splice vs for loop

Script Preparation code:

s = new Set();
a = [];
for (var i=0; i < 1000; i++) s.add(i*i);

Tests:

array.splice
a.splice(0, a.length, ...s.values());
for loop
a.length = 0; for (var x of s) a.push(x);
array.splice w/o spread
a.splice.apply(a, [0, a.length].concat(Array.from(s)));

Historical Performance Data aggregated from 8 community runs

Desktop Results:

Chrome 8 runs

array.splice w/o spread

197K/s

for loop

126K/s

array.splice

45K/s

Fastest: array.splice w/o spread (4.4x faster)

View exact numbers

✓ array.splice w/o spread: 197,039 ops/sec
• for loop: 125,626 ops/sec
• array.splice: 44,749 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
array.splice
for loop
array.splice w/o spread

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/135.0.0.0 Safari/537.36

Browser/OS: Chrome 135 on Mac OS X 10.15.7

View result in a separate tab

for loop

250K/s

array.splice w/o spread

235K/s

array.splice

54K/s

View exact numbers

Test name	Executions per second
✓ for loop	249,936 Ops/sec
array.splice w/o spread	235,414 Ops/sec
array.splice	53,809 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the benchmark and explore what's being tested, compared, and the pros and cons of each approach.

**What is being tested?**

The benchmark is comparing three different approaches to remove elements from an array in JavaScript:

1. `array.splice(0, a.length, ...s.values())`: This method uses `splice` with a starting index of 0, removing all elements from the array and then replaces them with values from the `Set` object.
2. `a.length = 0; for (var x of s) a.push(x);`: This approach creates a new array by iterating over the values in the `Set` object and adding each one to the original array, effectively replacing the existing elements.
3. `a.splice.apply(a, [0, a.length].concat(Array.from(s)))`: Similar to the first method, but without using spread syntax (`...s.values()`).

**Options compared**

The benchmark is comparing the performance of these three approaches:

* **Pros and Cons:**
	+ **`array.splice(0, a.length, ...s.values())`**:
		- Pros: Efficient way to remove all elements from an array.
		- Cons: Can be slow for large arrays if using `...` syntax (as it creates a new array with the spread operator).
	+ **`a.length = 0; for (var x of s) a.push(x);`**:
		- Pros: Can be faster than `splice` when removing all elements, as it avoids creating an intermediate array.
		- Cons: Requires iterating over the values in the set and adding them to the original array, which can be slower for large sets.
	+ **`a.splice.apply(a, [0, a.length].concat(Array.from(s)))`**:
		- Pros: Similar to the first method but avoids using `...` syntax, potentially making it faster for large arrays.
		- Cons: Requires creating an intermediate array, which can be slower than the `splice` approach.

**Library and purpose**

In the benchmark preparation code, a `Set` object is created and populated with values. A `Set` is a data structure in JavaScript that stores unique values, making it efficient for fast lookups and iteration. The library used here is the built-in JavaScript `Set` API.

**Special JS feature or syntax**

The benchmark uses the spread operator (`...`) to create an array from the `Set` object's values. This is a relatively modern feature introduced in ECMAScript 2018 (ES10). It allows for concise and efficient way to transform sets into arrays.

**Other alternatives**

If you were to implement this benchmark manually, without relying on pre-existing libraries or built-in functions, you could consider the following approaches:

* Using `for` loops with array indexing: `a.length = 0; for (var i = 0; i < a.length; i++) { a[i] = undefined; }`
* Using `filter()` and `map()`: `a.splice(0, a.length); a = a.filter(x => s.has(x)).concat(s)`

array.splice vs for loop (version: 1)

Comparing performance of: `array.splice vs for loop vs array.splice w/o spread`

Created: 9 years ago by: Registered User

Go to the latest result

array.splice

for loop

array.splice w/o spread

Historical Performance Data aggregated from 8 community runs

Desktop Results:

Chrome 8 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

array.splice vs for loop (version: 1)

Comparing performance of: array.splice vs for loop vs array.splice w/o spread

Created: 9 years ago by: Registered User

Go to the latest result

array.splice

for loop

array.splice w/o spread

Historical Performance Data aggregated from 8 community runs

Desktop Results:

Chrome 8 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

Comparing performance of: `array.splice vs for loop vs array.splice w/o spread`