Benchmark: JavaScript spread operator vs Slice/Splice performance, passing

JavaScript spread operator vs Slice/Splice performance, passing (version: 0)

Comparing performance of: `Array clone with spread operator vs Array clone with slice vs Array addition with spread operator vs Array addition with slice and push vs Array removal with spread operator vs Array removal with slice and splice vs Array update with spread operator`

Created: 5 years ago by: Guest

Go to the latest result

Script Preparation code:

const ITERATIONS = 500000;
var index = ITERATIONS/2;
var n = Math.random();

var list = [];
for (let i = 0; i < length; i += 1) {
  list.push(Math.random());
}

Tests:

Array clone with spread operator
const clone = [...list];
Array clone with slice
const clone = list.slice();
Array addition with spread operator
const clone = [...list, n];
Array addition with slice and push
const clone = list.slice(); clone.push(n);
Array removal with spread operator
const clone = [ ...list.slice(0, index), ...list.slice(index + 1), ];
Array removal with slice and splice
const clone = list.slice(); clone.splice(index, 1);
Array update with spread operator
const clone = [ ...list.slice(0, index), n, ...list.slice(index + 1), ];

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array clone with spread operator
Array clone with slice
Array addition with spread operator
Array addition with slice and push
Array removal with spread operator
Array removal with slice and splice
Array update with spread operator

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

Array clone with slice

118.9M/s

Array removal with slice and splice

51.2M/s

Array addition with slice and push

28.1M/s

Array clone with spread operator

24.7M/s

Array addition with spread operator

21.5M/s

Array removal with spread operator

16.8M/s

Array update with spread operator

15.1M/s

View exact numbers

Test name	Executions per second
✓ Array clone with slice	118,929,880 Ops/sec
Array removal with slice and splice	51,222,256 Ops/sec
Array addition with slice and push	28,114,982 Ops/sec
Array clone with spread operator	24,693,186 Ops/sec
Array addition with spread operator	21,538,724 Ops/sec
Array removal with spread operator	16,770,662 Ops/sec
Array update with spread operator	15,066,070 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 Definition and test cases.

**Benchmark Purpose:**
The benchmark tests the performance of different approaches for various array operations in JavaScript:

1. Array cloning (creating a new copy of an array)
2. Array addition (appending a new element to an array)
3. Array removal (removing an element from an array)

The benchmark compares two methods for each operation: using the spread operator (`...`) and using `slice`/`splice`.

**Options Compared:**

1. **Array Cloning**
	* Using the spread operator (`...`)
	* Using `slice`
2. **Array Addition**
	* Using the spread operator (`...`)
	* Using `slice` followed by `push`
3. **Array Removal**
	* Using the spread operator (`...`) with a partial array
	* Using `slice` followed by `splice`

**Pros and Cons:**

1. **Array Cloning**
	* Spread operator:
		+ Pros: concise, readable, efficient (O(n))
		+ Cons: may create unnecessary intermediate arrays
	* Slice:
		+ Pros: efficient (O(n)), creates a new array reference without copying data
		+ Cons: less readable, requires explicit indexing
2. **Array Addition**
	* Spread operator:
		+ Pros: concise, readable, efficient (O(1) amortized)
		+ Cons: may create unnecessary intermediate arrays
	* Slice + push:
		+ Pros: straightforward, no unnecessary intermediate arrays
		+ Cons: less readable, requires explicit indexing and method calls
3. **Array Removal**
	* Spread operator with partial array:
		+ Pros: concise, readable, efficient (O(n))
		+ Cons: may create unnecessary intermediate arrays
	* Slice + splice:
		+ Pros: efficient (O(1) amortized), creates a new array reference without copying data
		+ Cons: less readable, requires explicit indexing and method calls

**Library Used:**
None mentioned in the Benchmark Definition. However, it's likely that the benchmark is running on a JavaScript engine or browser that uses built-in implementations of these methods.

**Special JS Features/Syntax:**
No special features or syntax are mentioned in the Benchmark Definition. The focus is solely on comparing different array operation approaches.

**Alternatives:**
For further comparison, additional test cases could be added to consider other aspects of array operations, such as:

* Array concatenation
* Array iteration (e.g., `forEach`, `map`)
* Array manipulation using functions (e.g., `filter`, `reduce`)

Keep in mind that the benchmark is specifically designed to compare performance and readability of different approaches for specific array operations.