- In my previous post we have learn some basic use of ES6 generator.This post demonstrate another feature of ES6 generator.
- The best feature of the ES6 Generators is that we can pause the code execution using next() method and a yield expression.It means when a next() method is called on the Generator the codes are executed up to the next yield statement.
- We can also pass a parameter to the generator using next() method.The input parameter used in current paused yield expression.
- In this demo,”We will learn how to pass parameter to the Generator using next() method and yield expression”.
- To demonstrate generator we have created a project named ES6GeneratorDemoPart3 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.
- This demo is all about calculating whole square using algebraic elementary formula.The following image shows the formula for calculating whole square.
- The following code dev/my-generator.js contains a generator named WholeSquareGenerator which takes a number as input.This WholeSquareGenerator is used to calculate the whole square of a+b is equal to square a+ square b + 2*a*b.The following code takes a=2 and b=3 to calculate the whole square and prints the result 25 in the browser.
var WholeSquareGenerator = function*(number){
var a= 1 * (yield number),
b= yield number;
return (Math.pow(a,2)+Math.pow(b,2)+2*a*b);
};
// a=2, b=3 => a+b = 5 => result = 25
var squareGenerator = WholeSquareGenerator(1),
messageElement = document.getElementById("message"),
yieldResult1 = squareGenerator.next(),
yieldResult2 = squareGenerator.next(2),
result = squareGenerator.next(3);
console.log("Last result return: ",result);
var h1Element = document.createElement('h1');
h1Element.innerText = result.value;
messageElement.appendChild(h1Element);
- The following code shows the content of out/my-generator.js file which is generated by Traceur compilation of dev/my-generator.js file.
System.registerModule("../dev/my-generator.js", [], function() {
"use strict";
var __moduleName = "../dev/my-generator.js";
var WholeSquareGenerator = $traceurRuntime.initGeneratorFunction(function $__0(number) {
var a,
b,
$__1,
$__2;
return $traceurRuntime.createGeneratorInstance(function($ctx) {
while (true)
switch ($ctx.state) {
case 0:
$ctx.state = 2;
return number;
case 2:
$__1 = $ctx.sent;
$ctx.state = 4;
break;
case 4:
a = 1 * $__1;
$ctx.state = 10;
break;
case 10:
$ctx.state = 6;
return number;
case 6:
$__2 = $ctx.sent;
$ctx.state = 8;
break;
case 8:
b = $__2;
$ctx.state = 12;
break;
case 12:
$ctx.returnValue = (Math.pow(a, 2) + Math.pow(b, 2) + 2 * a * b);
$ctx.state = -2;
break;
default:
return $ctx.end();
}
}, $__0, this);
});
var squareGenerator = WholeSquareGenerator(1),
messageElement = document.getElementById("message"),
yieldResult1 = squareGenerator.next(),
yieldResult2 = squareGenerator.next(2),
result = squareGenerator.next(3);
console.log("Last result return: ", result);
var h1Element = document.createElement('h1');
h1Element.innerText = result.value;
messageElement.appendChild(h1Element);
return {};
});
System.get("../dev/my-generator.js" + '');
- The content of demo.html file is as follows which uses the out/my-generator.js and traceur runtime to run the demo in browser environment.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Understanding ES6 generator using Traceur Part 3 </title>
<script src="bower_components/traceur-runtime/traceur-runtime.min.js"></script>
</head>
<body>
<div id="message"></div>
<script src="out/my-generator.js"></script>
</body>
</html>
- The output of this demo is rendered as following screenshot.
- The demo code can be downloaded from the following link.
