Benchmark: Array.from length vs for loop

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: 10000}, (_, i)=>i)
for loop
for(var i=0;i<10000;i++) {}

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.from length
for loop

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (X11; Linux x86_64; rv:142.0) Gecko/20100101 Firefox/142.0

Browser/OS: Firefox 142 on Linux

View result in a separate tab

for loop

126K/s

Array.from length

11K/s

View exact numbers

Test name	Executions per second
✓ for loop	126,102 Ops/sec
Array.from length	11,496 Ops/sec

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

LLMs can make mistakes. Check important info.

### Benchmark Overview

The benchmark in question compares the performance of two different methods for creating an array of a specified length in JavaScript:

1. **Array.from** - A method that creates a new array from an array-like or iterable object.
2. **for loop** - An imperative approach using a traditional loop to achieve the same result.

### Test Cases Explained

1. **Array.from({length: 10000}, (_, i) => i)**
   - **Purpose**: This test creates an array of length 10,000, filling it with numbers from 0 to 9,999. The `Array.from` method takes an object with a `length` property as its first argument and a mapping function as its second argument. In this case, the mapping function is `(_, i) => i`, where `_` is a placeholder for the first parameter (not used) and `i` is the index of the element.
   - **Pros**:
     - Readable and concise syntax.
     - Functional programming style, which may be easier for some developers to understood.
   - **Cons**:
     - Overhead due to function calls and extra abstraction, which may lead to slower performance in certain cases compared to a traditional loop.

2. **for(var i=0; i<10000; i++) {}**
   - **Purpose**: This is a straightforward loop that iterates from 0 to 9,999. No actual array is created in this case (the body is empty), but the iteration count represents how often the loop runs.
   - **Pros**:
     - Highly performant for simple operations like counting or looping due to minimal overhead.
     - More control over the loop's execution, allowing for early exit conditions or other operational tasks within the body.
   - **Cons**:
     - Less readable and slightly more error-prone than higher-level constructs, especially for operations beyond simple counting.

### Benchmark Results

The benchmark results show the performance of each method based on the `ExecutionsPerSecond` metric:

- **for loop**: **440218 executions per second**
- **Array.from**: **3104.33 executions per second**

This indicates that the traditional `for loop` is significantly faster than the `Array.from` method in this specific test scenario.

### Considerations and Alternatives

- **Performance**: As demonstrated by the results, for scenarios where performance is critical and minimal computation is done (like array creation), the traditional loop outperforms higher-level abstractions.
  
- **Readability vs. Performance**: Choosing between `Array.from` and a `for loop` often boils down to a trade-off between code clarity and performance. For tasks needing simple array initialization, the for loop may win out. However, when dealing with more complex transformations or when prioritizing readability and maintainability, `Array.from` could be advantageous.

- **Other Alternatives**:
  - **Array.fill()**: Another option for creating an array with a specific size, but it does not provide a way to initialize with sequential values unless used in conjunction with other methods.
  - **Spread Operator**: Using `[...Array(10000).keys()]` can create the same result using a mix of the spread and keys methods but may also come with its own performance caveat due to its abstraction level.

In conclusion, while `Array.from` offers modern, declarative syntax advantages, the traditional `for loop` remains a powerful and efficient tool for straightforward tasks, with performance considerations making it the preferred choice in high-frequency scenarios.

Array.from length vs for loop (version: 1)

Comparing performance of: `Array.from length vs for loop`

Created: one year ago by: Guest

Go to the latest result

Array.from length

for loop

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Array.from length vs for loop (version: 1)

Comparing performance of: Array.from length vs for loop

Created: one year ago by: Guest

Go to the latest result

Array.from length

for loop

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

Comparing performance of: `Array.from length vs for loop`