Understanding Generators in ES6 Javascript

Understanding Generators in ES6 Javascript

Maybe you have heard about this feature in ES6 or you just didn’t have time to play with it.

Maybe you have heard about this feature in ES6 or you just didn’t have time to play with it.

It is something, that I have learned a few days ago and it's super cool.

Let me explain it to you in a few steps.

So Generators looks like a similar function, but it allows us to pause the execution of the function and continue it later.

So below you can see an example of the generator and we will break it down to see how it works:

function* avengersGenerator() { // Declaring the generator
  yield "Hulk"; // Pausing the execution
  yield "Thor";
  yield "Iron man";
  return "Ultron"; // Example of finishing the generator
  yeild "Spider man";
}

const iterator = avengersGenerator(); // Creating iterator

iterator.next(); // Iterating on the generator

Declaring the generator

Generators look similar to a normal function, the only difference is we have to define an * (asterisk) after the word function.

function* avengersGenerator() {
  ...
}

Yield it!

We can yield the function, which basically would stop the execution of the function when it gets to the first yield.

function* avengersGenerator() {
  yield "Hulk" // The execution would pause here.
  yield "Iron man" // When we resume we would start here.
}

Creating the iterator

On iterator, we can call. So by this, we will prepare our generator for action.

const iterator = avengersGenerator();

Next method

This enables us to continue the execution of the function. Also, this method provides us with the object with the yielded value and whether the generator has yielded its last value, as a boolean.

iterator.next(); // [1] Object {value: "Hulk", done: false}
iterator.next(); // [2] Object {value: "Thor", done: false}
iterator.next(); // [3] Object {value: "Iron man", done: false}
iterator.next(); // [4] Object {value: "undefined", done: true}

Return / Exiting

Once a return is being called, it would finish the generator. It basically sets the done property to true.

function* avengersGenerator() {
  yield "Hulk";
  return "Ultron"; // Example of finishing the generator
  yield "Thor"; //  Sad Thor and Spiderman wouldn't be called
  yield "Spiderman";
}

iterator.next(); // [1] Object {value: "Hulk", done: false}
iterator.next(); // [2] Object {value: "Utron", done: false}
iterator.next(); // [3] Object {value: "undefined", done: true}

In my opinion, generators are quite a cool thing to play with or at least to know what it does.

In the next post, I will explain, how generators helped me to solve one case at my work thanks to the possibility to cancel the promise when needed with generators in ES6.

es6 javascript

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

What is ES6, What is ECMAScript & Why You Should Learn it? – JavaScript ES6 for Beginners

Learn what ES6 is, what ECMAScript is, and why it is important to learn for writing modern JavaScript.

Learn Modern JavaScript ES6 | ES7 | ES8

In this article we are going to Learn Modern JavaScript [ ES6 | ES7 | ES8 ] , so as you know JavaScript is a scripting language that was introduced for

The essential JavaScript concepts that you should understand

The essential JavaScript concepts that you should understand - For successful developing and to pass a work interview

JavaScript ES6: Var, Let, and Const || ES6 Variable Declarations Explained

Learn the 2 new keywords that ES6 brings for declaring variables: let & const, when and why to use them instead of the old var keyword. JavaScript ES6: Var, Let, and Const || ES6 Variable Declarations Explained

JavaScript ES6: Var, Let, and Const || ES6 Variable Declarations Explained

JavaScript ES6: Var, Let, and Const || ES6 Variable Declarations Explained. Learn the 2 new keywords that ES6 brings for declaring variables: let & const, when and why to use them instead of the old var keyword.