Benchmark: Array.from vs array destructure

Script Preparation code:

var arr = Array(10000).fill(null).map((_, index) => index);

Tests:

Arra.from
const newArr1 = Array.from(arr)
array destructure
const newArr2 = [...arr]

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Arra.from
array destructure

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 10 months ago)

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

Browser/OS: Chrome 121 on Windows

View result in a separate tab

Test name	Executions per second
Arra.from	347510.4 Ops/sec
array destructure	284305.5 Ops/sec

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

LLMs can make mistakes. Check important info.

**Benchmark Overview**

The provided benchmark, "Array.from vs array destructure", measures the performance difference between two approaches to create a new array from an existing one: `Array.from()` and array destructuring (`...arr`).

**Test Case Explanation**

The test case consists of two individual tests:

1. **Array.from**: This test creates a new array by calling `Array.from(arr)`, where `arr` is an array with 10,000 null elements.
2. **Array Destructure**: This test uses the syntax `[...arr]` to create a new array from the original `arr`.

**Options Comparison**

Both approaches have their pros and cons:

* **Array.from()**:
	+ Pros: more explicit, readable, and maintainable code; allows for custom mapping functions.
	+ Cons: may incur additional overhead due to function call and creation of an intermediate array.
* **Array Destructure (`...arr`)**:
	+ Pros: concise, expressive, and efficient (since it avoids creating a new array).
	+ Cons: less readable for developers unfamiliar with this syntax; may lead to silent errors if not used correctly.

**Library and Syntax**

No external libraries are mentioned in the benchmark, so we'll focus on built-in JavaScript features. However, note that some browsers might have additional features or polyfills enabled that could affect performance.

**Special JS Feature**

The test case uses a modern JavaScript syntax: array destructuring (`[...arr]`). This feature allows for creating new arrays from existing ones without explicitly calling `Array.from()`. The syntax is concise and expressive but may not be supported in older browsers or environments with limited JavaScript support.

**Other Considerations**

When choosing between these two approaches, consider the trade-off between code readability, maintainability, and performance:

* Use `Array.from()` when you need a more explicit and readable way to create a new array, such as when working with large datasets or custom mapping functions.
* Use array destructuring (`[...arr]`) when you want a concise, efficient way to create a new array from an existing one. However, be mindful of potential silent errors if not used correctly.

**Alternative Approaches**

Other alternatives for creating a new array include:

1. **`slice()`**: `var newArr = arr.slice(0);`
2. **`map()`**: `var newArr = arr.map((item) => item);`
3. **`reduce()`**: `var newArr = arr.reduce((acc, item) => acc.concat(item), []);`
4. **Native Array methods** (e.g., `Array.prototype.slice()`, `Array.prototype.map()`, etc.)

Keep in mind that each of these alternatives has its own trade-offs and may perform differently depending on the specific use case and environment.

Related benchmarks:

Array.from vs array destructure (version: 0)

Comparing performance of: Arra.from vs array destructure

Created: 10 months ago by: Guest

Jump to the latest result

Arra.from

array destructure

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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