Benchmark: JavaScript spread operator vs Slice/Splice performance 2

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

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

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (X11; CrOS x86_64 14541.0.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/144.0.0.0 Safari/537.36

Browser/OS: Chrome 144 on Chrome OS 14541.0.0

View result in a separate tab

Test name	Executions per second
Array clone with spread operator	57647884.0 Ops/sec
Array clone with slice	77199280.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down what's being tested in the provided JSON benchmark.

**Benchmark Goal**

The primary goal of this benchmark is to compare the performance of two approaches for creating an array copy: using the spread operator (`...`) and using the `slice()` method.

**Options Compared**

Two options are compared:

1. **Array Clone with Spread Operator**: This approach uses the spread operator (`...`) to create a new array copy from the original `list` array.
2. **Array Clone with Slice**: This approach uses the `slice()` method to create a new array copy from the original `list` array.

**Pros and Cons of Each Approach**

* **Spread Operator (Array Clone)**:
	+ Pros: Simple, concise syntax; efficient creation of shallow copies.
	+ Cons: Can be slower for large arrays due to the overhead of creating a new array object, and it only creates a shallow copy (i.e., it does not recursively clone nested objects).
* **Slice Method**:
	+ Pros: Efficient creation of shallow copies; can create deep copies by specifying an offset and length.
	+ Cons: Requires calling `slice()` explicitly, which may add overhead.

**Library Used**

In the benchmark code, the `Math.random()` function is used to generate random values for the array elements. This suggests that no external libraries are required beyond the standard JavaScript library.

**Special JS Feature/Syntax**

None of the approaches in this benchmark rely on special JavaScript features or syntax, such as async/await, generators, or advanced functional programming constructs.

**Other Considerations**

* The benchmark uses a fixed-length array `list` with random elements, which ensures that the performance differences between the two approaches are not influenced by the size or structure of the input data.
* The number of iterations (`ITERATIONS`) is set to 500,000, which provides a good balance between statistical significance and computational cost.

**Alternative Approaches**

Other alternatives for creating array copies in JavaScript include:

1. **Array.prototype.map()**: Creates a new array by applying a transformation function to each element of the original array.
2. **Array.prototype.slice.call()**: Similar to `slice()`, but returns an array instead of modifying the original array.
3. **Array.prototype.reduce()**: Can be used to create a new array by accumulating elements in a callback function.

However, these alternatives may have different performance characteristics and use cases compared to the spread operator and slice method used in this benchmark.

Related benchmarks:

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

Comparing performance of: Array clone with spread operator vs Array clone with slice

Created: 4 years ago by: Guest

Jump to the latest result

Array clone with spread operator

Array clone with slice

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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