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

Tests:

new Array()
new Array(500)
Array.from()
Array.from({ 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 year ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:137.0) Gecko/20100101 Firefox/137.0

Browser/OS: Firefox 137 on Mac OS X 10.15

View result in a separate tab

Test name	Executions per second
new Array()	1616001792.0 Ops/sec
Array.from()	758924.5 Ops/sec

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

LLMs can make mistakes. Check important info.

### Benchmark Explanation

The benchmark titled "Array.from() vs new Array()2" focuses on comparing the performance of two methods for creating filled arrays in JavaScript. The methods being tested are:

1. **new Array(500)**: This approach creates a new array with a specified length of 500 elements. The array is initialized but the elements themselves are not assigned any values; they are essentially "empty" slots.

2. **Array.from({ length: 500 })**: This method utilizes the static `Array.from()` function to create a new array from an array-like object that has a specified length of 500. By default, the elements in this case are uninitialized (similar to using `new Array(500)`) unless a mapping function is provided to populate them with values.

### Performance Results

The benchmark results indicate a marked difference in performance between the two methods:

- **new Array(500)**: This method achieved an execution speed of approximately **1,616,001,792** operations per second, showcasing its efficient handling of array creation with a predetermined length.
  
- **Array.from({ length: 500 })**: This method performed significantly slower, with an execution speed of roughly **758,924.5** operations per second.

### Pros and Cons

#### `new Array(500)`

**Pros:**
- **Speed**: As observed, this method is significantly faster for simply initializing an array with a specific length.
- **Simplicity**: It is straightforward to use, requiring less code.

**Cons:**
- **Uninitialized Elements**: The elements in the array are not assigned values, which can lead to unexpected behavior if the code expects actual values in the array.

#### `Array.from({ length: 500 })`

**Pros:**
- **Enhanced Functionality**: Can take a mapping function as a second argument to populate the array with elements, adding flexibility for use cases that require initialized arrays.

**Cons:**
- **Performance**: Slower performance compared to `new Array()`, making it less suitable for scenarios where performance is a critical factor and simply initializing an empty array is sufficient.
- **Overhead**: This method involves more overhead since it parses an object instead of directly creating an array.

### Considerations

When deciding between the two options, consider the specific needs for your application:

- If you need an empty array of a specific size without immediate values, `new Array(500)` is the preferable choice, especially for performance-intensive tasks.
  
- If there is a requirement to initialize the array with values or if you plan to apply transformations, then `Array.from()` might be more suitable, despite its performance trade-offs.

### Alternatives

Other alternatives for creating and populating arrays in JavaScript include:

1. **Array.fill()**: For initializing an array with a specific value.
   ```javascript
   let arrayFilled = new Array(500).fill(0); // This creates an array of 500 elements, each initialized to 0.
   ```

2. **Spread Operators**: You can create and spread an iterable to create an array.
   ```javascript
   const arrayFilled = [...Array(500).keys()]; // Creates an array of numbers from 0 to 499.
   ```

3. **Array.from on actual arrays**: You can also use `Array.from()` to create arrays from actual iterable objects like strings or other arrays in addition to the length-based approach.

By understanding the performance characteristics and implications of each method, developers can choose the best approach for array creation based on their application's needs.

Related benchmarks:

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