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);

Historical Performance Data aggregated from 16 community runs

Desktop Results:

Firefox 8 runs

[...spread]

74K/s

Array.from

71K/s

View exact numbers

✓ [...spread]: 73,614 ops/sec
• Array.from: 70,588 ops/sec

Chrome 8 runs

[...spread]

76K/s

Array.from

44K/s

Fastest: [...spread] (1.7x faster)

View exact numbers

✓ [...spread]: 76,247 ops/sec
• Array.from: 43,569 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
Array.from
[...spread]

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 4 months 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

[...spread]

88K/s

Array.from

57K/s

View exact numbers

Test name	Executions per second
✓ [...spread]	87,624 Ops/sec
Array.from	57,231 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.

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

Go to the latest result

Array.from

[...spread]

Historical Performance Data aggregated from 16 community runs

Desktop Results:

Firefox 8 runs

Chrome 8 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

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

Go to the latest result

Array.from

[...spread]

Historical Performance Data aggregated from 16 community runs

Desktop Results:

Firefox 8 runs

Chrome 8 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: `Array.from vs [...spread]`