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: 10 days 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

Test name	Executions per second
Array clone with spread operator	24693186.0 Ops/sec
Array clone with slice	118929880.0 Ops/sec
Array addition with spread operator	21538724.0 Ops/sec
Array addition with slice and push	28114982.0 Ops/sec
Array removal with spread operator	16770662.0 Ops/sec
Array removal with slice and splice	51222256.0 Ops/sec
Array update with spread operator	15066070.0 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated 6 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: