Benchmark: Array.from VS spreading for

Script Preparation code:

var arr1000    = new Array(1000).fill(0).map((x) => Math.random())
var arr1000000 = new Array(1000000).fill(0).map((x) => Math.random())

Tests:

Array.from (1000 elements)
const valueFromArray = Array.from(arr1000)
spreading (1000 elements)
const valueFromSpreading = [...arr1000]
Array.from (1mil elements)
const valueFromArray = Array.from(arr1000000)
spreading (1mil elements)
const valueFromSpreading = [...arr1000000]

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.from (1000 elements)
spreading (1000 elements)
Array.from (1mil elements)
spreading (1mil elements)

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/123.0.0.0 Safari/537.36

Browser/OS: Chrome 123 on Windows

View result in a separate tab

Test name	Executions per second
Array.from (1000 elements)	77519.3 Ops/sec
spreading (1000 elements)	67710.5 Ops/sec
Array.from (1mil elements)	43.7 Ops/sec
spreading (1mil elements)	13.9 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks.

**Benchmark Overview**

The provided JSON represents a benchmark test case on MeasureThat.net, which compares two approaches to create an array from an existing iterable: `Array.from()` and spreading (using the `...` syntax).

**Options Compared**

Two options are compared:

1. **`Array.from()`**: A method that creates a new array instance from an existing array-like or iterable object.
2. **Spreading**: Using the `...` syntax to spread elements of an array into a new array.

**Pros and Cons**

* **`Array.from()`**:
	+ Pros: More explicit, readable, and maintainable code; can handle more complex iterables (e.g., `Map`, `Set`, etc.).
	+ Cons: May be slightly slower than spreading due to the overhead of creating a new array instance.
* **Spreading**: 
	+ Pros: Can be faster for simple cases, as it avoids the overhead of creating a new array instance.
	+ Cons: Less readable and maintainable code; may not work correctly with all types of iterables.

**Library Used**

In this benchmark, `Array.from()` is used in its native form, without any additional libraries or dependencies. The spreading syntax relies on the implicit behavior of JavaScript arrays when using the `...` operator.

**Special JS Feature/Syntax**

The `Map`, `Set`, and array-like iterables are not explicitly tested in this benchmark. However, it's worth noting that `Array.from()` is designed to work with these types of iterables, while spreading may not produce the expected results.

**Benchmark Preparation Code**

The provided preparation code creates two large arrays using `new Array().fill(0).map((x) => Math.random())`, which are used to test both approaches. The arrays are generated with a mix of 1000 and 1 million elements.

**Alternative Approaches**

Other approaches to create an array from an iterable include:

* Using the `slice()` method: `arr.slice()`
* Using the `reduce()` method: `arr.reduce((acc, x) => [...acc, x], [])`
* Using a custom loop or recursion
* Using libraries like Lodash's `mapValues()` function

These alternative approaches may offer different trade-offs in terms of performance, readability, and maintainability.

Related benchmarks:

Array.from VS spreading for (version: 0)

Comparing performance of: Array.from (1000 elements) vs spreading (1000 elements) vs Array.from (1mil elements) vs spreading (1mil elements)

Created: 2 years ago by: Guest

Jump to the latest result

Array.from (1000 elements)

spreading (1000 elements)

Array.from (1mil elements)

spreading (1mil elements)

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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