Traceur ES6 Generators Part 1

• ES6 comes with a new feature named Generator.Generators comes with many feature to be used by JavaScript developer.
• I am going to post multiple articles on ES6 generators.This is part1 to get introduced with ES6 generator.In the upcoming posts we will learn more usage of Generators.
• In this demo,”We will learn about Generator declaration with a simple example”.
• The syntax of a ES6 generator declaration is as follows:

function* name([parameters]) {
   //generator definition
}

• A star * operator is used to declare a generator.
• A Generator function returns an iterator on call.A method next() can be called on this returned iterator .On call to next() method the Generator body gets executed up to the first yield statement.
• A yield statement returns a value from the iterator.The yield keyword returns an IteratorResult object. IteratorResult object has two properties value and done.
• The value property contains the current value for the iterator.The done property is Boolean type and represents whether Generator has fully completed.
• To demonstrate generator we have created a project named ES6GeneratorDemoPart1 and Traceur runtime is installed using Bower.Two subdirectories dev and out is created.The dev directory contains ES6 code and out directory contains the converted JavaScript code.The JavaScript file dev/my-generator.js file contains ES6 code and out/my-generator.js file contains the converted JavaScript code.The following screenshot shows the project structure.

• The dev/my-generator.js file contains the ES6 code for a generator named FruitGenerator.This FruitGenerator returns some fruit names using yield keyword.The following code shows the content dev/my-generator.js file.

var FruitGenerator = function*(){
    yield "Apple";
    yield "Orange";
    yield "Grapes";
    yield "Mango";
};

var aFruitGenerator = FruitGenerator(),
    nextFruit = aFruitGenerator.next(),
    messageElement = document.getElementById("message");

//next object  has value and done property
console.log(JSON.stringify(nextFruit));

while(!nextFruit.done){
    var liElement = document.createElement('li');
    liElement.innerText = nextFruit.value;
    messageElement.appendChild(liElement);
    nextFruit = aFruitGenerator.next();
}

• The out/my-generator.js file contains converted code for dev/my-generator.js file.The following code shows the content for out/my-generator.js file.

System.registerModule("../dev/my-generator.js", [], function() {
  "use strict";
  var __moduleName = "../dev/my-generator.js";
  var FruitGenerator = $traceurRuntime.initGeneratorFunction(function $__0() {
    return $traceurRuntime.createGeneratorInstance(function($ctx) {
      while (true)
        switch ($ctx.state) {
          case 0:
            $ctx.state = 2;
            return "Apple";
          case 2:
            $ctx.maybeThrow();
            $ctx.state = 4;
            break;
          case 4:
            $ctx.state = 6;
            return "Orange";
          case 6:
            $ctx.maybeThrow();
            $ctx.state = 8;
            break;
          case 8:
            $ctx.state = 10;
            return "Grapes";
          case 10:
            $ctx.maybeThrow();
            $ctx.state = 12;
            break;
          case 12:
            $ctx.state = 14;
            return "Mango";
          case 14:
            $ctx.maybeThrow();
            $ctx.state = -2;
            break;
          default:
            return $ctx.end();
        }
    }, $__0, this);
  });
  var aFruitGenerator = FruitGenerator(),
      nextFruit = aFruitGenerator.next(),
      messageElement = document.getElementById("message");
  console.log(JSON.stringify(nextFruit));
  while (!nextFruit.done) {
    var liElement = document.createElement('li');
    liElement.innerText = nextFruit.value;
    messageElement.appendChild(liElement);
    nextFruit = aFruitGenerator.next();
  }
  return {};
});
System.get("../dev/my-generator.js" + '');

• The demo.html file contains the traceur-runtime.js and out/my-generator.js script file.The following code shows the content of demo.html file.

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Understanding ES6 generator using Traceur Part 1 </title>
    <script src="bower_components/traceur-runtime/traceur-runtime.min.js"></script>
</head>
<body>
<ol id="message"></ol>
<script src="out/my-generator.js"></script>
</body>
</html>

• The output of demo.html file rendered as following screenshot:

• The demo code can be downloaded from the following link.

demo code download link