Benchmark: spread vs slice vs splice

Script Preparation code:

var array = Array.from({ length: 100 }).map((val, i) => i);

Tests:

spread
var newArray = [...array];
slice
var newArray = array.slice();
splice
var newArray = array.splice();

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
spread
slice
splice

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 3 months ago)

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

Browser/OS: Chrome 144 on Windows

View result in a separate tab

Test name	Executions per second
spread	34905152.0 Ops/sec
slice	42115468.0 Ops/sec
splice	40706748.0 Ops/sec

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

LLMs can make mistakes. Check important info.

I'll break down the benchmark and explain what's being tested, compared options, pros/cons, library usage, special JS features, and alternative approaches.

**Benchmark Overview**

The test compares three ways to create a new array from an existing one:

1. **Spread Operator (`...`)**: Using the spread operator to copy elements from the original array.
2. **Array Slice (`array.slice()`)**: Creating a shallow copy of the original array using `slice`.
3. **Array Splice (`array.splice()`)**: Modifying the original array and then creating a new one with the modified elements.

**Library Usage**

There is no explicit library mentioned in the benchmark definition or test cases. However, it's worth noting that some browsers might have additional libraries or extensions that could influence the results, but this is not relevant to the specific test cases presented.

**Special JS Features**

None of the special JavaScript features are explicitly mentioned or used in the benchmark. The tests focus on basic array operations using standard syntax.

**Options Comparison**

Here's a brief overview of each option:

1. **Spread Operator (`...`)**:
	* Pros: Efficient, concise, and modern way to create a new array.
	* Cons: Might be slower due to its syntactic sugar, and some older browsers might not support it.
2. **Array Slice (`array.slice()`)**:
	* Pros: Widely supported across most browsers and environments.
	* Cons: Can be less efficient than the spread operator, especially for large arrays.
3. **Array Splice (`array.splice()`)**:
	* Pros: Creates a new array with modified elements, which can be useful in certain scenarios.
	* Cons: Modifies the original array, which might not be desirable, and can be slower due to its additional overhead.

**Benchmark Results**

The latest benchmark results show that:

1. **Spread Operator (`...`)**: The fastest execution rate (8077417.0 executions/second).
2. **Array Slice (`array.slice()`)**: Middle-paced execution rate (4324035.0 executions/second).
3. **Array Splice (`array.splice()`)**: Slowest execution rate (3717745.75 executions/second).

**Alternative Approaches**

Other approaches to create a new array from an existing one include:

1. `concat()`: The older, more traditional way to concatenate arrays.
2. `Array.from()`: A modern method to create an array from an iterable, which might be faster than the spread operator in some cases.

However, these alternatives are not tested in this specific benchmark, and their performance would depend on various factors, such as the browser's implementation, the size of the input arrays, and other optimizations.

Related benchmarks:

spread vs slice vs splice (version: 0)

Comparing performance of: spread vs slice vs splice

Created: 7 years ago by: Guest

Jump to the latest result

spread

slice

splice

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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