Benchmark: Array.from vs for...of vs [...]

Script Preparation code:

var array = new Array(10000);
array[0]='a';
array[array.length-1]='z';

Tests:

Array.from
var from = Array.from(array);
for
var arrayFor = []; for (const e of array) { arrayFor.push(e); }
spread
var arraySpread =[...array]

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.from
for
spread

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:132.0) Gecko/20100101 Firefox/132.0

Browser/OS: Firefox 132 on Windows

View result in a separate tab

Test name	Executions per second
Array.from	3158.1 Ops/sec
for	3223.5 Ops/sec
spread	3064.6 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 JSON and explain what is being tested, along with the pros and cons of different approaches.

**Benchmark Description**

The benchmark measures the performance of three ways to create an array from a given array:

1. `Array.from()`
2. `for...of` loop
3. Array spread syntax (`[...]`)

**Script Preparation Code**

The script preparation code creates a large array with 10,000 elements and sets two specific elements (`array[0] = 'a'` and `array[array.length-1] = 'z'`). This is done to ensure that all three methods being tested create an array with the same structure.

**Html Preparation Code**

There is no HTML preparation code provided, which means that the benchmark only measures the performance of the JavaScript code itself.

**Individual Test Cases**

Each test case defines a specific benchmark definition using one of the three methods. The test cases are:

1. `Array.from`: Creates an array from the prepared array.
2. `for`: Uses a `for...of` loop to create a new array by pushing elements from the original array.
3. `spread`: Uses the Array spread syntax (`[...]`) to create a new array from the original array.

**Library Used**

None of the test cases use any external libraries, which means that the benchmark is only measuring the performance of the built-in JavaScript methods.

**Special JS Features or Syntax**

The benchmark uses the `for...of` loop, which is a modern JavaScript feature introduced in ECMAScript 2015. The Array spread syntax (`[...]`) is also a relatively new feature introduced in ECMAScript 2018.

**Pros and Cons of Different Approaches**

Here are some pros and cons of each approach:

* `Array.from()`:
	+ Pros: Efficient and concise way to create an array.
	+ Cons: Can be slower than other methods for small arrays.
* `for...of` loop:
	+ Pros: Easy to understand and implement, can be faster than `Array.from()` for large arrays.
	+ Cons: Requires more memory allocations and iterations compared to `Array.from()`.
* Array spread syntax (`[...]`):
	+ Pros: Similar efficiency to `Array.from()`, easy to read and write.
	+ Cons: May require additional memory allocations, can be slower than other methods for very large arrays.

**Other Alternatives**

Some alternative approaches could include:

* Using the `map()` method instead of `for...of`: `array.map(e => e)`
* Using a traditional `for` loop with indexing: `var arrayNew = []; var i = 0; while (i < array.length) { arrayNew.push(array[i++]); }`
* Using other libraries or frameworks, such as Lodash or Ramda, which may provide optimized implementations of these methods.

Keep in mind that the performance differences between these approaches can be small and may depend on the specific use case and environment.

Related benchmarks:

Array.from vs for...of vs [...] (version: 0)

Comparing performance of: Array.from vs for vs spread

Created: 4 years ago by: Guest

Jump to the latest result

Array.from

for

spread

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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