Benchmark: for-of vs forEach (a)

HTML Preparation code:

<script>
  var _obj = (() => {

      const obj = {};
      for (let i = 0; i < 800; i++) {
          let c = Math.random();
          const t = Math.random() * 1000001531;

          obj[Math.random().toString().substring(2)] = c < 0.3 ? [t % 211, t % 521, t % 809] : c > 0.6 ? { x: t % 373, y: t % 499, z: t % 1049 } : new Function(`console.log(${Math.random()})`);


      }

      return obj;

  })()
</script>

Tests:

test 1
const obj = _obj; let c=0; for(const k of Object.keys(obj)){ c+=(typeof obj[k] === 'function')*2; } for(const k of Object.keys(obj)){ c+=(typeof obj[k] === 'object')*3; } for(const k of Object.keys(obj)){ c+=(typeof obj[k]).length; } for(const k of Object.keys(obj)){ c+=(k).length; } for(const k of Object.keys(obj)){ c+=(typeof obj[k] === 'function')*2; } for(const k of Object.keys(obj)){ c+=(typeof obj[k] === 'object')*3; } for(const k of Object.keys(obj)){ c+=(typeof obj[k]).length; } for(const k of Object.keys(obj)){ c+=(k).length; } for(const k of Object.keys(obj)){ c+=(typeof obj[k] === 'function')*2; } for(const k of Object.keys(obj)){ c+=(typeof obj[k] === 'object')*3; } for(const k of Object.keys(obj)){ c+=(typeof obj[k]).length; } for(const k of Object.keys(obj)){ c+=(k).length; } window.tmp_r1 = c;
test 2
const obj = _obj; let c=0; Object.keys(obj).forEach(k=>{ c+=(typeof obj[k] === 'function')*2; }); Object.keys(obj).forEach(k=>{ c+=(typeof obj[k] === 'object')*3; }); Object.keys(obj).forEach(k=>{ c+=(typeof obj[k]).length; }); Object.keys(obj).forEach(k=>{ c+=(k).length; }); Object.keys(obj).forEach(k=>{ c+=(typeof obj[k] === 'function')*2; }); Object.keys(obj).forEach(k=>{ c+=(typeof obj[k] === 'object')*3; }); Object.keys(obj).forEach(k=>{ c+=(typeof obj[k]).length; }); Object.keys(obj).forEach(k=>{ c+=(k).length; }); Object.keys(obj).forEach(k=>{ c+=(typeof obj[k] === 'function')*2; }); Object.keys(obj).forEach(k=>{ c+=(typeof obj[k] === 'object')*3; }); Object.keys(obj).forEach(k=>{ c+=(typeof obj[k]).length; }); Object.keys(obj).forEach(k=>{ c+=(k).length; }); window.tmp_r2 = c;

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
test 1
test 2

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 124 on Windows

View result in a separate tab

Test name	Executions per second
test 1	3487.5 Ops/sec
test 2	3374.3 Ops/sec

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

LLMs can make mistakes. Check important info.

**Benchmark Overview**

The provided benchmark measures the performance difference between two approaches for iterating over an object in JavaScript: `for...of` and `forEach`. The test creates a large object with random properties, each containing different types of values.

**Options Compared**

There are three options compared:

1. **For-of**: Uses the `for...of` loop to iterate over the object's keys.
2. **forEach**: Uses the `forEach` method to iterate over the object's keys.
3. **No iteration**: A baseline test that simply returns the object without iterating over its properties.

**Pros and Cons of Each Approach**

1. **For-of**
	* Pros:
		+ More readable and concise code
		+ Allows for direct access to the property value
	* Cons:
		+ Requires support for modern JavaScript features (ECMAScript 2015+)
2. **forEach**
	* Pros:
		+ Widely supported in older browsers and engines
		+ Can be used with other iterable objects, not just objects
	* Cons:
		+ Less readable and more verbose code
3. **No iteration**
	* Pros: None
	* Cons:
		+ Does not accurately reflect real-world usage of object iteration

**Other Considerations**

* The test uses a large object with random properties to ensure that the results are representative of performance in real-world scenarios.
* The `for...of` loop is only available in modern browsers and engines, so this test may not be relevant for older environments.
* The `forEach` method is widely supported, but its performance may vary depending on the specific implementation.

**Library Used**

None. This benchmark uses native JavaScript features only.

**Special JS Feature or Syntax**

The test uses the `for...of` loop and the `forEach` method, which are both modern JavaScript features introduced in ECMAScript 2015+. If you're running this test with an older engine or browser, you may need to transpile the code using a tool like Babel.

**Benchmark Preparation Code**

The script preparation code generates a large object with random properties and assigns them values. The `for...of` loop is used to iterate over the object's keys and accumulate a counter value.

**Individual Test Cases**

Each test case has two iterations: one for each approach (For-of and forEach). The results are stored in the `c` variable, which is then returned as part of the benchmark definition.

Related benchmarks:

for-of vs forEach (a) (version: 0)

Comparing performance of: test 1 vs test 2

Created: 2 years ago by: Guest

Jump to the latest result

test 1

test 2

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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