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];

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: 18 days ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:149.0) Gecko/20100101 Firefox/149.0

Browser/OS: Firefox 149 on Mac OS X 10.15

View result in a separate tab

Test name	Executions per second
Array.from	379763.2 Ops/sec
Spread	383992.5 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

Related benchmarks:

Array.from vs Spread (version: 0)

Comparing performance of: Array.from vs Spread

Created: 8 years ago by: Guest

Jump to the latest result

Array.from

Spread

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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