Benchmark: Array.from vs spread vs construct manually 5

Script Preparation code:

var src = Object.keys([...Array(10000)]);

Tests:

Array.from
var z = {}; z.z = Array.from(src[Symbol.iterator]());
manual
var z = {}; let n = src.length; let a = Array(n); let iter = src[Symbol.iterator](); for (let i = 0; i < n; ++i) {a[i] = iter.next().value;}; z.z = a;
spread
var z = {}; z.z = [...(src[Symbol.iterator]())];
manual 2
var z = {}; let a = Array(src.length); let iter = src[Symbol.iterator](); for (let i = 0, obj = iter.next(); !obj.done; obj = iter.next()) { a[i++] = obj.value;}; z.z = a;
manual 3
var z = {}; let n = src.length; let a = Array(n); let iter = src[Symbol.iterator](); for (let i = n - 1; i >= 0; --i) {a[i] = iter.next().value;}; z.z = a;

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.from
manual
spread
manual 2
manual 3

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 27 days ago):

LLMs can make mistakes. Check important info.

**Benchmark Overview**

The provided benchmark measures the performance of three different approaches for creating an array from an iterable source:

1. `Array.from()`
2. Manual iteration using a loop
3. Using the spread operator (`...`)

Each approach has its pros and cons, which are discussed below.

**Approach 1: `Array.from()`**

* **Pros**: concise syntax, efficient and stable.
* **Cons**: may not be as readable for some developers, can be slower than manual iteration in some cases (although this is usually negligible).

`Array.from()` was introduced in ECMAScript 2015 (ES6) as a convenient way to create an array from an iterable source. It takes an iterable object (such as an array, string, or number) and creates a new array containing the values of that iterable.

**Approach 2: Manual iteration**

* **Pros**: can be more readable for some developers, allows for manual control over the loop.
* **Cons**: requires more code than using `Array.from()`, can be slower due to the overhead of the loop.

Manual iteration uses a loop to iterate over the iterable source and populate an array with its values. This approach provides more control over the loop but is generally less concise than using `Array.from()`.

**Approach 3: Using the spread operator (`...`)**

* **Pros**: concise syntax, efficient.
* **Cons**: only supported in ES6+ browsers (including Mobile Safari), may not be as readable for some developers.

Using the spread operator (`...`) creates a new array by spreading the values of an iterable object. This approach is similar to `Array.from()` but uses a more concise syntax.

**Library used**

In this benchmark, none of the approaches use any external libraries. The only library that might be useful in certain cases is `Symbol.iterator`, which is a built-in JavaScript feature for creating iterators. However, it's not necessary to include it in the benchmark since both `Array.from()` and manual iteration can work without it.

**Special JavaScript features or syntax**

The benchmark uses some special JavaScript features:

* The spread operator (`...`) was introduced in ECMAScript 2015 (ES6).
* `Symbol.iterator` is a built-in JavaScript feature for creating iterators, introduced in ECMAScript 2011 (ES6).

No other special JavaScript features or syntax are used in this benchmark.

**Alternatives**

Other alternatives to measure the performance of array creation include:

* Using `Array.prototype.slice()` instead of manual iteration.
* Using `Array.from()` with a custom iterable object that is more complex than a simple array.
* Measuring the performance of other methods for creating arrays, such as using `ArrayBuffer` or `DataView`.
* Comparing the performance of different browsers and versions.

However, these alternatives may not provide meaningful results in this specific benchmark, which focuses on measuring the performance of three straightforward approaches for creating an array from an iterable source.

Latest run results:

Run details: (Test run date: 3 years ago)

User agent: Mozilla/5.0 (iPhone; CPU iPhone OS 14_5_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.1 Mobile/15E148 Safari/604.1

Browser/OS: Mobile Safari 14 on iOS 14.5.1

View result in a separate tab

Test name	Executions per second
Array.from	23475.8 Ops/sec
manual	58181.1 Ops/sec
spread	19024.0 Ops/sec
manual 2	19789.1 Ops/sec
manual 3	59405.0 Ops/sec

Related benchmarks:

Array.from vs spread vs construct manually 5 (version: 2)

Comparing performance of: Array.from vs manual vs spread vs manual 2 vs manual 3

Created: 6 years ago by: Registered User

Jump to the latest result

Array.from

manual

spread

manual 2

manual 3

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 27 days ago):