Benchmark: Array.from vs. Array/fill/map

Script Preparation code:

LENGTH = 10000;
count = 0;

Tests:

Array.from
Array.from({length: LENGTH}, () => count++)
Array, fill, map
Array(LENGTH).fill().map(() => count++)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.from
Array, fill, map

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 135 on Windows

View result in a separate tab

Test name	Executions per second
Array.from	857.7 Ops/sec
Array, fill, map	1148.5 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated 6 months ago):

LLMs can make mistakes. Check important info.

Let's dive into the explanation of the provided benchmark.

**What is being tested?**

The benchmark measures the performance difference between two approaches to create and populate an array: `Array.from()` and a manual implementation using `Array`, `fill()`, and `map()` methods.

**Options compared:**

Two options are compared:

1. **`Array.from({length: LENGTH}, () => count++)`**: This approach uses the `Array.from()` method to create an array with `LENGTH` elements, where each element is generated by a callback function that increments a counter variable `count`.
2. **`Array(LENGTH).fill().map(() => count++)`**: This approach creates an array of length `LENGTH`, fills it with a single value using `fill()`, and then maps over the array to generate the same elements as in the first approach.

**Pros and cons:**

*   **`Array.from()` method:**
    *   Pros:
        *   Shorter and more concise code.
        *   Often preferred for its readability and expressiveness.
        *   Can be faster due to the optimized implementation by modern JavaScript engines (e.g., V8 in Chrome, SpiderMonkey in Firefox).
    *   Cons:
        *   Might not be as familiar or intuitive for developers without experience with this method.
        *   The performance difference between `Array.from()` and other methods can be small, especially for smaller arrays.
*   **Manual implementation using `Array`, `fill()`, and `map()` methods:**
    *   Pros:
        *   Provides more control over the array creation process.
        *   Can be useful when working with specific requirements or constraints (e.g., older JavaScript engines).
        *   Demonstrates a deep understanding of the underlying array operations.
    *   Cons:
        *   Code can be longer and less readable due to the explicit loop structure.
        *   The performance difference between this approach and `Array.from()` might be noticeable for large arrays.

**Library used:**

There is no specific library used in these benchmarks. However, it's essential to note that both approaches are built into the JavaScript standard library, which means they are optimized for performance by the browser engines (e.g., V8 in Chrome, SpiderMonkey in Firefox).

**Special JS feature or syntax:**

The only special aspect of this benchmark is the use of the `let` keyword with a block scope variable (`count`). This was introduced in ECMAScript 2015 (ES6) and allows for the declaration of variables without the `var` keyword, which can lead to better code readability and fewer issues due to scoping.

Related benchmarks:

Array.from vs. Array/fill/map (version: 0)

Comparing performance of: Array.from vs Array, fill, map

Created: 6 years ago by: Guest

Jump to the latest result

Array.from

Array, fill, map

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 6 months ago):