Benchmark: (Small Array.from length vs Array

HTML Preparation code:

<!--your preparation HTML code goes here-->

Script Preparation code:

/*your preparation JavaScript code goes here
To execute async code during the script preparation, wrap it as function globalMeasureThatScriptPrepareFunction, example:*/
async function globalMeasureThatScriptPrepareFunction() {
    // This function is optional, feel free to remove it.
    // await someThing();
}

Tests:

Array.from length
Array.from({length: 100}, (_, i)=>i)
Array from sparse array
Array.from(Array(100), (_, i)=>i)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.from length
Array from sparse array

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.4 Safari/605.1.15

Browser/OS: Safari 18 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Array.from length	4368833.0 Ops/sec
Array from sparse array	1537408.8 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated one year ago):

LLMs can make mistakes. Check important info.

In this benchmark defined on MeasureThat.net, two different approaches for generating arrays in JavaScript are compared using the `Array.from()` method. The tests aim to evaluate the performance of creating an array with a specific length versus creating an array from a sparse array. Below are the details of each approach, their pros and cons, and considerations for software engineers.

### Test Cases

1. **Array.from({length: 100}, (_, i) => i)**
   - **Test Name**: Array.from length
   - **Description**: This test uses the `Array.from` method to create an array of length 100 by passing an object with a `length` property. The second argument is a mapping function that fills the array with values from 0 to 99.
   - **Performance Result**: In the provided benchmark results, this approach achieved an execution rate of approximately 4,368,833 executions per second.

2. **Array.from(Array(100), (_, i) => i)**
   - **Test Name**: Array from sparse array
   - **Description**: This case utilizes the `Array.from` method to create an array from an array-like object returned by `Array(100)`, which creates a sparse array. The second argument again maps the indices to their respective values (0 to 99).
   - **Performance Result**: This approach produced a significantly lower execution rate of about 1,537,408.75 executions per second.

### Options Compared
- The first test uses a structured object with a `length` property to create an array, while the second test creates a sparse array and then utilizes `Array.from()` on it.

### Pros and Cons

#### `Array.from({length: 100}, (_, i) => i)`
- **Pros**:
  - More efficient in terms of performance, as shown in the results. 
  - Creates the array in one step without any intermediate sparse representation.
- **Cons**:
  - Slightly less compatible with older browsers if polyfills for `Array.from` are not provided.

#### `Array.from(Array(100), (_, i) => i)`
- **Pros**:
  - Straightforward approach if the need for creating a sparsely populated array is intended.
- **Cons**:
  - Performance is generally worse than the first option due to the overhead of creating an intermediate sparse array.
  - May lead to confusion or inefficiency in scenarios where performance is critical.

### Other Considerations
- **Browser Compatibility**: The `Array.from()` method is widely supported in modern browsers, but developers should verify compatibility if targeting older environments.
- **Memory Efficiency**: From a memory perspective, the approach using `{length: 100}` avoids creating sparsely populated elements, which is generally a more efficient technique.

### Alternatives
In addition to `Array.from`, there are other methods available for creating and populating arrays in JavaScript, such as:
- **Array Constructor**: `new Array(100).fill(0).map((_, i) => i);` would create an array of 100 elements, filling it with zeroes, and then mapping over it to fill it with indices. This approach incurs more overhead due to the `fill` method.
- **Spread Operator**: `[...Array(100).keys()]` creates an array with indices from 0 to 99. This is also a common and elegant approach but may be less performant due to creating multiple intermediate representations.

By analyzing performance through these benchmarks, developers can choose the most efficient and appropriate method for their specific use cases when working with arrays in JavaScript.

Related benchmarks:

(Small Array.from length vs Array (version: 1)

Comparing performance of: Array.from length vs Array from sparse array

Created: one year ago by: Guest

Jump to the latest result

Array.from length

Array from sparse array

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated one year ago):