ES2015 Generators

es2015-generators.markdown

ES2015 Generators

Playing with generators

A Pen by Dariusz Parys on CodePen.

License.

index.html

<button id="demo1">Demo 1</button>
<button id="demo2">Demo 2</button>
<div id="output">
</div>

script.js

class GeneratorDemo { * speakers() {
    yield "Dariusz Parys";
    yield "Christian Weyer";
    yield "Marco Richardson";
  }

  * [Symbol.iterator]() {
    yield "Dariusz Parys";
    yield "Christian Weyer";
    yield "Marco Richardson";
  }
}

let obj = new GeneratorDemo();
let gen = obj.speakers();

$("#demo1").click( () => { 
  $("<p>").text( gen.next().value ).appendTo($("#output"));
  $("<p>").text( gen.next().value ).appendTo($("#output"));
  $("<p>").text( gen.next().value ).appendTo($("#output"));
  $("<p>").text( gen.next().value ).appendTo($("#output"));
});

$("#demo2").click( () => {
  for( var name of obj ) {
    $("<p>").text(`Speaker: ${name}`).appendTo($("#output"));
  }
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>