Benchmark: Array.prototype.slice vs Array.from

HTML Preparation code:

<div class="a"></div>
<div class="a"></div>
<div class="a"></div>
<div class="a"></div>
<div class="a"></div>
<div class="a"></div>
<div class="a"></div>

Script Preparation code:

var a = document.getElementsByClassName('a');

Tests:

Array.prototype.slice
var other = Array.prototype.slice.call(a);
Array.from
var other = Array.from(a);
Spread operator
var other = [...a];

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

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

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 4 months ago)

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

Browser/OS: Chrome 143 on Windows

View result in a separate tab

Test name	Executions per second
Array.prototype.slice	1256661.6 Ops/sec
Array.from	933282.6 Ops/sec
Spread operator	1123189.1 Ops/sec

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

LLMs can make mistakes. Check important info.

**Overview**

The provided JSON represents a benchmark test case on MeasureThat.net, which compares the performance of three JavaScript approaches: `Array.prototype.slice`, `Array.from`, and the spread operator (`...`).

**Benchmarked Approaches**

1. **`Array.prototype.slice()`**: This method creates a shallow copy of an array by specifying a start index and an optional end index.
2. **`Array.from()`**: This method creates a new array from an iterable or an array-like object.
3. **Spread operator (`...`)**: This syntax creates a new array by spreading the elements of an existing array.

**Options Compared**

The benchmark tests each approach against the others, allowing users to compare their performance in different scenarios.

**Pros and Cons of Each Approach**

1. **`Array.prototype.slice()`**:
	* Pros:
		+ Fastest performance among the three approaches (due to optimized internal implementation)
		+ Most widely supported, as it's a built-in method on all modern browsers
	* Cons:
		+ Can be slower for larger arrays due to the overhead of creating a new array and copying elements
2. **`Array.from()`**:
	* Pros:
		+ More flexible than `slice()`, allowing for more control over the resulting array
		+ Easier to use with iterables or array-like objects
	* Cons:
		+ Slower performance compared to `slice()` due to the overhead of creating a new array and iterating over the source iterable
3. **Spread operator (`...`)**:
	* Pros:
		+ Most concise syntax, making it easier to write and read code
		+ Can be faster than `from()` for large arrays, as it avoids the overhead of creating a new array and copying elements
	* Cons:
		+ Less supported by older browsers (prior to Firefox 57)
		+ May have performance issues with very large arrays due to memory constraints

**Library Usage**

None of the benchmarked approaches rely on external libraries.

**Special JavaScript Features/Syntax**

The spread operator (`...`) is a relatively new feature introduced in ECMAScript 2015. It allows for more concise syntax when creating new arrays, but it's not supported by older browsers.

**Other Alternatives**

If you need to compare performance with other approaches, consider the following alternatives:

* **`Array.prototype.map()`**: This method creates a new array by mapping over an existing array.
* **`Array.prototype.reduce()`**: This method reduces an array to a single value by applying a callback function to each element.

Keep in mind that these approaches may have different performance characteristics and use cases compared to `slice()`, `from()`, and the spread operator.

Related benchmarks:

Array.prototype.slice vs Array.from (version: 0)

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

Created: 7 years ago by: Guest

Jump to the latest result

Array.prototype.slice

Array.from

Spread operator

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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