Benchmark: Clone and append to array

Script Preparation code:

var array = ["hello", true, 7];
var newElement = "new";

Tests:

Array.prototype.toSpliced
const newArray = array.toSpliced(array.length, 0, newElement);
Spread operator
const newArray = [...array, newElement];
Array.prototype.slice + Array.prototype.push
const newArray = array.slice(); newArray.push(newElement);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.prototype.toSpliced
Spread operator
Array.prototype.slice + Array.prototype.push

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 126 on Windows

View result in a separate tab

Array.prototype.slice + Array.prototype.push

12.7M/s

Spread operator

12.4M/s

Array.prototype.toSpliced

7.4M/s

View exact numbers

Test name	Executions per second
✓ Array.prototype.slice + Array.prototype.push	12,673,347 Ops/sec
Spread operator	12,354,495 Ops/sec
Array.prototype.toSpliced	7,445,254 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks.

**What is being tested?**

The provided JSON represents a benchmark test case for cloning and appending an element to an array in JavaScript. Specifically, it compares three approaches:

1. `Array.prototype.toSpliced()`
2. The spread operator (`...`)
3. Combining `Array.prototype.slice()` with `Array.prototype.push()`

**Options compared:**

The three options being compared are designed to achieve the same result - creating a new array and appending an element to it. However, they have different performance characteristics.

* `toSpliced()`: This method was introduced in ECMAScript 2019 (ES10) as a way to replace the `splice()` method for arrays with at most one element being replaced or inserted.
* Spread operator (`...`): This is a syntax feature introduced in ECMAScript 2015 (ES6) that allows you to create a new array by copying elements from an existing array.
* Combining `Array.prototype.slice()` with `Array.prototype.push()`: This approach involves creating a new array using `slice()` and then appending the element using `push()`.

**Pros and Cons of each approach:**

1. **`toSpliced()`**: Pros:
	* Generally faster than the spread operator, especially for small arrays.
	* Can be more efficient when inserting or replacing multiple elements.
Cons:
	* Requires ECMAScript 2019 (ES10) support.
2. **Spread operator (`...`)**: Pros:
	* Easier to read and write, as it's a concise syntax.
	* Works with all modern browsers, including older versions that don't support `toSpliced()`.
Cons:
	* Can be slower than `toSpliced()` for large arrays due to the overhead of creating a new array.
3. **Combining `Array.prototype.slice()` with `Array.prototype.push()`**: Pros:
	* Works across all browsers and JavaScript engines.
Cons:
	* More verbose code, making it less readable.
	* Can be slower than `toSpliced()` or the spread operator due to the overhead of creating a new array.

**Library usage:**

None of the benchmark test cases use any external libraries.

**Special JS feature/syntax:**

The spread operator (`...`) is a syntax feature introduced in ECMAScript 2015 (ES6). It's not a built-in method, but rather a shorthand way to create a new array by copying elements from an existing array. The `toSpliced()` method is a built-in method introduced in ECMAScript 2019 (ES10).

**Alternatives:**

If you're looking for alternative approaches to cloning and appending an element to an array, consider the following:

* Using `Array.from()`: This method creates a new array from an iterable source, which can be used to clone an existing array.
* Using `Array.push()` with a callback function: This approach involves pushing elements to the end of the array using `push()`, but you can provide a callback function that appends the element.

Keep in mind that these alternatives may have different performance characteristics compared to the options being tested in the benchmark.

Clone and append to array (version: 0)

Compare the new toSpliced() method, the slice() method and the spread operator in cloning and appending an element to array.

Comparing performance of: `Array.prototype.toSpliced vs Spread operator vs Array.prototype.slice + Array.prototype.push`

Created: 2 years ago by: Registered User

Go to the latest result

Array.prototype.toSpliced

Spread operator

Array.prototype.slice + Array.prototype.push

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Clone and append to array (version: 0)

Compare the new toSpliced() method, the slice() method and the spread operator in cloning and appending an element to array.

Comparing performance of: Array.prototype.toSpliced vs Spread operator vs Array.prototype.slice + Array.prototype.push

Created: 2 years ago by: Registered User

Go to the latest result

Array.prototype.toSpliced

Spread operator

Array.prototype.slice + Array.prototype.push

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

Comparing performance of: `Array.prototype.toSpliced vs Spread operator vs Array.prototype.slice + Array.prototype.push`