Benchmark: Array.from with mapper vs Array.fill

Tests:

from with mapper
let n = 10000, length = 50 const result = [] const lengthObj = {length:length} const mapper = (_, i) => i < 25 ? 0 : 1 for (let i = 0; i < n; ++i) { result.push(Array.from(lengthObj, mapper)); }
fill twice
let n = 10000, length = 50 const result = [] for (let i = 0; i < n; ++i) { result.push(Array(5).fill(0, 0, 25).fill(1, 25)); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
from with mapper
fill twice

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 2 months ago)

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

Browser/OS: Chrome Mobile 132 on Android

View result in a separate tab

Test name	Executions per second
from with mapper	42.8 Ops/sec
fill twice	1709.9 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated 2 months ago):

LLMs can make mistakes. Check important info.

The benchmark in question compares two different approaches for creating arrays in JavaScript: using `Array.from` with a mapping function versus using the `Array.fill` method. Below is a detailed analysis of each approach, their respective pros and cons, as well as some considerations regarding performance and usability.

### Approaches Compared

1. **`Array.from(lengthObj, mapper)`**: 
   - **Test Name**: `from with mapper`
   - **Benchmark Definition**:
     ```javascript
     let n = 10000, length = 50;
     const result = [];
     const lengthObj = { length: length };
     const mapper = (_, i) => i < 25 ? 0 : 1;
     for (let i = 0; i < n; ++i) {
         result.push(Array.from(lengthObj, mapper));
     }
     ```
   - **Description**: This method creates arrays from an iterable (in this case, an object with a defined `length`). The `mapper` function determines the value to be placed in the array based on the index. Here, for indices less than 25, the value is `0`, and for indices 25 and above, it’s `1`.

2. **`Array(5).fill(0, 0, 25).fill(1, 25)`**: 
   - **Test Name**: `fill twice`
   - **Benchmark Definition**:
     ```javascript
     let n = 10000, length = 50;
     const result = [];
     for (let i = 0; i < n; ++i) {
         result.push(Array(5).fill(0, 0, 25).fill(1, 25));
     }
     ```
   - **Description**: This method first creates an array of a specified size (5) and fills the first portion with `0` (from index `0` to `25`), followed by filling the rest with `1`. However, note that the size specified (5) is smaller than the `length` intended (50), so this should ideally be `Array(length)` to reflect the intention correctly.

### Performance Results

Based on the benchmark results:
- The `fill twice` method has a much higher performance of approximately 1709 operations per second.
- In contrast, the `from with mapper` method only manages about 42 operations per second.

### Pros and Cons

1. **`Array.from` with Mapper**:
   - **Pros**:
     - High flexibility with custom mapping functions.
     - Can create arrays from various iterable objects.
   - **Cons**:
     - Higher computational overhead since it involves function calls for each element.
     - Performance is much lower in this benchmark scenario.

2. **`Array.fill`**:
   - **Pros**:
     - Generally more performant for filling an array with values, as it directly manipulates the array without involving function calls for each individual element.
     - Easy to read and write, especially for straightforward fills.
   - **Cons**:
     - Limited to filling sequences of uniform values; less flexible than `Array.from` with a mapping function.
     - It requires correct sizing to avoid unintended behavior (e.g., using `Array(5)` when intending to create a larger array).

### Other Considerations

- **Library Usage**: In this benchmark, no external libraries are used. Both methods utilize native JavaScript array functionalities.
- **JavaScript Features**: The benchmark does not employ any special or advanced JavaScript features beyond core array methods, keeping the tests straightforward.

### Alternatives

- **Using Loops**: A traditional `for` loop to populate an array could be another alternative, especially if custom logic needs to be implemented that isn’t easily handled by `fill` or `Array.from`.
  
  ```javascript
  const result = [];
  for (let i = 0; i < length; i++) {
      result[i] = i < 25 ? 0 : 1;
  }
  ```

- **Array comprehensions**: Although not natively supported in JavaScript, they would allow for expressive and readable code to generate arrays if they were part of the language.
  
In conclusion, while `Array.from` with a mapping function offers flexibility, in scenarios requiring only uniform fills, `Array.fill` is significantly more performant. Understanding the specific needs of your application and the characteristics of these methods will guide you in choosing the right approach.

Related benchmarks:

Array.from with mapper vs Array.fill (version: 1)

Comparing performance of: from with mapper vs fill twice

Created: 2 months ago by: Guest

Jump to the latest result

from with mapper

fill twice

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated 2 months ago):