# 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.

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 normal 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: 

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

const iterator = avengersGenerator(); // Creating iterator

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

```
[Source code on codesandbox.io](https://codesandbox.io/s/7jkr9y3o81)

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

```javascript
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`.

```javascript
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.

```javascript
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.

```javascript
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`.


```javascript
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: "Ultron", 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.

---
**UPDATE 1**: I finally got some time to write another blogpost about generators, so here it goes 👉 [Canceling promises with generators in ES6 Javascript](https://dev.to/phung_cz/canceling-promises-with-generators-in-es6-javascript-d01) 

---

## Thanks for reading

Let me know in the comments section how you feel about this **generators series**. If you love it, you know what to do! Share it with your friends and colleagues.

If you want me to cover some topics in the next post, DM me on here on [dev.to](https://dev.to/phung_cz) or on twitter [@phung_cz](https://twitter.com/phung_cz), or if you have any suggestions, feel free to comment below.

See ya next time and keep on hacking ✌