Benchmark: Clone and append to beginning of array

Clone and append to beginning of array (version: 0)

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

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

Created: one year ago by: Registered User

Jump to the latest result

Script Preparation code:

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

Tests:

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

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

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

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; rv:128.0) Gecko/20100101 Firefox/128.0

Browser/OS: Firefox 128 on Windows

View result in a separate tab

Test name	Executions per second
Array.prototype.toSpliced	18843596.0 Ops/sec
Array.prototype.slice + Array.prototype.unshift	15991052.0 Ops/sec
Spread operator	20711536.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and explain what's being tested, compared, and its pros and cons.

**Benchmark Definition**

The benchmark is designed to compare three approaches for cloning and appending an element to the beginning of an array:

1. `Array.prototype.toSpliced()`
2. `Array.prototype.slice()` + `Array.prototype.unshift()`
3. The spread operator (`...`)

**What's being tested?**

Each test case measures the performance of a specific approach for cloning and appending an element to the beginning of an array.

* `Array.prototype.toSpliced()` tests the new method introduced in ECMAScript 2022, which allows splicing multiple elements at once.
* `Array.prototype.slice()` + `Array.prototype.unshift()` tests a more traditional approach using the `slice()` method to create a copy and then appending the element using `unshift()`.
* The spread operator (`...`) tests creating a new array by spreading the original array's elements.

**Comparison**

The benchmark compares these three approaches, likely to determine which one is the fastest and most efficient.

**Pros and Cons of each approach:**

1. **`Array.prototype.toSpliced()`**:
	* Pros: Efficient, simple syntax.
	* Cons: New method (not widely supported), may not work as expected in older browsers or environments.
2. **`Array.prototype.slice()` + `Array.prototype.unshift()`**:
	* Pros: Widely supported, works across most browsers and environments.
	* Cons: More verbose syntax, potentially slower due to the extra method calls.
3. **Spread operator (`...`)**:
	* Pros: Modern syntax, efficient, and widely supported.
	* Cons: May not be compatible with older browsers or environments.

**Library usage**

None of the approaches rely on external libraries.

**Special JavaScript features or syntax**

The spread operator (`...`) is a modern JavaScript feature introduced in ECMAScript 2015. It's a shorthand way to create a new array by spreading elements from an existing array.

**Other alternatives**

There may be other ways to clone and append an element to the beginning of an array, such as using `Array.prototype.concat()` or creating a new array manually with `new Array(array.length + 1)`. However, these approaches are likely not being tested in this benchmark.

Related benchmarks: