Benchmark: array.form vs spread concat

Tests:

array.from
const a = [2, 1, 4, 3]; console.log(a); let b = Array.from(a).sort(); console.log(b); console.log(a)
spread
const a = [2, 1, 4, 3]; console.log(a); let b = [...a].sort(); console.log(b); console.log(a)

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:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

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 its test cases.

**What is being tested?**

The benchmark is comparing two ways to create a new array from an existing one:

1. Using `Array.from()`
2. Using the spread operator (`...`)

In both cases, the original array is created using square brackets `[]`, followed by some elements: `[2, 1, 4, 3]`. Then, either `Array.from()` or the spread operator is used to create a new array from this one. The resulting arrays are logged to the console.

**Options compared**

The two options being compared are:

* `Array.from()`: This method creates a new array by parsing an iterable (like an array) and returns it as a new array.
	+ Pros: It's a more explicit way of creating a new array from an existing one, which can be helpful for readability.
	+ Cons: It might be slower than the spread operator because it involves an extra step of parsing the iterable.
* Spread operator (`...`): This is shorthand for creating a new array by spreading elements of an existing array or array-like object.
	+ Pros: It's often faster and more concise than `Array.from()`.
	+ Cons: It can be less readable if not used carefully, as it relies on the spread operator being able to parse the iterable correctly.

**Library usage**

Neither `Array.from()` nor the spread operator uses a library explicitly. However, modern JavaScript engines (like V8 in Chrome) have optimized these methods to make them efficient and comparable.

**Special JS feature or syntax**

There's no special JavaScript feature or syntax used in this benchmark beyond what's mentioned above.

**Benchmark preparation code**

The script preparation code is empty (`null`), which means the benchmark doesn't perform any setup or teardown before running each test case. This can be a good choice when the focus is on comparing the performance of different methods.

**Other alternatives**

If you wanted to compare other ways of creating arrays, some alternatives could include:

* Using `Array.prototype.slice()`: Creates a shallow copy of an array using the slice method.
* Using `Array.prototype.reduce()`: Creates a new array by reducing an existing array (using the reduce method).
* Using `Array.from()` with a different type of iterable (like an object or a set).

However, these alternatives might not be as common or efficient as `Array.from()` and the spread operator.

In terms of performance, `Array.from()` is generally faster than the spread operator because it uses the `length` property to determine the size of the new array, which can be optimized by the engine. The spread operator, on the other hand, relies on the engine's ability to parse the iterable correctly and create a new array.

The benchmark results show that Chrome 104 performed slightly better for the spread operator (`ExecutionsPerSecond`: 20756.318359375 vs `Array.from()`: 19628.8828125). However, this might be due to various factors like engine optimizations or differences in how each method is implemented.

Related benchmarks:

array.form vs spread concat (version: 0)

array.form vs spread concat

Comparing performance of: array.from vs spread

Created: 3 years ago by: Guest

Jump to the latest result

array.from

spread

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

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