The Basics Of ES6 Generators

Author: palashmon

.editorconfig

@@ -0,0 +1,8 @@
+root = true
+
+[*]
+indent_style = tab
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true

.gitattributes

@@ -0,0 +1,2 @@
+* text=auto
+*.js text eol=lf

.gitignore

@@ -0,0 +1,7 @@
+node_modules
+.DS_Store
+*.log
+.idea
+.vscode/
+.eslintrc
+.eslintignore

README.md

@@ -1,2 +1,10 @@
-# learn-generators
-Learning about ES6 Generators: Complete Series
+# Learn ES6 Generators
+
+This repo is used to learn and explore more about ES6 Generators.
+
+Topics covered:
+
+- [x] The Basics Of ES6 Generators
+- [x] Diving Deeper With ES6 Generators
+- [x] Going Async With ES6 Generators
+- [x] Getting Concurrent With ES6 Generators

package.json

@@ -0,0 +1,24 @@
+{
+	"name": "learn-generators",
+	"private": true,
+	"version": "1.0.0",
+	"description": "This repo is used to learn and explore more about ES6 Generators.",
+	"main": "index.js",
+	"scripts": {
+		"test": "echo \"Error: no test specified\" && exit 1"
+	},
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/palashmon/learn-generators.git"
+	},
+	"keywords": [],
+	"author": "Palash Mondal",
+	"license": "MIT",
+	"bugs": {
+		"url": "https://github.com/palashmon/learn-generators/issues"
+	},
+	"homepage": "https://github.com/palashmon/learn-generators#readme",
+	"dependencies": {
+		"moment": "^2.24.0"
+	}
+}

src/1-Basics/ex1.js

@@ -0,0 +1,21 @@
+/**
+ * Run To Completion
+ * Functions: once the function starts running, it will always
+ * run to completion before any other JS code can run.
+ */
+const { log, delaySync } = require('../log');
+
+setTimeout(() => {
+	log('\nHello World');
+}, 1);
+
+function main() {
+	for (let i = 0; i <= 10; i += 1) {
+		log(i);
+		delaySync(500);
+	}
+}
+
+main();
+// 0..10
+// "Hello World"

src/1-Basics/ex2.js

@@ -0,0 +1,28 @@
+/**
+ * Syntax of these new and exciting generator functions.
+ * Generators are a special class of functions that simplify the task of writing iterators.
+ * A generator is a function that produces a sequence of results instead of a single value, i.e you generate a series of values.
+ */
+const { log, delaySync } = require('../log');
+
+// Creating a Generator
+function* generatorFunction() {
+	log('\nThis will be executed first.');
+	yield 'Hello, ';
+
+	delaySync(2000, !0);
+
+	log('\nI will be printed after the pause');
+	yield 'World!';
+}
+
+const generatorObject = generatorFunction();
+log(generatorObject.next().value); // next = { value:'Hello,', done:false }
+// This will be executed first.
+// Hello,
+log(generatorObject.next().value, '\n'); // next = { value:'World!', done:false }
+// I'm 2000 ms sync delay...
+// I will be printed after the pause
+// World!
+log(generatorObject.next().value); // next = { value:undefined, done:true }
+// undefined

src/1-Basics/ex3.js

@@ -0,0 +1,21 @@
+/**
+ * Iterators and generators
+ *
+ * Since generators are also iterables, they can be used to implement iterables
+ * without the extra boilerplate code. Let’s see a simple example.
+ */
+const { log, delaySync } = require('../log');
+
+// Generator function
+function* iterableObj() {
+	yield 'This';
+	delaySync(600);
+	yield 'is';
+	delaySync(600);
+	yield 'iterable.';
+}
+
+// Iterators
+for (const val of iterableObj()) {
+	log(val, '\n');
+}

src/1-Basics/ex4.js

@@ -0,0 +1,38 @@
+/**
+ * Iterators and generators
+ *
+ * Processing each of the items in a collection is a very common operation.
+ * JavaScript provides a number of ways of iterating over a collection,
+ * from simple for loops to map() and filter().
+ * Iterators and Generators bring the concept of iteration directly into the core language
+ * and provide a mechanism for customizing the behavior of for...of loops.
+ */
+const { log, delaySync } = require('../log');
+
+// Generator functions
+function* makeRangeIterator(start = 0, end = 100, step = 1) {
+	for (let i = start; i < end; i += step) {
+		yield i;
+	}
+}
+
+// Iterators
+const it = makeRangeIterator(1, 10, 2);
+
+// We can use for...of
+/*
+for (const val of it) {
+	log(val);
+	delaySync(600);
+}
+*/
+
+// Or, while loop also like this
+let result = it.next();
+while (!result.done) {
+	log(result.value); // 1 3 5 7 9
+	result = it.next();
+	delaySync(600);
+}
+
+log('\nIterated over the sequence');

src/log.js

@@ -0,0 +1,22 @@
+const moment = require('moment');
+
+const log = function(...args) {
+	const time = [moment().format('HH:mm:ss:')];
+	Array.prototype.push.apply(time, args);
+	console.log.apply(null, args);
+};
+
+// Not a generator, just function
+const delaySync = function(time, displayLog = false) {
+	if (displayLog) log("\nI'm", time, 'ms sync delay...');
+	const endTime = new Date().valueOf() + time;
+	let now = new Date();
+	while (now.valueOf() < endTime) {
+		now = new Date();
+	}
+};
+
+module.exports = {
+	log,
+	delaySync
+};