Benchmark: Array.from vs Spread

Tests:

Array.from
var fooSet = new Set(); for(var i=0;i<100;i++) { fooSet.add(i); } var other = Array.from(fooSet);
Spread
var fooSet = new Set(); for(var i=0;i<100;i++) { fooSet.add(i); } var other = [...fooSet];

Historical Performance Data aggregated from 650 community runs

Desktop Results:

Chrome 470 runs

Spread

657K/s

Array.from

634K/s

View exact numbers

✓ Spread: 657,176 ops/sec
• Array.from: 634,247 ops/sec

Firefox 130 runs

Array.from

202K/s

Spread

200K/s

View exact numbers

✓ Array.from: 201,947 ops/sec
• Spread: 199,797 ops/sec

Safari 22 runs

Array.from

459K/s

Spread

443K/s

View exact numbers

✓ Array.from: 459,129 ops/sec
• Spread: 443,078 ops/sec

Other 14 runs

Array.from

445K/s

Spread

405K/s

View exact numbers

✓ Array.from: 445,074 ops/sec
• Spread: 405,190 ops/sec

Mobile Results:

Chrome 14 runs

Spread

217K/s

Array.from

202K/s

View exact numbers

✓ Spread: 216,702 ops/sec
• Array.from: 202,132 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

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:

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

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

Browser/OS: Chrome 148 on Mac OS X 10.15.7

View result in a separate tab

Spread

756K/s

Array.from

750K/s

View exact numbers

Test name	Executions per second
✓ Spread	756,450 Ops/sec
Array.from	750,269 Ops/sec

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

LLMs can make mistakes. Check important info.

Measuring the performance of JavaScript arrays is an essential task for many developers and researchers.

**What is being tested?**

In this benchmark, two approaches are compared: `Array.from()` and the spread operator (`...`).

The test creates an array with 100 elements using a `Set`, which is then passed to both methods. The resulting arrays from each method are then compared.

**Options compared:**

1. **`Array.from()`**: This method creates a new, shallow-copied array from an iterable (in this case, the set). It's a convenient way to create arrays from various sources.
2. **Spread operator (`...`)**: This is a syntactic sugar for creating an array by spreading its elements.

**Pros and Cons of each approach:**

1. **`Array.from()`**:
	* Pros:
		+ More explicit and predictable behavior.
		+ Less prone to errors due to the iterative nature of the method.
	* Cons:
		+ May be slower than the spread operator, as it involves creating a new array.
2. **Spread operator (`...`)**:
	* Pros:
		+ Faster execution, as it leverages the existing internal implementation of arrays.
	* Cons:
		+ Less explicit and more prone to errors, especially when dealing with non-iterable sources.

**Other considerations:**

1. **Type of iterable**: The spread operator may not work correctly for certain types of iterables, such as `Set` or `Map`.
2. **Performance variation**: The performance difference between the two methods can vary depending on factors like browser version, device platform, and operating system.
3. **Code readability**: While the spread operator can be more concise, it may not always be easier to understand than `Array.from()`.

**Library used:**

None explicitly mentioned in this benchmark.

**Special JS feature/syntax:**

The spread operator (`...`) is a relatively recent addition to JavaScript (introduced in ES6). It's an example of a new syntax introduced by modern JavaScript implementations.

**Benchmark preparation code and HTML Preparation Code:**

No specific code changes are necessary for this benchmark. The test simply creates a `Set` with 100 elements, converts it to both arrays using the spread operator and `Array.from()`, and measures their performance.

**Alternatives:**

Other methods to create arrays from an iterable include:

* Using `slice()` or `subarray()` (both of which return new arrays)
* Creating an array from an array expression (e.g., `[...arr]`)
* Using libraries like Lodash's `from` function

Array.from vs Spread (version: 0)

Comparing performance of: `Array.from vs Spread`

Created: 9 years ago by: Guest

Go to the latest result

Array.from

Spread

Historical Performance Data aggregated from 650 community runs

Desktop Results:

Chrome 470 runs

Firefox 130 runs

Safari 22 runs

Other 14 runs

Mobile Results:

Chrome 14 runs

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 vs Spread

Created: 9 years ago by: Guest

Go to the latest result

Array.from

Spread

Historical Performance Data aggregated from 650 community runs

Desktop Results:

Chrome 470 runs

Firefox 130 runs

Safari 22 runs

Other 14 runs

Mobile Results:

Chrome 14 runs

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 vs Spread`