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: one year 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

Test name	Executions per second
Array.prototype.toSpliced	7445254.0 Ops/sec
Spread operator	12354495.0 Ops/sec
Array.prototype.slice + Array.prototype.push	12673347.0 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.

Related benchmarks:

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: one year ago by: Registered User

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