Using ES6 generators in for loops

Generator functions are a new feature in ES6. A generator is a function that can be entered multiple times and each time it will return something else. Generators are definitely strange at first. If you are familiar with the yield keyword in C# and how it is used then you’ll catch up with generators in ES6 quicker than others. I’m not aware of a similar feature in Java. Generators are strongly linked to iterators and arrays as we’ll see in a bit. I believe that Python uses yield as well.

The best thing is if we jump right into it.

The keyword to learn for generators is “yield” like in C#. A generator function must also be decorated with a star *. Here’s an example of a generator function:

function* programmingLanguages() {
  yield 'C#'
  yield 'Java'
  yield 'JavaScript'
  yield 'F#'

Looks funny, right? Let’s try to execute the function:


Nothing happens.

It turns out that we have to push a little harder and apply the next() function to get our lazy generator moving:

let langGenerator = programmingLanguages()
let next =

Here comes the next interesting bit. will return – or yield – an object with two properties: value and done. Here’s what “next” looks like after the next() function was applied for the first time:


Hmm, ok, let’s call next again:


…and again…:


…almost there…:


…until we finally get the following:


We still don’t know what on Earth that was but it was fun, wasn’t it? So we have a generator function called programmingLanguages() with a bunch of yield statements. Upon calling the function with next() we enter the function but exit it after yielding the first value “C#”. Then we call next() again, re-enter the function and continue where code execution was left off. We return “Java” this time. This entering-exiting cycle continues until we hit the last yield function and next() returns “done”.

We can use these properties to build a while-loop to iterate through the generator:

function iterateThroughLanguages() {
	let langGenerator = programmingLanguages()
	let next =
	while (!next.done) {
		next =

You’ll see that the boolean check for the while loop is based on the “done” property of the object returned by the generator.

However, there’s a much better way of iterating through generators using for-of loops:

for (let lang of programmingLanguages()) {

A for-of loop is a perfect match for iterating through generators in ES6.

View all posts related to JavaScript here.


About Andras Nemes
I'm a .NET/Java developer living and working in Stockholm, Sweden.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


A great site

Elliot Balynn's Blog

A directory of wonderful thoughts

Robin Sedlaczek's Blog

Developer on Microsoft Technologies

HarsH ReaLiTy

My goal with this blog is to offend everyone in the world at least once with my words… so no one has a reason to have a heightened sense of themselves. We are all ignorant, we are all found wanting, we are all bad people sometimes.

Softwarearchitektur in der Praxis

Wissenswertes zu Webentwicklung, Domain-Driven Design und Microservices

the software architecture

thoughts, ideas, diagrams,enterprise code, design pattern , solution designs

Technology Talks

on Microsoft technologies, Web, Android and others

Software Engineering

Web development

Disparate Opinions

Various tidbits

chsakell's Blog

Anything around ASP.NET MVC,WEB API, WCF, Entity Framework & AngularJS

Cyber Matters

Bite-size insight on Cyber Security for the not too technical.

Guru N Guns's

OneSolution To dOTnET.

Johnny Zraiby

Measuring programming progress by lines of code is like measuring aircraft building progress by weight.

%d bloggers like this: