Benchmark: Array.from() VS Spread

Script Preparation code:

var arr100   = new Array(100).fill(0).map((x) => Math.random())
var arr1000  = new Array(1000).fill(0).map((x) => Math.random())
var arr10000 = new Array(10000).fill(0).map((x) => Math.random())

Tests:

Array.from (100 elements)
const valueFromArray = Array.from(arr100)
spreading (100 elements)
const valueFromSpreading = [...arr100]
Array.from (1000 elements)
const valueFromArray = Array.from(arr1000)
spreading (1000 elements)
const valueFromSpreading = [...arr1000]
Array.from (10000 elements)
const valueFromArray = Array.from(arr10000)
spreading (10000 elements)
const valueFromSpreading = [...arr10000]

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.from (100 elements)
spreading (100 elements)
Array.from (1000 elements)
spreading (1000 elements)
Array.from (10000 elements)
spreading (10000 elements)

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/122.0.0.0 Safari/537.36

Browser/OS: Chrome 122 on Mac OS X 10.15.7

View result in a separate tab

spreading (100 elements)

13.1M/s

Array.from (100 elements)

6.5M/s

spreading (1000 elements)

3.8M/s

Array.from (1000 elements)

2.9M/s

spreading (10000 elements)

566K/s

Array.from (10000 elements)

557K/s

View exact numbers

Test name	Executions per second
✓ spreading (100 elements)	13,146,886 Ops/sec
Array.from (100 elements)	6,528,417 Ops/sec
spreading (1000 elements)	3,790,140 Ops/sec
Array.from (1000 elements)	2,918,783 Ops/sec
spreading (10000 elements)	566,108 Ops/sec
Array.from (10000 elements)	556,984 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, compared, and considered.

**Benchmark Overview**

The provided JSON represents a JavaScript microbenchmark that compares two approaches: `Array.from()` and spreading (`...`).

**Test Cases**

Each test case consists of three parts:

1. **Script Preparation Code**: This code generates large arrays (100, 1000, or 10,000 elements) using the `new Array()` constructor and fills them with random values.
2. **Html Preparation Code**: There is no HTML preparation code provided.
3. **Benchmark Definition**: This defines a test case that runs either an instance of `Array.from()` or an equivalent spreading operation (`...`) on one of the generated arrays.

The six test cases cover different array sizes: 100, 1000, and 10,000 elements.

**What is being tested?**

The primary focus is to compare the execution performance of two approaches:

1. **`Array.from()`**: This method creates a new array by copying elements from an existing iterable (in this case, the generated arrays).
2. **Spreading (`...`)**: This syntax creates a new array by spreading elements from an existing array or other iterable.

**Options compared**

The only option being compared is between `Array.from()` and spreading (`...`). There are no other approaches or alternatives being tested.

**Pros and Cons of each approach:**

1. **`Array.from()`**:
	* Pros:
		+ More explicit and readable syntax.
		+ Can be used with any iterable, not just arrays.
	* Cons:
		+ May incur a slight performance penalty due to the creation of an intermediate array.
2. **Spreading (`...`)**:
	* Pros:
		+ Often more concise and expressive syntax.
		+ Can be faster since it avoids creating an intermediate array.
	* Cons:
		+ Less readable for some developers, especially those unfamiliar with spread syntax.

**Other considerations:**

1. **Browser differences**: The benchmark results show variations in execution speed across different browsers (Chrome 122) and operating systems (Mac OS X 10.15.7). This highlights the importance of considering browser-specific optimizations.
2. **Device platform**: Running on a desktop device versus other platforms might affect performance due to differences in JavaScript engine implementations or hardware capabilities.

**Alternatives:**

There are no alternative approaches being tested in this benchmark. However, it's worth noting that other methods for creating arrays or iterating over existing data structures (e.g., `for...of`, `forEach()`) may have different performance characteristics depending on the specific use case and requirements.

Overall, this benchmark provides a clear comparison between two common JavaScript approaches: `Array.from()` and spreading (`...`). The results can help developers and maintainers better understand their chosen approach's trade-offs in terms of performance and readability.

Array.from() VS Spread (version: 0)

Comparing performance of: `Array.from (100 elements) vs spreading (100 elements) vs Array.from (1000 elements) vs spreading (1000 elements) vs Array.from (10000 elements) vs spreading (10000 elements)`

Created: 2 years ago by: Guest

Go to the latest result

Array.from (100 elements)

spreading (100 elements)

Array.from (1000 elements)

spreading (1000 elements)

Array.from (10000 elements)

spreading (10000 elements)

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Array.from() VS Spread (version: 0)

Comparing performance of: Array.from (100 elements) vs spreading (100 elements) vs Array.from (1000 elements) vs spreading (1000 elements) vs Array.from (10000 elements) vs spreading (10000 elements)

Created: 2 years ago by: Guest

Go to the latest result

Array.from (100 elements)

spreading (100 elements)

Array.from (1000 elements)

spreading (1000 elements)

Array.from (10000 elements)

spreading (10000 elements)

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

Comparing performance of: `Array.from (100 elements) vs spreading (100 elements) vs Array.from (1000 elements) vs spreading (1000 elements) vs Array.from (10000 elements) vs spreading (10000 elements)`