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: 4 years ago by: Guest

Jump 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());
}

​x
 
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];
const clone = [...list];
Array clone with slice
const clone = list.slice();
const clone = list.slice();
Array addition with spread operator
const clone = [...list, n];
const clone = [...list, n];
Array addition with slice and push
const clone = list.slice(); clone.push(n);
const clone = list.slice();
clone.push(n);
Array removal with spread operator
const clone = [ ...list.slice(0, index), ...list.slice(index + 1), ];
const clone = [
...list.slice(0, index),
...list.slice(index + 1),
];
Array removal with slice and splice
const clone = list.slice(); clone.splice(index, 1);
const clone = list.slice();
clone.splice(index, 1);
Array update with spread operator
const clone = [ ...list.slice(0, index), n, ...list.slice(index + 1), ];
const clone = [
...list.slice(0, index),
n,
...list.slice(index + 1),
];

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Experimental features:

Memory measurements supported only in Chrome.
For precise memory measurements Chrome must be launched with --enable-precise-memory-info flag.
More information: Monitoring JavaScript Memory

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: 2 years ago)

User agent: Mozilla/5.0 (Linux; Android 11; SAMSUNG SM-N975F) AppleWebKit/537.36 (KHTML, like Gecko) SamsungBrowser/17.0 Chrome/96.0.4664.104 Mobile Safari/537.36

Browser/OS: Chrome Mobile 96 on Android

View result in a separate tab

Test name	Executions per second
Array clone with spread operator	6392825.0 Ops/sec
Array clone with slice	6868095.5 Ops/sec
Array addition with spread operator	2304945.8 Ops/sec
Array addition with slice and push	2516468.2 Ops/sec
Array removal with spread operator	1555341.4 Ops/sec
Array removal with slice and splice	3126453.8 Ops/sec
Array update with spread operator	1049134.9 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated 5 months ago):

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:

Array cloning (creating a new copy of an array)
Array addition (appending a new element to an array)
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:

Array Cloning
- Using the spread operator (...)
- Using slice
Array Addition
- Using the spread operator (...)
- Using slice followed by push
Array Removal
- Using the spread operator (...) with a partial array
- Using slice followed by splice

Pros and Cons:

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
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
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.

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.

Related benchmarks: