Benchmark: Initializing array with map function - JS version of Python list comprehension

Script Preparation code:

var n = 100000; // 100k
function filler(v, i) {
    return i ** 2;
}

Tests:

Spread operator
[...Array(n).keys()].map(filler);
Array apply
Array.apply(null, { length: n }).map(filler);
Array from
Array.from({ length: n }, filler);
Array fill
Array(n).fill(undefined).map(filler)
For loop push
const arr = []; for (let i = 0; i < n; i++) { arr.push(filler(null, i)); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Spread operator
Array apply
Array from
Array fill
For loop push

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 15 days ago)

User agent: Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Mobile Safari/537.36

Browser/OS: Chrome Mobile 130 on Android

View result in a separate tab

Test name	Executions per second
Spread operator	91.7 Ops/sec
Array apply	128.4 Ops/sec
Array from	119.8 Ops/sec
Array fill	224.9 Ops/sec
For loop push	235.3 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated 15 days ago):

LLMs can make mistakes. Check important info.

The provided benchmark tests various methods of initializing an array in JavaScript, specifically comparing different ways to achieve functionality similar to Python's list comprehension. The common goal of all methods is to create an array with values based on the index, calculated using the `filler` function, which returns the square of the index. Here’s a breakdown of what is being tested, the options being compared, and their pros and cons.

### Methods Being Compared:

1. **Spread Operator**: 
   ```javascript
   [...Array(n).keys()].map(filler);
   ```
   - **Pros**: This approach is concise and leverages modern JavaScript syntax. The use of the spread operator (`...`) creates an iterable range of indices.
   - **Cons**: The benchmark notes that this method exceeds the maximum call stack size for larger arrays (1 million in this case). This makes it impractical for very large arrays.

2. **Array.apply**:
   ```javascript
   Array.apply(null, { length: n }).map(filler);
   ```
   - **Pros**: Utilizes `Function.prototype.apply` to create a new array-like object where the `map` function can be applied. This is a commonly used technique to create an array with specific lengths.
   - **Cons**: While it works well, some might argue it is less intuitive compared to other methods. Performance can also vary depending on the JavaScript engine.

3. **Array.from**:
   ```javascript
   Array.from({ length: n }, filler);
   ```
   - **Pros**: This method is clear and expressive, offering built-in support for creating arrays. It's typically one of the best-performing options for this task as shown in the benchmark results, where it has the highest executions per second.
   - **Cons**: None significant. This is generally the recommended method for creating arrays from iterables.

4. **Array.fill**:
   ```javascript
   Array(n).fill(undefined).map(filler);
   ```
   - **Pros**: Simple to understand and use for filling an array with initial values before mapping.
   - **Cons**: It uses `fill` which does not create actual populated indices; thus, it could potentially result in more overhead compared to `Array.from`.

5. **For Loop with push**:
   ```javascript
   const arr = [];
   for (let i = 0; i < n; i++) {
       arr.push(filler(null, i));
   }
   ```
   - **Pros**: This traditional method is easy to understand and widely supported. It does not break with large inputs as it builds the array through iteration and pushing.
   - **Cons**: It can be less efficient due to dynamic array growth and the overhead of multiple `push` operations compared to other methods that initialize the size of the array upfront.

### Performance Results:

- The results show **`Array.from`** as the fastest with approximately 1218 executions per second, making it the optimal choice for initializing arrays in this context. 
- The **`For loop push`** and **`Array fill`** methods follow, showing moderate performance.
- The **`Spread operator`** and **`Array apply`** methods perform the weakest, with the Spread operator exceeding the call stack limit at large sizes, making it less viable for high-performance applications.

### Other Considerations:

- **Browser Differences**: Performance may vary depending on the browser engine, as evident in the results which were tested on Firefox Mobile.
- **Readability vs. Performance**: While performance is important, the choice of method may depend on the context in which it is used. Readability and maintainability often outweigh raw performance, especially in simpler applications or scripts.

### Alternatives:

- **Using Libraries**: Libraries like Lodash provide utility functions such as `_.range` combined with `_.map` to create and manipulate arrays. This can offer cleaner syntax and additional functionalities but introduces a dependency.
- **Typed Arrays**: For numerical data, typed arrays (`Int32Array`, `Float64Array`, etc.) in JavaScript can provide more efficient memory usage and performance.
- **Web Workers**: For massive data sets or more complex computations, web workers can help in offloading tasks to ensure a smooth user experience without blocking the main thread.

In summary, the benchmark highlights various JavaScript approaches to array initialization, demonstrating their performance characteristics and usage scenarios. Choosing the right approach involves evaluating the specific needs of the application, considering both performance and clarity.

Related benchmarks:

Initializing array with map function - JS version of Python list comprehension (version: 1)

worth to note that the maximum callstack size is exceeded for the first test case (spread operator) with n = 1 million

Comparing performance of: Spread operator vs Array apply vs Array from vs Array fill vs For loop push

Created: 15 days ago by: Registered User

Jump to the latest result

Spread operator

Array apply

Array from

Array fill

For loop push

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated 15 days ago):