Benchmark: spread v splice - MeasureThat.net

Script Preparation code:

var testArray = [83, 93, 27, 29, 2828, 234, 23, 56, 32, 56, 67, 77, 32, 45, 93, 17, 28, 83, 62, 99, 36, 28, 93, 27, 29, 2828, 234, 23, 56, 32, 56, 67, 77, 32, 45, 93, 17, 28, 83, 62, 99, 36, 28, 93, 27, 29, 2828, 234, 23, 56, 32, 56, 67, 77, 32, 45, 93, 17, 28, 83, 62, 99, 36, 28, 93, 27, 29, 2828, 234, 23, 56, 32, 56, 67, 77, 32, 45, 93, 17, 28, 83, 62, 99, 36, 28, 93, 27, 29, 2828, 234, 23, 56, 32, 56, 67, 77, 32, 45, 93, 17, 28, 83, 62, 99, 36, 28, 93, 27, 29, 2828, 234, 23, 56, 32, 56, 67, 77, 32, 45, 93, 17, 28, 83, 62, 99, 36, 28, 93, 27, 29, 2828, 234, 23, 56, 32, 56, 67, 77, 32, 45, 93, 17, 28, 83, 62, 99, 36, 28, 93, 27, 29, 2828, 234, 23, 56, 32, 56, 67, 77, 32, 45, 93, 17, 28, 83, 62, 99, 36, 28, 93, 27, 29, 2828, 234, 23, 56, 32, 56, 67, 77, 32, 45, 93, 17, 28, 83, 62, 99, 36, 28, 93, 27, 29, 2828, 234, 23, 56, 32, 56, 67, 77, 32, 45, 93, 17, 28, 83, 62, 99, 36, 28];

function getRandomInt(min, max) {
    min = Math.ceil(min);
    max = Math.floor(max);
    return Math.floor(Math.random() * (max - min) + min); //The maximum is exclusive and the minimum is inclusive
}

​x
 
