Benchmark: reduce vs forEach vs for loop on a string

Script Preparation code:

var strToConvert = "yr89vi083hf*/:<>?\\|*/:<>?\\|*/:<>?\\|*/:<>?\\|*/:<>?\\|*/:<>?\\|984hijhfgvjhngkjqherkjfherh";

String.prototype.validFNCharReduce=function(o,e){
  const HW='"*/:<>?\\|',FW='＂＊／：＜＞？＼＼｜',F=String.fromCharCode;
  return Array.prototype.reduce.call(this,
           o && Object.hasOwn(o,"char") && (e=o.char, !0) ? (r,c) => r + (HW.includes(c)?e:c)                        :
           o?.reverse                                     ? (r,c) => r + (FW.includes(c)?F(c.charCodeAt(0)-65248):c) :
                                                            (r,c) => r + (HW.includes(c)?F(c.charCodeAt(0)+65248):c) ,
         "")
};
String.prototype.validFNCharForEach=function(o,e){
  const HW='"*/:<>?\\|',FW='＂＊／：＜＞？＼＼｜',F=String.fromCharCode;
  let r="";i
  Array.prototype.forEach.call(this,
    o && Object.hasOwn(o,"char") && (e=o.char, !0) ? c => r += (HW.includes(c)?e:c)                        :
    o?.reverse                                     ? c => r += (FW.includes(c)?F(c.charCodeAt(0)-65248):c) :
                                                     c => r += (HW.includes(c)?F(c.charCodeAt(0)+65248):c)
  )
  return r
};
String.prototype.validFNCharForLoop=function(o){
  const h='"*/:<>?\\|',f='＂＊／：＜＞？＼＼｜',F=String.fromCharCode;
  let c,e,r="",i=0,T=this,l=T.length;
  if(o && Object.hasOwn(o,"char"))
    for(e=o.char;i<l;i++)
      r+=h.includes(c=T[i])?e:c;
  else if(o?.reverse)
    for(;i<l;i++)
      r+=f.includes(c=T[i])?F(T.charCodeAt(i)-65248):c;
  else
    for(;i<l;i++)
      r+=h.includes(c=T[i])?F(T.charCodeAt(i)+65248):c;
  return r
};

Tests:

Array.prototype.reduce.call()
strToConvert.validFNCharReduce()
Array.prototype.forEach.call()
strToConvert.validFNCharForEach()
Conventional for loop
strToConvert.validFNCharForLoop()

Historical Performance Data aggregated from 7 community runs

Desktop Results:

Chrome 7 runs

Array.prototype.reduce.call()

134K/s

Conventional for loop

123K/s

Array.prototype.forEach.call()

28K/s

Fastest: Array.prototype.reduce.call() (4.7x faster)

View exact numbers

✓ Array.prototype.reduce.call(): 134,074 ops/sec
• Conventional for loop: 123,413 ops/sec
• Array.prototype.forEach.call(): 28,386 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.prototype.reduce.call()
Array.prototype.forEach.call()
Conventional for loop

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

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

Browser/OS: Chrome 138 on Windows

View result in a separate tab

Array.prototype.reduce.call()

411K/s

Conventional for loop

351K/s

Array.prototype.forEach.call()

0/s

View exact numbers

Test name	Executions per second
✓ Array.prototype.reduce.call()	410,622 Ops/sec
Conventional for loop	350,663 Ops/sec
Array.prototype.forEach.call()	0 Ops/sec

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

LLMs can make mistakes. Check important info.

**What is being tested?**

MeasureThat.net is testing the performance of three different approaches to iterate over a string in JavaScript:

1. `Array.prototype.reduce.call()`: This approach uses the `reduce()` method on an array, which is initialized with the string value. The callback function is applied to each element of the array, but since it's not actually creating an array, this approach is more like a loop.
2. `Array.prototype.forEach.call()`: This approach uses the `forEach()` method on an array, which iterates over each element of the array and executes the provided callback function.
3. A "Conventional for loop" (also known as a traditional for loop): This approach uses a classic for loop with an index variable to iterate over each character of the string.

**Options compared**

The three approaches are being compared in terms of their performance, measured in executions per second. The results will show which approach is the fastest on the specific hardware and browser used.

**Pros and cons of each approach:**

1. `Array.prototype.reduce.call()`:
	* Pros: Can be a concise way to chain multiple operations together.
	* Cons: May have performance implications due to the creation of an array (although in this case, it's not creating a traditional array).
2. `Array.prototype.forEach.call()`: This is essentially the same as the first approach, but with a different method name. The pros and cons are similar.
3. Conventional for loop:
	* Pros: Simple, easy to understand, and suitable for many use cases.
	* Cons: May be slower than the other two approaches due to the overhead of index management.

**Custom JavaScript library**

In this benchmark, MeasureThat.net is using a custom JavaScript library (`String.prototype.validFNCharReduce`, `String.prototype.validFNCharForEach`, and `String.prototype.validFNCharForLoop`) that defines a custom string validation function. This library is not part of the standard JavaScript specification and is used solely for demonstration purposes.

**Special JS feature or syntax**

There are no special JS features or syntax being tested in this benchmark. The only unusual aspect is the use of a custom library, which is not representative of typical JavaScript development scenarios.

**Other alternatives**

If you wanted to compare these approaches with other methods, here are some examples:

* `String.prototype.split()` and iterating over the resulting array
* Using a regular expression to iterate over the string (e.g., `RegExp.test()`)
* Using a V8-specific feature like `V8.String` with its built-in iteration methods

However, these alternatives would likely deviate from the scope of this specific benchmark.

reduce vs forEach vs for loop on a string (version: 0) Benchmark.js

Comparing performance of: `Array.prototype.reduce.call() vs Array.prototype.forEach.call() vs Conventional for loop`

Created: 2 years ago by: Registered User

Go to the latest result

Array.prototype.reduce.call()

Array.prototype.forEach.call()

Conventional for loop

Historical Performance Data aggregated from 7 community runs

Desktop Results:

Chrome 7 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

reduce vs forEach vs for loop on a string (version: 0) Benchmark.js

Comparing performance of: Array.prototype.reduce.call() vs Array.prototype.forEach.call() vs Conventional for loop

Created: 2 years ago by: Registered User

Go to the latest result

Array.prototype.reduce.call()

Array.prototype.forEach.call()

Conventional for loop

Historical Performance Data aggregated from 7 community runs

Desktop Results:

Chrome 7 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.prototype.reduce.call() vs Array.prototype.forEach.call() vs Conventional for loop`