Benchmark: Array.from vs Spread Arrays

Script Preparation code:

var foo = [];
for(var i=0;i<1000;i++) {
  foo.push(i);
}

Tests:

Array.from
const other = Array.from(foo);
Spread
const other = [...foo];

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.from
Spread

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (X11; Linux x86_64; rv:144.0) Gecko/20100101 Firefox/144.0

Browser/OS: Firefox 144 on Linux

View result in a separate tab

Test name	Executions per second
Array.from	58595.3 Ops/sec
Spread	70941.7 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 is being tested.

**Benchmark Overview**

The benchmark compares two approaches to create an array from another array: `Array.from` and the spread operator (`...`). Both methods are compared on a sample dataset of 1000 elements, where each element is pushed onto an array named `foo`.

**Options Compared**

There are two options being compared:

1. **Array.from**: This method creates a new array by mapping over an iterable (in this case, the `foo` array) and converts it into an array.
2. **Spread Operator (`...`)**: This syntax creates a new array by spreading elements from another array.

**Pros and Cons**

Both methods have their pros and cons:

* **Array.from**:
	+ Pros: More explicit and controlled way to create an array, can handle iterables with different types of elements.
	+ Cons: May be slower due to the overhead of mapping over the iterable.
* **Spread Operator (`...`)**:
	+ Pros: More concise and readable syntax, faster execution since it avoids the overhead of mapping.
	+ Cons: Less explicit and controlled way to create an array, may not handle iterables with different types of elements.

In general, `Array.from` is a safer choice when you need more control over the creation process, while the spread operator is a good option when readability and performance are prioritized.

**Library Used**

The benchmark uses the JavaScript built-in `Array.from()` function to create an array from another array. The purpose of this function is to provide a concise way to create arrays from iterables, making it easier to work with data in modern web applications.

**Special JS Feature or Syntax**

There are no special JS features or syntax mentioned in the benchmark. However, it's worth noting that the spread operator (`...`) is a relatively recent addition to JavaScript, introduced in ECMAScript 2015 (ES6).

**Other Alternatives**

Other alternatives for creating arrays from iterables include:

* `Array.prototype.slice()`: Creates a shallow copy of an array by slicing the original array.
* `Array.prototype.concat()`: Concatenates multiple arrays into one.

However, these methods are generally slower and less concise than `Array.from()` or the spread operator.

Related benchmarks:

Array.from vs Spread Arrays (version: 0)

Comparing performance of: Array.from vs Spread

Created: 6 years ago by: Guest

Jump to the latest result

Array.from

Spread

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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