Benchmark: Javascript string to array mapping: Array.from() vs Spread syntax [...spread]

Script Preparation code:

var string = '1'.repeat(1000);

Tests:

Array.from
const array = Array.from(string, x => x * 2);
[...spread]
const array = [...string].map(x => x * 2);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.from
[...spread]

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Firefox 149 on Linux

View result in a separate tab

Test name	Executions per second
Array.from	57231.2 Ops/sec
[...spread]	87624.2 Ops/sec

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

LLMs can make mistakes. Check important info.

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

**Benchmark Overview**

The benchmark measures the performance difference between two approaches for converting a string to an array: `Array.from()` and the spread syntax `[...spread]`.

**Approaches Compared**

There are two test cases:

1.  **`Array.from()`**: This method creates a new array from an existing iterable (like a string) by calling its iterator. It takes a callback function (`x => x * 2`) that is applied to each element of the string.
2.  **Spread Syntax `[...spread]`**: This syntax uses the spread operator (`...`) to create a new array from an existing iterable (like a string). The callback function (`x => x * 2`) is also applied to each element of the string, similar to `Array.from()`.

**Pros and Cons**

*   **`Array.from()`**:
    *   Pros:
        *   Can be used with other iterables besides strings.
        *   More explicit control over the iteration process.
    *   Cons:
        *   May have performance overhead due to function call.
*   **Spread Syntax `[...spread]`**:
    *   Pros:
        *   Less verbose and easier to read than `Array.from()`.
        *   Performance is often comparable or better than `Array.from()` because it doesn't involve a function call.
    *   Cons:
        *   Limited to strings only.
        *   Less explicit control over the iteration process.

**Other Considerations**

*   **Libraries**: In one of the test cases, there's an additional library used for testing purposes. However, no specific library name is mentioned in this explanation as it does not appear relevant to the performance difference between `Array.from()` and spread syntax.

**Special JS Features/Syntax**

None are explicitly used or compared in this benchmark. It sticks strictly to standard JavaScript features and syntax.

**Alternatives**

Other approaches for converting strings to arrays include:

*   **`map()`**: While similar to the spread syntax, it uses a function call and is generally slower than the spread operator for large arrays.
*   **`reduce()`**: This method applies a reduction function to an array (like a string) and returns the accumulated value. It's less suitable for simple conversions like this benchmark.

**Benchmarking**

The provided test cases aim to compare these two approaches on performance, specifically focusing on how they handle iteration over large strings. The results of each test case can provide insights into which approach is generally more efficient in different scenarios.

Related benchmarks:

Javascript string to array mapping: Array.from() vs Spread syntax [...spread] (version: 0)

Comparing performance of: Array.from vs [...spread]

Created: 6 years ago by: Guest

Jump to the latest result

Array.from

[...spread]

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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