Rewriting Iterator, Generator example in ES6

In my previous post, I showed you a simple example of ES6 Iterator and Generator. In that example, I used simple JavaScript constructor functions to illustrate Iterator and Generator concepts, because I did not want to confuse the readers with ES6 classes. Let's fix that in this post.

Rewrite Basket class in ES6.

'use strict';

class Basket {

	constructor() {
		this.container = [];

	*[Symbol.iterator]() {
		for (let index = 0; index < this.container.length; index++) {
			yield this.container[index];

	add(item) {
		if (item) {

function test() {

	let fruitBasket, i, fruit;

	fruitBasket = new Basket();

	for (fruit of fruitBasket) {
		console.log('Fruit fetched is: ', fruit);



Now that we have a complte ES6 classes with Iterator/Generator in it, lets optimize our Iterator method a little bit.

Reusing Array's Iterator

If you notice, the Basket class uses an Array type container to hold the items. As Array type has a built-in Iterator, we can use that Iterator instead of writing our own in our classes (thanks to this tip). With this, we can rewrite our Iterator method like this:

[Symbol.iterator]() {
	return this.container[Symbol.iterator]();

Notice that our Iterator is no longer a generator function (lack of * syntax), because it need not be.


Chat with the Author



If you liked my writing, you may like my products