Benchmark: Array.from vs Array.fill

Tests:

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

Historical Performance Data aggregated from 43 community runs

Desktop Results:

Chrome 43 runs

fill

816/s

from

71/s

Fastest: fill (11.5x faster)

View exact numbers

✓ fill: 816 ops/sec
• from: 71 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
from
fill

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/138.0.0.0 Safari/537.36

Browser/OS: Chrome 138 on Windows

View result in a separate tab

fill

1K/s

from

71/s

View exact numbers

Test name	Executions per second
✓ fill	1,445 Ops/sec
from	71 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

LLMs can make mistakes. Check important info.

Measuring the performance of two different approaches in JavaScript, `Array.from` and `Array.fill`, is crucial for developers to understand the optimal way to create arrays with a specific length filled with values.

**What are we testing?**

We're comparing the performance of two approaches:

1.  **Using `Array.from()`**: This method creates a new array by copying elements from another iterable (such as an array or string) and returns the resulting array.
2.  **Using `Array.fill()`**: This method creates a new array with the specified length, fills it with the provided value, and returns the resulting array.

**Options compared:**

*   Creating arrays using `Array.from()` vs `Array.fill()`
*   Performance of these two approaches

**Pros and Cons:**

*   **`Array.from()`**
    *   Pros:
        *   More flexible and powerful than `Array.fill()` since it can create an array from any iterable, not just a fixed length.
        *   Easier to use when you need to create an array with multiple elements or from a different data source.
    *   Cons:
        *   May be slower than `Array.fill()` for large arrays because of the overhead of creating a new array and copying elements from the original iterable.
*   **`Array.fill()`**
    *   Pros:
        *   Faster than `Array.from()` since it only creates an array with the specified length and fills it directly, without any additional overhead.
        *   More memory-efficient because it doesn't create a new array and copy elements from another source.
    *   Cons:
        *   Less flexible and powerful than `Array.from()` since you're limited to filling an array with a single value.

**Library/Functionality:**

*   In the provided benchmark code, no external library is used. However, in real-world scenarios, it's common to use libraries like Lodash or Underscore.js that provide additional functionality and make your code more concise and readable.
*   No special JavaScript features or syntax are mentioned.

**Other Alternatives:**

If you don't want to use `Array.from()` or `Array.fill()`, there are other ways to create arrays with a specified length:

*   Using the spread operator (`...`): This method creates an array by spreading elements from another iterable.
    ```javascript
let result = [...Array(length)].map((_, i) => i + 1);
```
*   Using `new Array(length)`: This method creates an array with the specified length and returns it.

In summary, when choosing between `Array.from()` and `Array.fill()`, consider the following:

*   Use `Array.from()` when you need to create an array from a different data source or require more flexibility in your code.
*   Use `Array.fill()` when performance is critical and you only need to fill an array with a single value.

Keep in mind that these are just general guidelines, and the best approach depends on your specific use case and requirements.

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

Comparing performance of: `from vs fill`

Created: 4 years ago by: Registered User

Go to the latest result

from

fill

Historical Performance Data aggregated from 43 community runs

Desktop Results:

Chrome 43 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

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

Comparing performance of: from vs fill

Created: 4 years ago by: Registered User

Go to the latest result

from

fill

Historical Performance Data aggregated from 43 community runs

Desktop Results:

Chrome 43 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

Related benchmarks

Comparing performance of: `from vs fill`