Michio JP

Michio JP

1557804738

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

What is GEEK

Buddha Community

Understanding Generators in ES6 Javascript
anita maity

anita maity

1619614811

Random Password Generator Using JavaScript, HTML & CSS

Random Password Generator is a program that automatically generates a password randomly. Those generated passwords are mix with numbers, alphabets, symbols, and punctuations. This type of program helps the user to create a strong password.

Step By Step Tutorial :https://cutt.ly/ZbiDeyL

#password generator #random password generator #python password generator #random password generator javascript #html #javascript

Niraj Kafle

1589255577

The essential JavaScript concepts that you should understand

As a JavaScript developer of any level, you need to understand its foundational concepts and some of the new ideas that help us developing code. In this article, we are going to review 16 basic concepts. So without further ado, let’s get to it.

#javascript-interview #javascript-development #javascript-fundamental #javascript #javascript-tips

Vincent Lab

Vincent Lab

1605177756

JavaScript Password Generator

In this video, I will be showing you how to build a password generator in JavaScript.

#password generator #random password generator #password #javascript #javascript project #javascript fun project

Vincent Lab

Vincent Lab

1605099909

JavaScript Password Generator - Part 2

In this video, I will be showing you how to build a password generator in JavaScript

#password generator #random password generator #javascript #js #javascript fun project #javascript project

Wilford  Pagac

Wilford Pagac

1602673200

Understanding JavaScript Generators And Basic Use-Cases

In one of my many deep-dives about JavaScript, I came across generators. They looked interesting.

Then, I looked for some use-cases for generators. And looked. And looked.

Eventually, I found a simple generator throttle example. After all this research, I resolved to see how I could use them. Since I was working on an Asynchronous JavaScript talk (JavaScript Enjoys Your Tears), I wrote a state machine to facilitate positioning within the slide deck and managing font size on the presentation side.

What I found is documented here …

Generators are functions which can be exited and later re-entered. Their context (variable bindings) will be saved across re-entrances. - MDN.

The ability of functions to be paused and then resumed again. A generator returns an iterator. On creation, the code inside the generator is not executed.

  • Solves “reasoning about” issues.
  • Allows for non-“run-to-completion” behavior. Localized blocking only.
  • Syntactic form of a state machine.
  • Cooperative concurrency versus preemptive concurrency.

Advantages of Generators

Lazy Evaluation

This is an evaluation model which delays the evaluation of an expression until its value is needed. That is, if the value is not needed, it will not exist. It is calculated on demand.

Memory Efficient

A direct consequence of Lazy Evaluation is that generators are memory efficient. The only values generated are those that are needed. With normal functions, all the values must be pre-generated and kept around in case they need to be used later. However, with generators, computation is deferred.

Use-Cases

Here are some Generator use-cases …

Infinitely Repeating Array

This is the article (by Shawn Reisner) that got me interested in this topic in the first place.

#javascript #web-development #generator #use-cases #coding #productivity #es6 #code-quality