Benchmark: array slice vs while loop (to empty array)

Script Preparation code:

const items = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16];
const startIndex = 0;

Tests:

While
while (items.length) { items.pop(); }
slice
const trimmedItems = items.slice(0, items.length)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
While
slice

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36

Browser/OS: Chrome 131 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
While	112035128.0 Ops/sec
slice	63785364.0 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated one year ago):

LLMs can make mistakes. Check important info.

The benchmark provided tests the performance of two different methods for emptying an array in JavaScript: using a `while` loop with `Array.prototype.pop()` and using the `Array.prototype.slice()` method. Here’s a detailed breakdown of the comparison:

### Test Methods

1. **While Loop with `pop()`**:
   - **Benchmark Definition**: 
     ```javascript
     while (items.length) {
       items.pop();
     }
     ```
   - **Description**: This method uses a `while` loop to repeatedly remove the last element from the `items` array until it is empty. The `pop()` method modifies the original array by removing the last element and returns it. Each iteration of the loop continues until the array's length is zero.

2. **Array `slice()` Method**:
   - **Benchmark Definition**: 
     ```javascript
     const trimmedItems = items.slice(0, items.length);
     ```
   - **Description**: This method uses `Array.prototype.slice()` to create a shallow copy of the array from the beginning to its current length. While this method effectively creates a new array, it does not modify the original array and results in a new array `trimmedItems`.

### Performance Results

- **While Loop (pop)**:
  - **Executions Per Second**: 112,035,128.0
- **Slice**:
  - **Executions Per Second**: 63,785,364.0

### Pros and Cons

#### 1. While Loop with `pop()`:
- **Pros**:
  - Performs significantly faster as indicated by the benchmark performance.
  - Modifies the original array in place, which can save memory if the goal is simply to empty the array.
- **Cons**:
  - As it mutates the original array, any references to the original array will see the changes.

#### 2. Slice Method:
- **Pros**:
  - Does not mutate the original array, which can be beneficial when the original array needs to be preserved.
- **Cons**:
  - Slower than the `while` loop approach in this benchmark.
  - Creates a new array that occupies additional memory, which can be a drawback if performance and resource usage are critical.

### Other Considerations

- **Performance Context**: The benchmark results can vary based on the JavaScript engine (V8 in Chrome here) and the environment (browser and OS).
- **Application Use Cases**: 
  - The `while` loop is suitable for scenarios where the original array is no longer needed and performance is the priority.
  - The `slice()` approach might be preferred when the integrity of the original data is paramount and the overhead of creating a new array is acceptable.
  
### Alternatives

Beyond the two methods tested in the benchmark, there are other approaches to removing all elements from an array:

- **Setting Length to Zero**:
  ```javascript
  items.length = 0;
  ```
  - This method directly sets the array's length to zero, quickly emptying it. It is generally fast and does not create a new array.
  
- **Splice Method**:
  ```javascript
  items.splice(0, items.length);
  ```
  - This method removes elements from the array starting from index 0 up to its current length. However, it is generally slower and has a more complex implementation than the other methods.

Each method has its pros and cons, and the right choice depends on the specific situation and requirements regarding performance, memory usage, and the need to preserve original data.

Related benchmarks:

array slice vs while loop (to empty array) (version: 1)

Comparing performance of: While vs slice

Created: one year ago by: Guest

Jump to the latest result

While

slice

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated one year ago):