Benchmark: Array.from() vs new Array() without callback

Tests:

new Array()
const renderEmptyPricingTableColumns = ({ length }) => { const emptyPeriodArray = new Array(length).fill(null); return emptyPeriodArray.map((_, idx) => ( "empty-period-"+idx ?? 0 )); }; renderEmptyPricingTableColumns({length : 500})
Array.from()
const renderEmptyPricingTableColumns = ({ length }) => { const emptyPeriodArray = Array.from({length}); return emptyPeriodArray.map((_, idx) => ( "empty-period-"+idx ?? 0 )); } renderEmptyPricingTableColumns({length : 500})

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 month ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36

Browser/OS: Chrome 131 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
new Array()	332791.5 Ops/sec
Array.from()	70605.1 Ops/sec

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

LLMs can make mistakes. Check important info.

The benchmark defined in the provided JSON compares two methods for creating an array in JavaScript: using the `new Array()` constructor and the `Array.from()` method. Both methods are employed within a function designed to generate an array of a specified length, filled with placeholders, where each entry is a string that includes its index.

### Description of Options Compared:

1. **`new Array(length)`**:
   - This method directly creates a new array with a specified length without populating it with values.
   - In the benchmark, it is used as follows: `const emptyPeriodArray = new Array(length).fill(null);` which initializes an array of the specified length filled with `null` values. It then maps over this array to generate the desired output strings.

2. **`Array.from({length})`**:
   - This method creates a new, shallow-copied array instance from an array-like or iterable object. When passed an object having a `length` property, it creates an array of that length with `undefined` in each position.
   - In the benchmark, it is utilized as `const emptyPeriodArray = Array.from({length});`, meaning it initializes an empty array and then maps over it to create the same output strings.

### Pros and Cons:

- **`new Array()` Pros**:
  - Potentially faster execution for large arrays since it is a straightforward constructor.
  - Offers straightforward syntax for creating an array of a defined size.

- **`new Array()` Cons**:
  - The array is created empty, meaning it requires an additional fill operation (`fill(null)`) to populate it, which adds overhead.

- **`Array.from()` Pros**:
  - Its concise syntax can lead to better readability, especially when creating arrays from array-like objects.
  - It can generate arrays directly from iterables or array-like objects without the need for subsequent filling.

- **`Array.from()` Cons**:
  - Typically slower performance compared to `new Array()` with larger arrays, as seen in the benchmark results.
  - Slightly more overhead because it constructs an array from the provided length object before proceeding.

### Benchmark Results:

From the benchmark results, we observe the following:

- **Performance Measurement**:
  - `new Array()` had an execution rate of **332,791.5 executions per second**.
  - `Array.from()` had a much slower execution rate of **70,605.05 executions per second**.

This indicates that for large array initializations in performance-critical applications, `new Array()` is the preferable method over `Array.from()` in this context.

### Other Considerations:

- **Readability vs. Performance**: Developers might choose `Array.from()` for better readability or maintainability in code, particularly in situations where they need to create arrays from various types of iterable inputs, or simply prefer a functional style.
  
- **Future Maintenance**: Choosing between these methods could depend on the collaboration dynamics within the development team, team style preferences, and the context in which they are used.

### Alternatives:

1. **Using `Array.prototype.fill` with `new Array()`**: To fill an array with specific values after its creation, which is a method that combines performance with functionality.
  
2. **For Loops**: A traditional `for` loop could be used to initialize arrays, providing flexibility at the cost of extra lines of code.
   
3. **Spread Operator**: For example, `Array(length).fill(0)` is another method if initialized with specific values is required.

In summary, this benchmark serves as a useful demonstration of how different array initialization methods in JavaScript can lead to significantly different performance characteristics depending on the use case.

Related benchmarks:

Array.from() vs new Array() without callback (version: 3)

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

Created: one month ago by: Registered User

Jump to the latest result

new Array()

Array.from()

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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