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

Script Preparation code:

let length = {
        length: 500
    },
    func = () => 0

Tests:

new Array()
new Array(500).fill(0, 0, 500)
Array.from()
Array.from(length, func)

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 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Mobile Safari/537.36

Browser/OS: Chrome Mobile 131 on Android

View result in a separate tab

Test name	Executions per second
new Array()	180157.4 Ops/sec
Array.from()	20989.4 Ops/sec

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

LLMs can make mistakes. Check important info.

The benchmark defined in the JSON tests the performance of two different methods for creating and filling an array in JavaScript: `new Array()` with the `.fill()` method and `Array.from()`.

### Options Compared

1. **`new Array(500).fill(0, 0, 500)`**
   - This method creates a new array with a specified length of 500 and fills it with zeros. The `fill` method is called directly on the newly created array.
  
2. **`Array.from(length, func)`**
   - This method uses `Array.from()`, which creates a new array from the specified `length` object (which has a property `length: 500`) and a mapping function (`func`) that returns zero. The mapping function is executed for each index of the new array.

### Pros and Cons

#### `new Array().fill()`
- **Pros:**
  - Simplicity: Straightforward and easy to read.
  - Slightly better performance in certain cases, as seen in the benchmark results, with a higher execution count.
  
- **Cons:**
  - It creates an array initialized to `undefined` before it's filled. The initialization step can be an overhead if initializing an array with non-trivial values.
  - The `fill()` method modifies the original array which can potentially lead to unintended consequences if you forget to return it.

#### `Array.from()`
- **Pros:**
  - Flexibility: Can easily use a mapping function to create more complex or varied data. This method allows for more advanced initializations beyond filling with the same value.
  - Processing each element with a callback can be useful for complex array creations.
  
- **Cons:**
  - Historically slower performance as shown in the benchmark results (20989.4 executions per second vs. 180157.4 for `new Array()`).
  - Some overhead associated with invoking the mapping function for each element.

### Other Considerations
- **Browser Compatibility:** Both methods are widely supported across modern browsers, but older environments may not support `Array.from()`.
- **Immediate vs Deferred Initialization:** `new Array().fill()` initializes and fills the array in one step, while `Array.from()` gives some flexibility on how to fill the array but introduces a performance hit in cases where filling is trivial.
  
### Alternative Approaches
1. **Using a Loop:**
   - You could initialize the array with a for loop, which can sometimes be faster for simple fills, especially in older JavaScript environments:
     ```javascript
     const arr = [];
     for (let i = 0; i < 500; i++) {
         arr[i] = 0;
     }
     ```
   
2. **Spread Syntax:**
   - Utilizing the spread syntax in combination with `Array()` for small arrays:
     ```javascript
     let arr = [...Array(500).keys()].map(() => 0);
     ```
   - This can be more syntactically appealing but less performant than `new Array().fill()`.

3. **Lodash/Other Libraries:**
   - Libraries like Lodash have utility functions, such as `_.fill()`, which could abstract away some complexity, though they add dependency overhead.

In summary, the benchmark is an effective demonstration of the performance trade-offs between two commonly used methods for array creation and initialization in JavaScript. While `new Array().fill()` demonstrates superior performance, `Array.from()` provides a greater degree of flexibility for more complex use cases. The choice between these should depend on the specific needs of the application while also considering performance.

Related benchmarks:

Array.from() vs new Array() 3 (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):