Benchmark: Array(n).fill(char) vs Array.from({ length: n }, _ => char) vs manual loop

Script Preparation code:

var str = "string";
var n = 1000;

Tests:

Array(n).fill(str)
var res = Array(n).fill(str)
Array.from({ length: n }, _ => str)
var res = Array.from({ length: n }, _ => str)
loop
var res = []; for (var i = 0; i < n; ++i) { res.push(str) }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array(n).fill(str)
Array.from({ length: n }, _ => str)
loop

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

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

Browser/OS: Firefox 135 on Linux

View result in a separate tab

Test name	Executions per second
Array(n).fill(str)	238776.2 Ops/sec
Array.from({ length: n }, _ => str)	66171.8 Ops/sec
loop	97861.0 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 provided JSON tests various methods for creating and populating an array in JavaScript with a specified string value repeated a certain number of times (`n = 1000`). The options being compared are:

1. **Array(n).fill(str)**
2. **Array.from({ length: n }, _ => str)**
3. **Manual loop (for loop)**

### Description of Each Method

1. **Array(n).fill(str)**
   - **Description**: This method creates a new array of length `n` and fills it with the specified value `str`.
   - **Pros**:
     - Concise syntax, making it easy to read and write.
     - Likely to be optimized by JavaScript engines because it's a built-in method.
   - **Cons**:
     - If `str` is an object (as opposed to a primitive value), all elements will reference the same object, which could lead to unintended side effects.

2. **Array.from({ length: n }, _ => str)**
   - **Description**: This uses the `Array.from()` factory method to create an array from an iterable or array-like object, with the second argument being a mapping function that specifies how to populate each element.
   - **Pros**:
     - Allows for more complex initialization logic through the mapping function.
     - More explicit in terms of the mapping process.
   - **Cons**:
     - Slightly more verbose than `Array.fill()`, which may not be as performant with large `n` compared to the first method due to the additional function overhead.

3. **Manual loop (for loop)**
   - **Description**: This method manually initializes an empty array and then populates it by explicitly pushing the string `str` into the array in a loop.
   - **Pros**:
     - Offers the greatest flexibility and control over the array population process.
     - Can be further customized with additional logic inside the loop if needed.
   - **Cons**:
     - More verbose and less elegant than the previous two methods.
     - Generally less performant than built-in methods, as it typically involves more function call overhead.

### Benchmark Results Overview

From the benchmark results, the performance of each method is expressed in terms of executions per second:

- **Array(n).fill(str)**: 238,776 executions/second
- **Manual loop**: 97,861 executions/second
- **Array.from({ length: n }, _ => str)**: 66,172 executions/second

### Performance Insights

- **Array(n).fill(str)** is clearly the fastest option among the three, likely due to the optimizations present in modern JavaScript engines for built-in array manipulation methods.
- The **manual loop** is surprisingly faster than **Array.from()**, which might indicate overhead associated with invoking the mapping function (even if it's as simple as returning `str`).
  
### Other Considerations

When considering alternatives, it’s also worth noting:

- **Using Spread Operator**: `const res = [...Array(n)].map(() => str);`
  - Pros: Concise and leverages array methods.
  - Cons: Generally slower due to the creation of an intermediate array.

- **Using Higher Order Functions**: Methods like `Array.prototype.map()` can also be useful for similar tasks but may add complexity and overhead.

- **Performance Context**: While this benchmark provides insights into method performance for a specific case, real-world performance can vary depending on the actual use case (size of `n`, frequency of this operation, etc.), execution environment, and specific JavaScript engine optimizations.

Overall, while there are various options to populate an array, the selection should weigh conciseness, readability, and performance relative to the specific requirements of the programming task at hand.

Related benchmarks:

Array(n).fill(char) vs Array.from({ length: n }, _ => char) vs manual loop (version: 1)

Comparing performance of: Array(n).fill(str) vs Array.from({ length: n }, _ => str) vs loop

Created: one year ago by: Guest

Jump to the latest result

Array(n).fill(str)

Array.from({ length: n }, _ => str)

loop

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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