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

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: 2 months ago)

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

Browser/OS: Chrome 130 on Windows

View result in a separate tab

Test name	Executions per second
Array.from	3095600.0 Ops/sec
string split	9069232.0 Ops/sec
spread operator	6314294.0 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated 2 months 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.

Related benchmarks:

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

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

Created: one year ago by: Registered User

Jump to the latest result

Array.from

string split

spread operator

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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