Benchmark: slice VS splice VS shift for fixed size array with immutable practices

Script Preparation code:

var count = 120000;
var list = new Array(count).fill(100);

Tests:

slice
if (list.length > count - 1) { list=list.slice(0, count - 1) list.push(count + 1) } else { list = [...list, count + 1]; }
splice
list = [...list, count + 1] if (list.length > count) { list.splice(0, list.length - count); }
shift-while
list = [...list, count + 1] while (list.length > count) { list.shift(); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
slice
splice
shift-while

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 11_2_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.182 Safari/537.36

Browser/OS: Chrome 88 on Mac OS X 11.2.1

View result in a separate tab

Test name	Executions per second
slice	2129.1 Ops/sec
splice	1440.2 Ops/sec
shift-while	1443.8 Ops/sec

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

LLMs can make mistakes. Check important info.

I'll break down the provided benchmark and explain what's being tested, along with the pros and cons of each approach.

**Benchmark Overview**

The benchmark compares three approaches to modify a fixed-size array in JavaScript:

1. `slice()`
2. `splice()`
3. `shift()` while loop

The test case uses an immutable practice, where the original array is not modified directly, but instead, a new array is created using one of the above methods.

**Script Preparation Code**

Before running the benchmark, the script preparation code creates a fixed-size array with 120,000 elements, all initialized to 100. This ensures that the test case performs operations on an existing array, rather than creating it dynamically during execution.

```javascript
var count = 120000;
var list = new Array(count).fill(100);
```

**Individual Test Cases**

Each test case is represented by a separate benchmark definition in JSON format. The `Benchmark Definition` field contains the actual JavaScript code that will be executed for each test case.

Here's a brief explanation of each approach:

1. **slice()**
   ```javascript
if (list.length > count - 1) {
  list = list.slice(0, count - 1);
  list.push(count + 1);
} else {
  list = [...list, count + 1];
}
```
   This code uses `slice()` to extract a subset of the array and then pushes an additional element onto it. The main difference between this approach and others is that `slice()` creates a new array object with a reference to the original elements.

2. **splice()**
   ```javascript
list = [...list, count + 1];

if (list.length > count) {
  list.splice(0, list.length - count);
}
```
   This code first appends an element using the spread operator (`[...list, count + 1]`) and then removes elements from the beginning of the array using `splice()`. The main difference between this approach and others is that `splice()` modifies the original array by adjusting its length.

3. **shift-while**
   ```javascript
while (list.length > count) {
  list.shift();
}
list = [...list, count + 1];
```
   This code repeatedly removes elements from the beginning of the array using `shift()` and then appends an additional element using the spread operator. The main difference between this approach and others is that it creates a new array object by shifting elements.

**Pros and Cons**

Here's a brief summary of the pros and cons for each approach:

1. **slice()**
   - Pros:
     * Creates a new array object, which can be beneficial for immutable practices.
     - Efficient, as it doesn't modify the original array.
   - Cons:
     * May incur additional overhead due to creating a new array object.

2. **splice()**
   - Pros:
     * Modifies the original array by adjusting its length, making it more efficient than `slice()` for large arrays.
   - Suitable for use cases where the original array needs to be modified.
   - Cons:
     * May modify the original array, which can lead to unexpected side effects.

3. **shift-while**
   - Pros:
     * Efficient, as it modifies the original array by adjusting its length.
     - Creates a new array object only after all elements have been removed using `shift()`.
   - Cons:
     * Requires multiple operations (shift and push), which can be slower than other approaches.

**Library: None**

There are no external libraries used in this benchmark. All the code is written in plain JavaScript.

**Special JS Features: None**

This benchmark does not use any special or experimental JavaScript features, such as async/await, arrow functions, or classes.

**Alternatives**

Other alternatives to these approaches might include:

* Using `Array.prototype.concat()` instead of spread operator (`[...list, count + 1]`) for appending elements.
* Using a library like Lodash's `_.arrayReduceRight()` function for reducing the array size while preserving its order.
* Implementing a custom reduction function using recursion or iteration.

Keep in mind that the choice of approach depends on specific use cases and requirements. This benchmark provides a general comparison of three common methods, allowing users to evaluate their performance and choose the best fit for their needs.

Related benchmarks:

slice VS splice VS shift for fixed size array with immutable practices (version: 0)

Comparing performance of: slice vs splice vs shift-while

Created: 3 years ago by: Guest

Jump to the latest result

slice

splice

shift-while

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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