Benchmark: Array.from vs Spread on Iterable

Script Preparation code:

const segmenter = new Intl.Segmenter("ja", {granularity: "grapheme"});

const str1 = "𠮷野家";
const str2 = "😄💢✋";
const str3 = "👨‍👩‍👧‍👦";

var segments1 = segmenter.segment(str1);
var segments2 = segmenter.segment(str2);
var segments3 = segmenter.segment(str3);

Tests:

Array.from
const segments1Length = Array.from(segments1).length; const segments2Length = Array.from(segments2).length; const segments3Length = Array.from(segments3).length;
Spread
const segments1Length = [...segments1].length; const segments2Length = [...segments2].length; const segments3Length = [...segments3].length;

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

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and its test cases.

**Benchmark Overview**

The benchmark compares two approaches to get the length of an array created from an iterable: `Array.from` and the spread operator (`...`). The benchmark is designed to measure which approach is faster on average.

**Script Preparation Code**

The script preparation code uses the `Intl.Segmenter` API to break down Japanese text into grapheme segments. This is likely done to ensure that the benchmark is representative of a real-world use case where arrays are created from iterables containing non-trivial data, such as strings with multiple characters.

**Individual Test Cases**

There are two test cases:

1. **Array.from**: Measures the performance of using `Array.from` to create an array from an iterable (in this case, the grapheme segments).
2. **Spread**: Measures the performance of using the spread operator (`...`) to create an array from an iterable.

**Library: Intl.Segmenter**

The `Intl.Segmenter` API is a built-in JavaScript library that splits text into smaller units called graphemes. Graphemes are the smallest units of text that can be meaningfully distinguished in a script, and they're often used for tasks like text processing, formatting, and language detection.

**Test Results**

According to the latest benchmark result, the spread operator (`...`) is faster than `Array.from` on this particular test case. This could be due to various factors, such as:

* The spread operator might be optimized for performance in certain browsers or environments.
* The grapheme segments created by the `Intl.Segmenter` API are smaller and more lightweight than the individual characters returned by `Array.from`, potentially leading to faster execution times.

**Pros and Cons**

Here are some pros and cons of each approach:

* **Array.from**:
	+ Pros: More explicit and readable, easier to understand for developers familiar with array methods.
	+ Cons: Might be slower due to the overhead of creating an array iterator.
* **Spread**:
	+ Pros: Often faster, more concise, and expressive. Can take advantage of browser optimizations.
	+ Cons: Less explicit and readable for developers unfamiliar with spread syntax.

**Alternatives**

If you're interested in exploring alternative approaches or testing different variants, consider these options:

* Using `Array.from()` with a custom iterator function to create an array from an iterable.
* Using other array methods, such as `map()`, `filter()`, or `reduce()`, to transform the iterable and get the desired output.
* Implementing a custom loop or recursive function to iterate over the iterable and accumulate values in an array.
* Testing the performance of different libraries or frameworks for text processing, such as ICU or Unicode Normalization.

These alternatives can provide valuable insights into the performance characteristics of various approaches, helping you make informed decisions about which method to use in your specific use case.

Latest run results:

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

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

Browser/OS: Chrome 127 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Array.from	248150.9 Ops/sec
Spread	269386.2 Ops/sec

Related benchmarks:

Array.from vs Spread on Iterable (version: 0)

Comparing performance of: Array.from vs Spread

Created: 2 months ago by: Guest

Jump to the latest result

Array.from

Spread

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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