Benchmark: fixed array slice VS splice VS pop - adding new elements to start

Script Preparation code:

var list = [];
for (let i = 0; i < 1000; i++) {
  list.unshift({'s':'usd', 'p':i});
}

Tests:

slice
list.unshift({'s':'cad', 'p':13}) list.unshift({'s':'cad', 'p':14}) list.unshift({'s':'cad', 'p':15}) list = list.slice(0,1000)
splice
list.unshift({'s':'cad', 'p':13}) list.unshift({'s':'cad', 'p':14}) list.unshift({'s':'cad', 'p':15}) list.splice(1000,list.length-1000)
while-pop
list.unshift({'s':'cad', 'p':13}) list.unshift({'s':'cad', 'p':14}) list.unshift({'s':'cad', 'p':15}) while(list.length>1000){ list.pop(); }
for-pop
list.unshift({'s':'cad', 'p':13}) list.unshift({'s':'cad', 'p':14}) list.unshift({'s':'cad', 'p':15}) for(let i=0; i<(list.length-998); i++){ list.pop(); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
slice
splice
while-pop
for-pop

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 4 days 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
slice	1118177.0 Ops/sec
splice	123515.0 Ops/sec
while-pop	105294.5 Ops/sec
for-pop	101790.7 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks on MeasureThat.net!

**Benchmark Overview**

The benchmark measures the performance difference between three approaches: using `slice()`, `splice()`, and two variations of `pop()` (while-loop and for-loop) when adding new elements to an array at the beginning. The test case uses a JavaScript array, which is created with 1000 elements.

**Options Compared**

1. **`slice()`**: A method that creates a shallow copy of a portion of an array.
2. **`splice()`**: A method that inserts or removes elements from an array.
3. **`while-loop pop()`**: Uses a while loop to repeatedly remove elements from the end of the array until it reaches the desired length (1000 in this case).
4. **`for-loop pop()`**: Uses a for loop to repeatedly remove elements from the end of the array until it reaches the desired length (1000 in this case).

**Pros and Cons**

1. **`slice()`**:
	* Pros: Creates a shallow copy of a portion of an array, which can be more efficient than modifying the original array.
	* Cons: May not be suitable for large arrays due to memory allocation overhead.
2. **`splice()`**:
	* Pros: Modifies the original array in-place, making it more suitable for large arrays.
	* Cons: Can be slower than `slice()` for smaller arrays due to the overhead of modifying the array.
3. **`while-loop pop()`**:
	* Pros: Repeats removal from the end of the array efficiently, without creating a new array or modifying the original one.
	* Cons: May not be suitable for large arrays since it involves repeated operations on the same data structure.
4. **`for-loop pop()`**:
	* Pros: More readable and maintainable than using a while loop, making it easier to understand what's happening.
	* Cons: Similar to `while-loop pop()`, may not be efficient for very large arrays due to repeated removal operations.

**Library Usage**

None mentioned in the provided benchmark definition. However, keep in mind that if any libraries are used in other parts of the codebase, they may impact performance as well.

**Special JS Features/Syntax**

No special JavaScript features or syntax are explicitly used in this benchmark. The test cases focus solely on the `slice()`, `splice()`, and `pop()` methods, making it a straightforward example for comparing their performance.

**Other Alternatives**

If you're looking for alternatives to these methods:

1. **`concat()`**: A method that creates a new array by concatenating two or more arrays.
2. **`Array.prototype.slice.call()`**: Similar to `slice()`, but can be used with non-array objects as well (though not recommended).
3. **`Array.prototype.splice()`**: Similar to the built-in `splice()` method, but also allows for specifying start and end indices.
4. **`Array.prototype.reduce()`**: A method that applies a callback function to each element in an array, reducing it to a single output value.

In conclusion, MeasureThat.net's benchmark provides valuable insights into the performance differences between various methods for adding elements to an array at the beginning. Understanding these options and their trade-offs can help you make informed decisions when choosing an approach in your own JavaScript projects.

Related benchmarks:

fixed array slice VS splice VS pop - adding new elements to start (version: 3)

Comparing performance of: slice vs splice vs while-pop vs for-pop

Created: 3 years ago by: Registered User

Jump to the latest result

slice

splice

while-pop

for-pop

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):