Benchmark: Array.prototype.slice vs spread operator vs Array.from long mixed array

Script Preparation code:

var mixedArray = [];
for (let i = 0; i < 333; i++) {
    mixedArray.push("hello", true, 7);
}

Tests:

Array.prototype.slice
var other = mixedArray.slice();
spread operator
var other = [ ...mixedArray ]
Array.from
var other = Array.from(mixedArray);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.prototype.slice
spread operator
Array.from

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/111.0.0.0 Safari/537.36 Edg/111.0.1661.62

Browser/OS: Chrome 111 on Linux

View result in a separate tab

Test name	Executions per second
Array.prototype.slice	4885315.0 Ops/sec
spread operator	4698319.0 Ops/sec
Array.from	2253319.5 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down what's being tested in the provided JSON.

**Benchmark Definition**

The benchmark is designed to compare three different approaches for creating a shallow copy of an array with mixed data types:

1. `Array.prototype.slice()`
2. The new ES6 spread operator (`...`)
3. `Array.from()`

**Options Compared**

Each option is compared in terms of execution speed, measured in executions per second.

**Pros and Cons of Each Approach**

1. **`Array.prototype.slice()`**:
	* Pros: Widely supported, easy to use.
	* Cons: Creates a shallow copy of the original array, which may not be suitable for all use cases.
2. **Spread Operator (`...`)**
	* Pros: Fast and efficient, creates a new array with all the elements from the original array.
	* Cons: Requires ES6 support, might be slower in older browsers or environments.
3. **`Array.from()`**:
	* Pros: Fast and efficient, creates a new array with all the elements from the original array.
	* Cons: May require more memory than `slice()` since it creates a new array, and not all browsers support its latest versions.

**Library Used**

None explicitly mentioned in the provided JSON. However, it's likely that the benchmark uses built-in JavaScript functions or polyfills to ensure compatibility with older browsers.

**Special JS Feature/Syntax**

None mentioned in the provided JSON. The spread operator is a standard ES6 feature and `Array.from()` is widely supported.

**Other Alternatives**

If these three approaches are not suitable, other alternatives for creating shallow copies of arrays include:

1. `Array.prototype.slice.call()`
2. `Array.prototype.map()`

However, these alternatives might be slower or less efficient than the benchmark's current options.

Now that we've analyzed the JSON, let's move on to discussing how to prepare and run this benchmark using MeasureThat.net.

Related benchmarks:

Array.prototype.slice vs spread operator vs Array.from long mixed array (version: 0)

Compare the new ES6 spread operator with the Array.prototype.slice method and Array.from

Comparing performance of: Array.prototype.slice vs spread operator vs Array.from

Created: one year ago by: Guest

Jump to the latest result

Array.prototype.slice

spread operator

Array.from

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