Benchmark: Generator and for-of

Script Preparation code:

function* createGenerator() {
  var i;
  for (i = 0; i < 100; i++) {
    yield i;
  }
}

function createClosure() {
  var i = 0;
  return {
    [Symbol.iterator]() {
      return this;
    },
    next() {
      var result;
      if (i < 100) {
        result = {
          value: i,
          done: false
        };
      } else {
        result = {
          value: undefined,
          done: true
        };
      }
      i++;
      return result;
    }
  };
}

Tests:

ES6 generator
var gen = createGenerator(), result; for (result of gen) { window.result = result.value; }
Closure polyfill
var gen = createClosure(), result; for (result of gen) { window.result = result.value; }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
ES6 generator
Closure polyfill

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Android 13; Mobile; rv:131.0) Gecko/131.0 Firefox/131.0

Browser/OS: Firefox Mobile 131 on Android

View result in a separate tab

Test name	Executions per second
ES6 generator	13289.6 Ops/sec
Closure polyfill	18816.1 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided JSON to explain what is being tested and compare different approaches.

**Benchmark Definition**

The benchmark defines two test cases:

1. **Generator and for-of**: This test case uses a generator function `createGenerator()` that yields values from 0 to 99.
2. **Closure polyfill**: This test case uses a closure function `createClosure()` that returns an iterator object with `next()` method.

**Options compared**

The benchmark compares the performance of two approaches:

1. **ES6 generator**: The first test case uses the built-in `for-of` loop to iterate over the generator values.
2. **Closure polyfill**: The second test case uses a closure function that returns an iterator object, which is then used in a traditional `for` loop.

**Pros and cons of each approach**

1. **ES6 generator**:
	* Pros: Native support for generators, efficient iteration.
	* Cons: May not be supported by older browsers or environments.
2. **Closure polyfill**:
	* Pros: Wide browser compatibility, can be used in older environments.
	* Cons: Additional complexity, may introduce performance overhead.

**Library usage**

In both test cases, the `createGenerator()` and `createClosure()` functions use the built-in JavaScript iterator API to return an iterator object. The iterator API is a part of the ECMAScript standard, so it's widely supported across browsers.

**Special JS feature or syntax**

Both test cases use ES6 features:

1. **Generators**: Introduced in ECMAScript 2015 (ES6), generators allow creating iterators that can be used to iterate over values.
2. **Closures**: Also introduced in ECMAScript 2015, closures enable creating functions that have access to their own scope and can capture variables from that scope.

**Other alternatives**

If you wanted to test alternative approaches, you might consider:

1. **Manual iteration using `forEach()` or `for` loops**: These would replace the built-in iterator API.
2. **Other closure-based implementations**: You could experiment with different closure patterns or variations on the `createClosure()` function.

Keep in mind that these alternatives may introduce performance overhead, compatibility issues, or added complexity, depending on the specific implementation and test case requirements.

Related benchmarks:

Generator and for-of (version: 0)

Comparing performance of: ES6 generator vs Closure polyfill

Created: 2 months ago by: Guest

Jump to the latest result

ES6 generator

Closure polyfill

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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