Benchmark: Array from vs string split vs spread

Script Preparation code:

var s1 = "foo";
var s2 = "foo 12312";

Tests:

Array.from
let n1 = Array.from(s1); let n2 = Array.from(s2);
string split
let n1 = s1.split(''); let n2 = s2.split('');
spread operator
let n1 = [...s1]; let n2 = [...s2];

Historical Performance Data aggregated from 9 community runs

Desktop Results:

Chrome 9 runs

string split

13.9M/s

spread operator

11.9M/s

Array.from

5.3M/s

Fastest: string split (2.6x faster)

View exact numbers

✓ string split: 13,929,835 ops/sec
• spread operator: 11,852,484 ops/sec
• Array.from: 5,268,676 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
string split
spread operator

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 6 months ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36

Browser/OS: Chrome 143 on Mac OS X 10.15.7

View result in a separate tab

string split

42.1M/s

spread operator

21.3M/s

Array.from

19.8M/s

View exact numbers

Test name	Executions per second
✓ string split	42,067,400 Ops/sec
spread operator	21,347,024 Ops/sec
Array.from	19,849,134 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 world of JavaScript microbenchmarks on MeasureThat.net.

**Overview**

The benchmark compares three approaches for creating an array from a string:

1.  **`Array.from()`**: a built-in method that creates an array from an iterable object, such as a string.
2.  **String Split**: manually splitting the string into an array using the `split()` method with an empty string (`''`) as the separator.
3.  **Spread Operator** (also known as the rest operator): creating a new array by spreading elements of an existing array (in this case, a single-element array containing the original string).

**Options Comparison**

Let's analyze each approach and their pros and cons:

*   **`Array.from()`**:
    *   Pros: efficient, concise, and widely supported.
    *   Cons: might incur some overhead due to method call and iteration.
*   **String Split**: manual splitting using `split()`.
    *   Pros: easy to implement, no dependencies on other libraries or methods.
    *   Cons: slower and less readable compared to `Array.from()`.

**Library Usage**

In this benchmark, the `Array.from()` method is a built-in JavaScript function. It doesn't rely on any external libraries.

**Special JS Features/Syntax**

The benchmark uses two special features:

1.  **Rest Operator (`...`)**: used in the spread operator approach to create a new array by spreading elements of an existing array.
2.  **Spread Operator Usage in Array Creation**: using the rest operator to create a single-element array containing the original string, which is then passed to `Array.from()`.

**Other Alternatives**

If you need to create an array from a string without using any built-in methods or libraries, you can consider the following alternatives:

1.  Using `map()` and `concat()`: creating an array by mapping each character in the string to itself and concatenating the results.
2.  Manually looping through each character in the string using a `for` loop and adding elements to an array.

Here's a simple example of the first alternative:

```javascript
let n1 = [];
for (let i = 0; i < s1.length; i++) {
    n1.push(s1[i]);
}
```

And here's an example of the second alternative:

```javascript
let n1 = [];
for (let i = 0; i < s1.length; i++) {
    for (let j = 0; j <= i; j++) { // Include the string itself as an element
        n1.push(s1[j]);
    }
}
```

Keep in mind that these alternatives are generally less efficient and more verbose than using `Array.from()` or the spread operator.

Array from vs string split vs spread (version: 0)

Comparing performance of: `Array.from vs string split vs spread operator`

Created: 2 years ago by: Registered User

Go to the latest result

Array.from

string split

spread operator

Historical Performance Data aggregated from 9 community runs

Desktop Results:

Chrome 9 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 string split vs spread (version: 0)

Comparing performance of: Array.from vs string split vs spread operator

Created: 2 years ago by: Registered User

Go to the latest result

Array.from

string split

spread operator

Historical Performance Data aggregated from 9 community runs

Desktop Results:

Chrome 9 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 string split vs spread operator`