Benchmark: String character looping

HTML Preparation code:

<!--your preparation HTML code goes here-->

Script Preparation code:

function generateRandomString(length) {
  const randomValues = new Uint8Array(length);
  window.crypto.getRandomValues(randomValues);
  const randomChars = Array.from(randomValues, (value) => String.fromCharCode(value));
  return randomChars.join('');
}

const text = generateRandomString(1000);
console.log({ text })

Tests:

String.prototype.at
const chars = [] for (let i = 0; i < text.length; i++) { chars.push(text.at(i)) } console.log(chars)
String.prototype.charAt
const chars = [] for (let i = 0; i < text.length; i++) { chars.push(text.charAt(i)) } console.log(chars)
String.prototype.split
const chars = text.split('') console.log(chars)
String.prototype.substring
const chars = [] for (let i = 0; i < text.length; i++) { chars.push(text.substring(i, i+1)) } console.log(chars)
String.prototype.slice
const chars = [] for (let i = 0; i < text.length; i++) { chars.push(text.slice(i, i+1)) } console.log(chars)
for-loop
const chars = []; for (let i = 0; i < text.length; i++) { chars.push(text[i]); } console.log(chars)
spread operator
const chars = [...text] console.log(chars)
Array.from
const chars = Array.from(text) console.log(chars)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
String.prototype.at
String.prototype.charAt
String.prototype.split
String.prototype.substring
String.prototype.slice
for-loop
spread operator
Array.from

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 21 hours ago)

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

Browser/OS: Chrome 135 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
String.prototype.at	17054.4 Ops/sec
String.prototype.charAt	17656.2 Ops/sec
String.prototype.split	21102.9 Ops/sec
String.prototype.substring	17360.9 Ops/sec
String.prototype.slice	17354.5 Ops/sec
for-loop	17532.4 Ops/sec
spread operator	20020.6 Ops/sec
Array.from	19963.9 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated 3 months ago):

LLMs can make mistakes. Check important info.

The benchmark defined in the provided JSON aims to measure the performance of different approaches for looping through the characters of a string in JavaScript. Specifically, it evaluates how efficiently each technique can collect characters from a randomly generated string consisting of 1,000 characters.

### Approaches Compared
1. **String.prototype.at()**
   - **Benchmark Definition**: `const chars = []; for (let i = 0; i < text.length; i++) { chars.push(text.at(i)); }`
   - **Pros**: Provides a clear and concise way to access string characters using a zero-based index.
   - **Cons**: Slightly less performant compared to other methods since it can introduce additional method call overhead.

2. **String.prototype.charAt()**
   - **Benchmark Definition**: `const chars = []; for (let i = 0; i < text.length; i++) { chars.push(text.charAt(i)); }`
   - **Pros**: Explicit method for retrieving characters from strings based on index, making it easy to understand.
   - **Cons**: Similar to `.at()`, it can be slower than using the bracket notation, but still performs reasonably well.

3. **String.prototype.split()**
   - **Benchmark Definition**: `const chars = text.split('');`
   - **Pros**: Very efficient as it creates an array of characters from a string in a single call.
   - **Cons**: Less intuitive for those unfamiliar with the split function's behavior, as it might suggest splitting the string rather than iterating.

4. **String.prototype.substring()**
   - **Benchmark Definition**: `const chars = []; for (let i = 0; i < text.length; i++) { chars.push(text.substring(i, i+1)); }`
   - **Pros**: Clearly indicates the intention of grabbing a subsection of the string.
   - **Cons**: Performs worse than other methods due to its creation of a new string for each iteration.

5. **String.prototype.slice()**
   - **Benchmark Definition**: `const chars = []; for (let i = 0; i < text.length; i++) { chars.push(text.slice(i, i+1)); }`
   - **Pros**: Similar to `substring`, intuitive for slicing strings.
   - **Cons**: Similar performance issues as `substring` where new strings are created repeatedly.

6. **For-loop Indexing**
   - **Benchmark Definition**: `const chars = []; for (let i = 0; i < text.length; i++) { chars.push(text[i]); }`
   - **Pros**: Direct and efficient by accessing characters using bracket notation, which is fast and commonly used.
   - **Cons**: None significant in the context of performance.

7. **Spread Operator**
   - **Benchmark Definition**: `const chars = [...text];`
   - **Pros**: Concise and expressive. Utilizes the modern ES6+ spread syntax to convert a string into an array of characters.
   - **Cons**: Performance can vary, and may not be as fast as simpler approaches due to the overhead of spread syntax.

8. **Array.from()**
   - **Benchmark Definition**: `const chars = Array.from(text);`
   - **Pros**: A clear method for converting iterable objects (like strings) into arrays, with potential for transforming items during conversion.
   - **Cons**: May have additional overhead compared to direct indexing.

### Results and Other Considerations
The benchmark results provided indicate the raw performances in “Executions Per Second” for each method on Firefox 135. The `split()` method performed the best at approximately 221,235 executions per second, followed by `charAt()` and `at()`. Conversely, methods like `Array.from()` and `substring()` showed lower performance, demonstrating that not all approaches yield optimal results.

### Alternatives
In addition to the methods tested, developers could consider:
- **Regular Expressions**: regex can be used to match and extract characters from strings but may not be as performant for simple character iteration.
- **Iterators**: Custom iterators could potentially be created for advanced use cases, though at the cost of simplicity and readability.

Ultimately, the choice of method depends on the performance requirements, readability, and context in which the character access will be used. For simple operations, the bracket notation or `split()` may often suffice, while more complex needs might benefit from tailored solutions like iterators or built-in methods.

Related benchmarks:

String character looping (version: 1)

Loop through the characters of a string

Comparing performance of: String.prototype.at vs String.prototype.charAt vs String.prototype.split vs String.prototype.substring vs String.prototype.slice vs for-loop vs spread operator vs Array.from

Created: 3 months ago by: Registered User

Jump to the latest result

String.prototype.at

String.prototype.charAt

String.prototype.split

String.prototype.substring

String.prototype.slice

for-loop

spread operator

Array.from

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated 3 months ago):