Benchmark: Array.from() vs new Array() 232323

Script Preparation code:

const obj = {length:500}
function test(){
return 0
}

Tests:

new Array()
Array(500).fill(0, 0, 500)
Array.from()
Array.from(obj, test)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

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

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/131.0.0.0 Safari/537.36

Browser/OS: Chrome 131 on Windows

View result in a separate tab

Test name	Executions per second
new Array()	367056.7 Ops/sec
Array.from()	15364.7 Ops/sec

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

LLMs can make mistakes. Check important info.

The provided benchmark tests the performance difference between creating filled arrays in JavaScript using two different approaches: `new Array()` with the `.fill()` method, and `Array.from()`. Below is a detailed explanation of the benchmark, including the options compared, pros and cons, and considerations.

### Benchmark Overview

#### Tested Options:
1. **`new Array().fill(0, 0, 500)`**
   - This approach creates a new array with a specified length (500) and fills it with the value `0` from index `0` to index `499`.

2. **`Array.from(obj, test)`**
   - This method creates a new array instance from an array-like or iterable object (in this case, `obj` with a `length` property) and applies the `test` function to each element. The function used simply returns `0`, effectively filling the new array with `0`s.

### Performance Results:
- **`new Array()`**: Executions per second: **663,425.44**
- **`Array.from()`**: Executions per second: **27,669.15**

### Pros and Cons:

#### `new Array().fill(0, 0, 500)`
- **Pros**:
  - **Higher Performance**: The results show that this method performs significantly better, creating a filled array much faster.
  - **Simplicity**: The syntax is straightforward and easy to understand.
  
- **Cons**:
  - **Memory Overhead**: If large arrays are created frequently, this method may have higher memory usage if not managed correctly.

#### `Array.from(obj, test)`
- **Pros**:
  - **Flexibility**: `Array.from` can handle various iterable or array-like objects, making it versatile for different use cases.
  - **Mapping Function**: Allows the use of a mapping function, making it flexible for different transformations beyond simple filling.

- **Cons**:
  - **Lower Performance**: The benchmark indicates much slower execution as it creates an array based on a function call for each element.
  - **Complexity**: Slightly more complex due to the requirement of a mapping function, which could add overhead for simple cases.

### Other Considerations:
- **Browser Performance Variance**: The test results are specific to a particular browser and its version (Chrome 126), which might yield different timings compared to other browsers or later versions.
- **Use Cases**: If array filling is primarily needed and performance is critical, `new Array().fill(...)` is the preferable choice. However, if there's a need for more complex manipulation or different formations of the array, `Array.from()` would be beneficial.
  
### Alternatives:
- **Spread Operator**: Using the spread operator `[...]` to fill an array could be an alternative approach, e.g., `[...Array(500).keys()].map(() => 0)`. This method can be memory intensive and slower compared to the tested approaches but is another option.
  
- **Looping**: Using a `for` loop or `.map()` method on an array created with `Array(length)` can also fill an array, although it may introduce more lines of code than necessary for simple cases.

In summary, the benchmark provides valuable insight into the performance implications of different array creation methods in JavaScript. For high-performance needs, `new Array().fill()` is recommended, while `Array.from()` offers flexibility for more complex scenarios.

Related benchmarks:

Array.from() vs new Array() 232323 (version: 1)

Testing the difference between creating filled arrays.

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

Created: one year ago by: Guest

Jump to the latest result

new Array()

Array.from()

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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