Benchmark: shift and push vs slice

Script Preparation code:

// obj from https://dev.to/saritchaethudis/working-with-complex-objects-in-javascript-the-friendly-beginners-guide-clh
var obj1 = {
    artPieces: [{
            pieceName: "Emo Flamingos",
            price: 30,
            ownerList: [{
                    name: "Fida Ernest",
                    userID: 23849,
                    purchaseDate: "09/13/2021",
                },
                {
                    name: "Eric Karger",
                    userID: 23510,
                    purchaseDate: "09/13/2021",
                },
            ],
        },
        {
            pieceName: "Where is my bit wallet",
            price: 100,
            ownerList: [],
        },
    ],
    storeCredits: 1000,
};

var obj2 = {
    name: "Rose Daniel",
    userID: 23849,
    purchaseDate: "11/29/2021",
};

var arr = [obj1, obj2, obj1, obj2, obj1, obj2, obj1, obj2, obj1, obj2, obj1, obj2, obj1, obj2, obj1, obj2, obj1, obj2];

Tests:

spread shift and push
let result = [...arr]; result.shift(); result.push(obj1);
slice spread and append
let result = [...arr.slice(1), obj1];
slice and push
let result = arr.slice(1); result.push(obj1);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
spread shift and push
slice spread and append
slice and push

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 110 on Windows

View result in a separate tab

Test name	Executions per second
spread shift and push	4893676.0 Ops/sec
slice spread and append	4391829.5 Ops/sec
slice and push	4764604.0 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 benchmark and its results for you.

**Benchmark Definition**

The benchmark tests three different approaches to modify an array:

1. **`let result = [...arr]; result.shift(); result.push(obj1);`**: This approach uses the spread operator (`...`) to create a new array, shifts the first element off the end of the original array, and then pushes a new object onto the end.
2. **`let result = [...arr.slice(1), obj1];`**: This approach uses the `slice()` method to extract a subset of elements from the original array, creates a new array by spreading the slice, and then appends a new object to the end.
3. **`let result = arr.slice(1); result.push(obj1);`**: This approach uses `slice()` to extract a subset of elements from the original array, and then pushes a new object onto the end.

**Options Compared**

The benchmark compares the performance of these three approaches:

* **Spread operator (`...`) vs. slicing and pushing**
* **Slicing followed by pushing vs. pushing after slicing**

**Pros and Cons**

1. **Spread Operator**:
	* Pros: Creates a shallow copy of the array, avoiding mutating the original data.
	* Cons: Can be slower than slicing for large arrays due to the overhead of creating a new array.
2. **Slicing followed by Pushing**:
	* Pros: Allows for direct access to the elements in the slice, which can be faster than using the spread operator.
	* Cons: Requires an extra step (slicing) and creates a shallow copy of the slice.
3. **Pushing after Slicing**:
	* Pros: Avoids creating a new array by slicing, as it only adds one element to the original array.
	* Cons: May not be compatible with certain data structures or libraries that rely on immutability.

**Library and Special JS Features**

There are no explicit libraries mentioned in the benchmark definition. However, the use of the spread operator (`...`) is a modern JavaScript feature introduced in ECMAScript 2015 (ES6).

**Test Case Considerations**

The test cases aim to isolate the performance differences between these three approaches. By using different methods to create and modify the array, the benchmark can accurately measure the overhead of each approach.

**Alternatives**

Other alternatives for modifying arrays include:

* Using `concat()` instead of the spread operator.
* Using a library like Lodash's `assignIn()` method to avoid creating a new array.
* Using `Array.prototype.forEach()` or `Array.prototype.map()` with callback functions to iterate over the elements.

Keep in mind that the choice of approach depends on the specific use case, data structure, and performance requirements.

Related benchmarks:

shift and push vs slice (version: 0)

Comparing performance of: spread shift and push vs slice spread and append vs slice and push

Created: one year ago by: Guest

Jump to the latest result

spread shift and push

slice spread and append

slice and push

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