Benchmark: For Loop vs For Of in iterating strings

Script Preparation code:

function validCharForL(s){
  const n='"*/:<>?\\|';
  let r="";
  for(let i=0,l=s.length;i<l;i++)
    r+=n.includes(s[i])?String.fromCharCode(s.charCodeAt(i)+65248):s[i];
  return r
};

function validCharForOf(s){
  const n='"*/:<>?\\|';
  let r="";
  for(let c of s)
    r+=n.includes(c)?String.fromCharCode(c.charCodeAt()+65248):c;
  return r
};

​x
 
function validCharForL(s){  const n='"*/:<>?\\|';  let r="";  for(let i=0,l=s.length;i<l;i++)    r+=n.includes(s[i])?String.fromCharCode(s.charCodeAt(i)+65248):s[i];  return r};​function validCharForOf(s){  const n='"*/:<>?\\|';  let r="";  for(let c of s)    r+=n.includes(c)?String.fromCharCode(c.charCodeAt()+65248):c;  return r};​

Tests:

For Loop

for (let i = 0; i < 1000; i++)
  validCharForL("1234*/:<abcd1234abcd1234abcd1234abcd1234abcd1234abcd1234abcd1234abcd1234abcd1234abcd1234abcd1234abcd1234abcd1234");

 
for (let i = 0; i < 1000; i++)  validCharForL("1234*/:<abcd1234abcd1234abcd1234abcd1234abcd1234abcd1234abcd1234abcd1234abcd1234abcd1234abcd1234abcd1234abcd1234");

For Of

for (let i = 0; i < 1000; i++)
  validCharForOf("1234*/:<abcd1234abcd1234abcd1234abcd1234abcd1234abcd1234abcd1234abcd1234abcd1234abcd1234abcd1234abcd1234abcd1234");

 
for (let i = 0; i < 1000; i++)  validCharForOf("1234*/:<abcd1234abcd1234abcd1234abcd1234abcd1234abcd1234abcd1234abcd1234abcd1234abcd1234abcd1234abcd1234abcd1234");

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Experimental features:

Memory measurements supported only in Chrome.
For precise memory measurements Chrome must be launched with --enable-precise-memory-info flag.
More information: Monitoring JavaScript Memory

Test case name	Result
For Loop
For Of

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/107.0.0.0 Safari/537.36

Browser/OS: Chrome 107 on Linux

View result in a separate tab

Test name	Executions per second
For Loop	322.7 Ops/sec
For Of	288.4 Ops/sec

Autogenerated LLM Summary (model gemma2:9b, generated 7 months ago):

This benchmark compares the performance of two methods for iterating over a string in JavaScript: a traditional for loop and a for...of loop.

Here's what each method does:

validCharForL(s) (using a for loop):
1. Defines a string n containing characters considered invalid for Windows and Linux file paths.
2. Iterates through the input string s using a for loop, accessing each character by its index (i).
3. For each character:
  - It checks if the character is present in the n string (using includes).
  - If it is, it applies Unicode code point conversion (adding 65248) to "full-width" the character. This simulates how some special characters are displayed on certain systems.
  - Otherwise, it keeps the original character.
4. Returns the modified string r.
validCharForOf(s) (using a for...of loop):
1. Performs the same initial setup as the for loop version.
2. Iterates through each character (c) in the input string s directly using a for...of loop.
3. For each character c:
  - It checks if c is present in the n string (using includes).
  - If it is, applies Unicode code point conversion and retains the modified character.
  - Otherwise, keeps the original character.
4. Returns the modified string r.

Comparison:

Approach	`for` loop	`for...of` loop
Syntax	More verbose; requires explicit index management.	Simpler and more concise; iterates directly over values.
Performance	Can be slightly faster in some cases due to potentially lower overhead for accessing elements by index. However, the difference is often negligible.	Generally considered easier to read and maintain, and often performs comparably to `for` loops in modern JavaScript engines.

Alternatives:

Array methods: JavaScript provides array methods like .map() and .forEach() which can be used for similar tasks. They often have optimized implementations within the engine and might offer better performance than explicit loops in certain scenarios.
- Example: s.split('').map(c => n.includes(c) ? String.fromCharCode(c.charCodeAt() + 65248) : c).join('');

Key Takeaways:

The choice between a for loop and a for...of loop often comes down to readability and personal preference.
Modern JavaScript engines are highly optimized, so the performance difference between these loops is usually not significant in most practical applications.

LLMs can make mistakes. Check important info.

This benchmark compares the performance of two methods for iterating over a string in JavaScript: a traditional `for` loop and a `for...of` loop.

**Here's what each method does:**

* **`validCharForL(s)` (using a `for` loop):**
    1. Defines a string `n` containing characters considered invalid for Windows and Linux file paths.
    2. Iterates through the input string `s` using a `for` loop, accessing each character by its index (`i`).
    3. For each character:
       * It checks if the character is present in the `n` string (using `includes`).
       * If it is, it applies Unicode code point conversion (adding 65248) to "full-width" the character. This simulates how some special characters are displayed on certain systems.
       * Otherwise, it keeps the original character.
    4. Returns the modified string `r`.

* **`validCharForOf(s)` (using a `for...of` loop):**
   1. Performs the same initial setup as the `for` loop version.
   2. Iterates through each character (`c`) in the input string `s` directly using a `for...of` loop. 
   3. For each character `c`:
      * It checks if `c` is present in the `n` string (using `includes`).
      * If it is, applies Unicode code point conversion and retains the modified character.
      * Otherwise, keeps the original character.
    4. Returns the modified string `r`.

**Comparison:**

| Approach | `for` loop | `for...of` loop |
|---|---|---|
| **Syntax** | More verbose; requires explicit index management. | Simpler and more concise; iterates directly over values. |
| **Performance** | Can be slightly faster in some cases due to potentially lower overhead for accessing elements by index. However, the difference is often negligible. | Generally considered easier to read and maintain, and often performs comparably to `for` loops in modern JavaScript engines. |

**Alternatives:**

* **Array methods:**  JavaScript provides array methods like `.map()` and `.forEach()` which can be used for similar tasks. They often have optimized implementations within the engine and might offer better performance than explicit loops in certain scenarios. 
    * Example: `s.split('').map(c => n.includes(c) ? String.fromCharCode(c.charCodeAt() + 65248) : c).join('');`

**Key Takeaways:**

* The choice between a `for` loop and a `for...of` loop often comes down to readability and personal preference.
* Modern JavaScript engines are highly optimized, so the performance difference between these loops is usually not significant in most practical applications.

Related benchmarks:

For Loop vs For Of in iterating strings (version: 0)

validCharForL() and validCharForOf() iterate through a string and full-width any characters invalid for Windows and Linux, using, respectively, a for loop and a for of loop.

Comparing performance of: For Loop vs For Of

Created: 2 years ago by: Registered User

Jump to the latest result