Benchmark: Array.from() vs Spread operator

HTML Preparation code:

<script>
    const ArrayTemplate = Array.from(Array(100000).keys())
</script>

Tests:

Array.from()
const copy = Array.from(ArrayTemplate);
Array.prototype.slice()
const copy = ArrayTemplate.slice()
Spread operator
const copy = [...ArrayTemplate]

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

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

Fastest: N/A

Slowest: N/A

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and explain what's being tested.

**Benchmark Overview**

The benchmark compares the performance of three different methods for duplicating an array:

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

These methods are used to create a copy of an array, which is a common operation in JavaScript programming.

**Options Compared**

Each test case compares the performance of one specific method against others. This means that for each test case, there's a baseline (the "best" or most optimized implementation), and then another two alternatives being tested (in this case, `Array.prototype.slice()` and another spread operator implementation).

Pros and Cons:

* **Baseline: Spread Operator** (`const copy = [...ArrayTemplate];`)

Pros:
	+ Most concise and readable way to create an array copy.
	+ Often the most efficient method for small arrays.

Cons:
	+ May not be as performant for large arrays due to its overhead.
* **Alternative 1: `Array.prototype.slice()`** (`const copy = ArrayTemplate.slice();`)

Pros:
	+ Generally faster than spread operator for large arrays, since it avoids creating a new array and instead creates a new reference to the original array.

Cons:
	+ Can be less readable due to its syntax.
* **Alternative 2: `Array.from()`** (`const copy = Array.from(ArrayTemplate);`)

Pros:
	+ Generally faster than spread operator for large arrays, since it avoids creating a new array and instead creates a new iterator.
	+ More concise than `slice()`.

Cons:
	+ May have higher overhead due to its use of an iterator.

**Library and Purpose**

None of the test cases explicitly uses any external libraries. However, all three methods (`Array.prototype.slice()`, `Array.from()`, and spread operator) rely on JavaScript's built-in array and iterator mechanisms.

**Special JS Feature or Syntax**

The benchmark does not explicitly mention any special JavaScript features or syntax that would affect its interpretation.

**Other Alternatives**

For creating an array copy, other alternatives might include:

* `Array.prototype.concat()`
* Using a library like Lodash's `cloneDeep()` function

However, these methods are generally less efficient and more verbose than the three methods being compared in this benchmark.

In summary, this benchmark provides a simple yet informative comparison of three different methods for duplicating an array: spread operator, `Array.prototype.slice()`, and `Array.from()`. By understanding the trade-offs between each approach, developers can choose the most suitable method for their specific use cases.

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/115.0.0.0 Safari/537.36

Browser/OS: Chrome 115 on Windows

View result in a separate tab

Test name	Executions per second
Array.from()	2425.0 Ops/sec
Array.prototype.slice()	2390.8 Ops/sec
Spread operator	2235.1 Ops/sec

Related benchmarks:

Array.from() vs Spread operator (version: 0)

Array.from() vs Array.prototype.slice() vs Spread operator for duplicating an array.

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

Created: one year ago by: Guest

Jump to the latest result

Array.from()

Array.prototype.slice()

Spread operator

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