ES6 Generators and its practical Uses

What are the generators in ES6?

In ES6, now we have a new way of function implementation — Generators. These are basically functions that we can stop at any point and continue them exactly from the same point where we left earlier. Confusing?

So we will start with normal function- we call a normal function in javascript, it only stops after executing the whole code of that function. So for example, if we have a function like 

function normalFunction() {
 console.log(‘I’)
 console.log(‘am’)
 console.log(‘normal’)
}

so when we call normalFunction(); it will execute it and print- ‘I am normal’, after that it will stop. pretty easy right. Some people call it Run to completion which is pretty straight forward.

Now let’s write some generator syntax and how they are different from the earlier simple functions.

Syntax

A simple example of how we write a generator function. I know it looks like pretty scary, lot of new words and syntax. and no real world example. bear with me, first have a look on syntax we get over here.

function* generator(i) {
 yield i;
 yield i + 10;
}
var gen = generator(10);
console.log(gen.next().value);
// expected output: 10
console.log(gen.next().value);
// expected output: 20

To write a generator function you need to add this pretty star after the function (function*). this tells our compiler that its a generator function.

Apart from that, we have — 

yield — yield we use to pause the function from inside itself. Nothing can pause a generator from the outside; it pauses itself when it comes across a yield. 

next — Generator function typically returns an object on which you can call next(). Every invocation next() will return an object like —

{ 
  value: Any,
  done: Boolean
}

So in the above example, we wrote a generator function generator, after calling it returns us object gen, which we are using to yield the value using next().value, whenever we need them. right. Cool!

Why the real question is why the hell we need it?

In early carrier, in development, you won’t face many problems where generators are required if you find there is always a way to do things in javascript. So it’s not something whiout which you can’t survive, its more like enhancement in writing pretty and easy code.

So let’s write a practical scenario where we really need it.

I am a string in which I want to replace my GitHub user name with the GitHub link whever we are using it.

Sample String —” there are many employees from our company which has good contribution to GitHub. Like @one @two and @three. Where @three has good rating.”

In this string, I want to link the user name with the actual profile link. How we will do it?

In normal cases, we will parse the whole string then create some sort of data structure like a tree or something and then we will replace the name with links. It’s doable but pretty complicated. 

So let’s use Generators for it.

• First, we will write some sort of regex to get the username

const UserRegex = new RegExp(/@(\w+)/, "g");

• Now we will write our generator function using RegEx — 

function* getUsernames(string) {   
 let match = null;   
 do {       
 match = UserRegex.exec(string);       
 if (match) {  
          yield match;        
}    
} while (match);}

Over here we have our getUsername generator function which takes string as param and yield matching name whenever we need it.

• Call our generator to get the values — 

for (const username of getUsernames(string)) { 
 console.log(username)
}

Now, this is interesting, you can see we are not calling next().value , again and again, we are simply using for … of loop. In ES6 we can use this loop as well to get the values from the generators.

output:

["@one", "one"]
["@two", "two"]
["@three", "three"]
["@three", "three"]

That’s a great way of extracting the username from a string. So you can see by using generators we solved the pretty complex problems quickly.

That’s where generators are magic!

We here at HYR Global Source have a very deep understanding of web development growing process, In the last 5 years, we have worked with various clients and students, and helped them in creating better products and careers respectively. 

In HYR Global Source, We have dedicated mentorship programs for students and software professionals to get into the world of web development. If it is something which interests you please connect us here – https://www.hyrglobalsource.com/contact.html

If you already well versed in technology, then we are always looking for bright minds like you, Please check out career page here – https://www.hyrglobalsource.com/careers.html