Benchmark: Slice vs Splice insert element to array

Script Preparation code:

var array = []
for (let i = 0; i < 100000; i++) {array.push(i)}
var indexToRemove = 6700
var indexToInsert = 4200

Tests:

insert by join multi sub-array
array = array.slice(0,indexToInsert).concat('meo', array.slice(indexToInsert, indexToRemove), array.slice(indexToRemove+1, array.length))
insert by using splice
array.splice(indexToRemove, 1) array.splice(indexToInsert, 0, 'meo')

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
insert by join multi sub-array
insert by using splice

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/133.0.0.0 Safari/537.36

Browser/OS: Chrome 133 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
insert by join multi sub-array	4034.4 Ops/sec
insert by using splice	64541.8 Ops/sec

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

LLMs can make mistakes. Check important info.

I'll explain the benchmark in detail.

**Benchmark Overview**

The benchmark is designed to compare the performance of two approaches for inserting an element into an array: using `slice` and concatenation, versus using `splice`.

**Script Preparation Code**

The script preparation code creates a large array with 100,000 elements and then sets two indices to remove and insert elements at specific positions. The indices are set as follows:

* Remove index (6700): the element will be removed from the array.
* Insert index (4200): the element "meo" will be inserted into the array.

**Benchmark Definition**

The benchmark definition is a JSON object that contains two test cases:

1. **Insert by join multi sub-array**: This test case uses the `slice` method to create multiple sub-arrays, inserts the element "meo" at the desired index, and then concatenates the sub-arrays back together.
2. **Insert by using splice**: This test case uses the `splice` method to remove one element from the array and then inserts the element "meo" at the desired index.

**Options Compared**

The two options being compared are:

1. Using `slice` with concatenation: this approach creates multiple sub-arrays, inserts the element, and then concatenates them back together.
2. Using `splice`: this approach removes one element from the array and then inserts the element at the desired index.

**Pros and Cons**

Here are some pros and cons of each approach:

* **Using `slice` with concatenation**:
	+ Pros: creates a new copy of the original array, which can be beneficial for certain use cases (e.g., when modifying the original array is not desirable).
	+ Cons: creates multiple sub-arrays, which can lead to higher memory usage and slower performance.
* **Using `splice`**:
	+ Pros: modifies the original array in-place, which can be more efficient than creating a new copy.
	+ Cons: removes one element from the array before inserting the new element, which can lead to unexpected behavior if the index is not correctly calculated.

**Library and Its Purpose**

In this benchmark, the `slice` method is used to create sub-arrays. The `slice` method is a built-in JavaScript method that returns a shallow copy of a portion of an array. It is commonly used to extract a subset of elements from an array.

**Special JS Feature or Syntax**

There are no special JS features or syntax used in this benchmark, except for the use of template literals (e.g., `array.push(i)`), which is a relatively modern feature introduced in ECMAScript 2015 (ES6).

**Other Alternatives**

If you were to implement this benchmark using alternative approaches, some options could be:

1. Using `concat` instead of `slice`: `concat` is another method that creates a new array by concatenating two or more arrays.
2. Using a library like Lodash: Lodash provides various utility methods for working with arrays, including `insertAt`.
3. Using a different data structure, such as a linked list or a tree.

Keep in mind that these alternative approaches may not be directly comparable to the original benchmark, as they may introduce additional overhead or modify the array in ways that are not equivalent to the original implementation.

Related benchmarks:

Slice vs Splice insert element to array (version: 0)

Compares the speed for add/remove 1 items of an array

Comparing performance of: insert by join multi sub-array vs insert by using splice

Created: 2 years ago by: Guest

Jump to the latest result

insert by join multi sub-array

insert by using splice

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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