var testArray = [83, 93, 27, 29, 2828, 234, 23, 56, 32, 56, 67, 77, 32, 45, 93, 17, 28, 83, 62, 99, 36, 28, 93, 27, 29, 2828, 234, 23, 56, 32, 56, 67, 77, 32, 45, 93, 17, 28, 83, 62, 99, 36, 28, 93, 27, 29, 2828, 234, 23, 56, 32, 56, 67, 77, 32, 45, 93, 17, 28, 83, 62, 99, 36, 28, 93, 27, 29, 2828, 234, 23, 56, 32, 56, 67, 77, 32, 45, 93, 17, 28, 83, 62, 99, 36, 28, 93, 27, 29, 2828, 234, 23, 56, 32, 56, 67, 77, 32, 45, 93, 17, 28, 83, 62, 99, 36, 28, 93, 27, 29, 2828, 234, 23, 56, 32, 56, 67, 77, 32, 45, 93, 17, 28, 83, 62, 99, 36, 28, 93, 27, 29, 2828, 234, 23, 56, 32, 56, 67, 77, 32, 45, 93, 17, 28, 83, 62, 99, 36, 28, 93, 27, 29, 2828, 234, 23, 56, 32, 56, 67, 77, 32, 45, 93, 17, 28, 83, 62, 99, 36, 28, 93, 27, 29, 2828, 234, 23, 56, 32, 56, 67, 77, 32, 45, 93, 17, 28, 83, 62, 99, 36, 28, 93, 27, 29, 2828, 234, 23, 56, 32, 56, 67, 77, 32, 45, 93, 17, 28, 83, 62, 99, 36, 28];​function getRandomInt(min, max) {    min = Math.ceil(min);    max = Math.floor(max);    return Math.floor(Math.random() * (max - min) + min); //The maximum is exclusive and the minimum is inclusive}

Tests:

spread

  const indexToRemove = getRandomInt(0, testArray.length)
  const newArr = [
    ...testArray.slice(0, indexToRemove),
    ...testArray.slice(indexToRemove + 1)
  ]

 
  const indexToRemove = getRandomInt(0, testArray.length)  const newArr = [    ...testArray.slice(0, indexToRemove),    ...testArray.slice(indexToRemove + 1)  ]

splice

  const indexToRemove = getRandomInt(0, testArray.length)
  const arrCopy = [...testArray]
  arrCopy.splice(indexToRemove, 1)

 
  const indexToRemove = getRandomInt(0, testArray.length)  const arrCopy = [...testArray]  arrCopy.splice(indexToRemove, 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
spread
splice

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 4 years ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.88 Safari/537.36 Edg/87.0.664.60

Browser/OS: Chrome 87 on Windows

View result in a separate tab

Test name	Executions per second
spread	375717.8 Ops/sec
splice	494879.9 Ops/sec

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

Let's break down the benchmark and its test cases.

Benchmark Overview

The benchmark measures the performance of two ways to remove an element from an array: using Array.prototype.splice() (referred to as "splice") and using the spread operator (...) to create a new array with the elements before and after the one to be removed (referred to as "spread").

Options Compared

The benchmark compares the performance of:

Splice: Using Array.prototype.splice() to remove an element from the array.
Spread: Using the spread operator (...) to create a new array with the elements before and after the one to be removed.

Pros and Cons

Splice:
- Pros: Simple, widely supported, and efficient for small arrays.
- Cons: Can be slower than the spread operator for large arrays due to its indexing mechanism.
Spread:
- Pros: Faster and more efficient for large arrays, as it avoids indexing and uses a simpler copying mechanism.
- Cons: Requires modern JavaScript features ( ECMAScript 2015+) and may not work in older browsers or environments.

Library Usage

None of the test cases use any external libraries.

Special JS Features/Syntax

Spread Operator: Introduced in ECMAScript 2015+, the spread operator (...) is used to create a new array with elements from an existing array.
Array.prototype.splice(): A built-in JavaScript method that removes elements from an array and returns them as a new array.

Other Considerations

The benchmark measures the performance of these two approaches in terms of executions per second, which indicates how many times each approach can be executed within a given time frame (e.g., 1 second).

Alternatives

If you're interested in exploring other methods for removing elements from an array, some alternatives include:

Array.prototype.filter(): Removes elements that don't match a certain condition.
Array.prototype.map(): Creates a new array with transformed elements.
Array.prototype.reduce(): Accumulates values in an array.

Keep in mind that each approach has its own use cases and trade-offs, so it's essential to choose the right method depending on your specific requirements.

LLMs can make mistakes. Check important info.

Let's break down the benchmark and its test cases.

**Benchmark Overview**

The benchmark measures the performance of two ways to remove an element from an array: using `Array.prototype.splice()` (referred to as "splice") and using the spread operator (`...`) to create a new array with the elements before and after the one to be removed (referred to as "spread").

**Options Compared**

The benchmark compares the performance of:

1. **Splice**: Using `Array.prototype.splice()` to remove an element from the array.
2. **Spread**: Using the spread operator (`...`) to create a new array with the elements before and after the one to be removed.

**Pros and Cons**

* **Splice**:
	+ Pros: Simple, widely supported, and efficient for small arrays.
	+ Cons: Can be slower than the spread operator for large arrays due to its indexing mechanism.
* **Spread**:
	+ Pros: Faster and more efficient for large arrays, as it avoids indexing and uses a simpler copying mechanism.
	+ Cons: Requires modern JavaScript features ( ECMAScript 2015+) and may not work in older browsers or environments.

**Library Usage**

None of the test cases use any external libraries.

**Special JS Features/Syntax**

* **Spread Operator**: Introduced in ECMAScript 2015+, the spread operator (`...`) is used to create a new array with elements from an existing array.
* **Array.prototype.splice()**: A built-in JavaScript method that removes elements from an array and returns them as a new array.

**Other Considerations**

**Alternatives**

If you're interested in exploring other methods for removing elements from an array, some alternatives include:

* **Array.prototype.filter()**: Removes elements that don't match a certain condition.
* **Array.prototype.map()**: Creates a new array with transformed elements.
* **Array.prototype.reduce()**: Accumulates values in an array.

Keep in mind that each approach has its own use cases and trade-offs, so it's essential to choose the right method depending on your specific requirements.

Related benchmarks:

spread v splice (version: 0)

remove single index

Comparing performance of: spread vs splice

Created: 4 years ago by: Guest

Jump to the latest result