Benchmark: Array.from vs Array().keys

Script Preparation code:

var n = 1000;

Tests:

Array.from
Array.from(Array(n), (_, i) => i + 1);
Array().keys
[...Array(n).keys()].map(e => e + 1);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.from
Array().keys

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 130 on Windows

View result in a separate tab

Test name	Executions per second
Array.from	37147.2 Ops/sec
Array().keys	35548.0 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 array methods is an essential task for any web developer or performance engineer.

Let's break down what's being tested in this benchmark:

**Benchmark Definition**

The `Name` field indicates that the benchmark compares two different ways to create an array: `Array.from()` and using the `Array().keys()` method. The `Script Preparation Code` provides a variable `n` set to 1000, which is used as the size of the array being created.

**Comparison Options**

There are two comparison options:

1. **`Array.from()`**: This method creates a new array by mapping over an existing array or iterable. It's often preferred because it's more readable and allows for more control over the resulting array.
2. **`Array().keys()`**: This method returns an array of keys from an object (in this case, a simple numerical sequence). It's used here to create an array by mapping over the `Array().keys()` result.

**Pros and Cons**

*   **`Array.from()`**:
    *   Pros: More readable, allows for more control over the resulting array, efficient.
    *   Cons: May be slower than a single array operation if optimized internally (e.g., using a single allocation).
*   **`Array().keys()`**:
    *   Pros: Simple and straightforward, can potentially be faster due to internal optimizations in some browsers.
    *   Cons: Less readable and less flexible compared to `Array.from()`.

**Library**

None are explicitly mentioned in the provided code. However, it's worth noting that neither method requires any external libraries beyond JavaScript core functionality.

**Special JS Feature/Syntax**

There is a notable feature being tested here: template literals (`_ => i + 1`). In modern JavaScript, you can use template literals to create an array by using the spread operator (`...`) on an array of functions. This approach isn't mentioned in the benchmark code but is often used when working with array operations.

**Other Alternatives**

If you want to compare these methods with other approaches:

*   **`Array.prototype.map()`**: While similar to `Array.from()`, this method uses a different internal implementation that may be optimized for performance.
*   **`Array.from()` with a custom mapping function**: Using a separate function within the spread operator (`(...(f) => f())`) allows you to define your own mapping logic. However, this might not always offer better performance than using `Array.from()` directly.

To explore these alternatives and see how different browsers perform on various methods, consider adding more benchmark cases or using online resources like BenchmarkJS.

I hope that helps explain the benchmark and its comparisons!

Related benchmarks:

Array.from vs Array().keys (version: 0)

Comparing performance of: Array.from vs Array().keys

Created: one year ago by: Guest

Jump to the latest result

Array.from

Array().keys

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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