Benchmark: Initializing array with map function

Initializing array with map function (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: [...Array(n).keys()].map(filler) vs Array.apply(null, { length: 4 }).map(filler) vs Array.from vs Array(n).fill(undefined).map(filler) vs for loop push

Created: 15 days ago by: Guest

Jump to the latest result

Script Preparation code:

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

Tests:

[...Array(n).keys()].map(filler)
[...Array(n).keys()].map(filler);
Array.apply(null, { length: 4 }).map(filler)
Array.apply(null, { length: n }).map(filler);
Array.from
Array.from({ length: n }, filler);
Array(n).fill(undefined).map(filler)
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
[...Array(n).keys()].map(filler)
Array.apply(null, { length: 4 }).map(filler)
Array.from
Array(n).fill(undefined).map(filler)
for loop push

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (X11; Linux x86_64; rv:133.0) Gecko/20100101 Firefox/133.0

Browser/OS: Firefox 133 on Linux

View result in a separate tab

Test name	Executions per second
[...Array(n).keys()].map(filler)	111.6 Ops/sec
Array.apply(null, { length: 4 }).map(filler)	69.3 Ops/sec
Array.from	357.3 Ops/sec
Array(n).fill(undefined).map(filler)	141.3 Ops/sec
for loop push	436.4 Ops/sec

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

LLMs can make mistakes. Check important info.

### Benchmark Overview

This benchmark is designed to evaluate the performance of various methods for initializing an array in JavaScript using a mapping function. The `filler` function takes an index and returns the square of that index, simulating a typical computation during the array initialization process.

### Tested Approaches

Five individual test cases compare different methods for array initialization and mapping:

1. **Spread Operator with Array Keys**
   - **Code**: `[...Array(n).keys()].map(filler);`
   - This approach creates an array of the indices from 0 to `n-1` using the spread operator and `Array.keys()`, then applies the `filler` function to each index.
   - **Pros**: This method is concise and utilizes modern JavaScript features.
   - **Cons**: It can hit the maximum call stack size when using large `n` values, potentially leading to inefficiency.

2. **Array.apply with Map**
   - **Code**: `Array.apply(null, { length: n }).map(filler);`
   - This utilizes the `Function.prototype.apply` method to create an empty array with a specific length, and then maps over it with the `filler` function.
   - **Pros**: Creates a sparse array for mapping without intermediate steps.
   - **Cons**: This approach is less common and may not be as performant depending on the JavaScript engine's handling of `apply`.

3. **Array.from Method**
   - **Code**: `Array.from({ length: n }, filler);`
   - `Array.from` can create a new array and apply the `filler` function to each element. It generates the indices automatically.
   - **Pros**: This is a standardized method that is widely supported and understood. It avoids issues related to the call stack.
   - **Cons**: Introduces some overhead because it has to set up a new structure for the array.

4. **Filling an Array with Undefined and Mapping**
   - **Code**: `Array(n).fill(undefined).map(filler);`
   - This approach first fills a new array with `undefined` values and then maps over the array with the `filler` function.
   - **Pros**: Straightforward to understand and avoids maximum call stack issues.
   - **Cons**: This creates an intermediate array filled with `undefined`, which may have unnecessary memory overhead.

5. **Classic For Loop**
   - **Code**: 
   ```javascript
   const arr = [];
   for (let i = 0; i < n; i++) {
     arr.push(filler(null, i));
   }
   ```
   - This traditional approach manually builds the array by pushing calculated values into it.
   - **Pros**: It often provides the best performance for large arrays because it avoids the overhead of higher-order functions.
   - **Cons**: While clear and effective, this approach can result in more boilerplate code compared to functional methods.

### Benchmark Results

The benchmark results show the number of executions per second for each approach:

- **For Loop Push**: 2903.73 executions/sec (fastest)
- **Array.from**: 999.24 executions/sec
- **Array(n).fill(undefined).map(filler**: 755.93 executions/sec
- **Spread Operator**: 622.73 executions/sec
- **Array.apply**: 398.89 executions/sec (slowest)

### Considerations

When selecting an array initialization approach in JavaScript, several factors come into play:

- **Performance**: The classic `for` loop demonstrates the best performance in this benchmark, particularly for larger arrays.
- **Readability**: Higher-order functions like `map` and `Array.from` can make code clearer and more expressive, which is beneficial for team collaboration.
- **Stack Size**: Approaches using the spread operator with large `n` could lead to stack overflow errors and thus are less reliable.
- **Browser Compatibility**: All methods are compatible across modern environments, but specific features like `Array.from` may not be supported in older JavaScript engines.

### Alternatives

Other alternatives for array initialization might include using `Array.fill`, `Unshift/Concat`, or even employing libraries like Lodash, which provide utility methods for more advanced data manipulation patterns. Each of these methods balances performance and readability differently, and the best choice may depend on the specific use case and context in which you are working.

Related benchmarks:

Initializing array with map function (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: [...Array(n).keys()].map(filler) vs Array.apply(null, { length: 4 }).map(filler) vs Array.from vs Array(n).fill(undefined).map(filler) vs for loop push

Created: 15 days ago by: Guest

Jump to the latest result

[...Array(n).keys()].map(filler)

Array.apply(null, { length: 4 }).map(filler)

Array.from

Array(n).fill(undefined).map(filler)

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):