Understanding Generators in ES6 JavaScript with Examples

Understanding Generators in ES6 JavaScript with Examples

ES6 introduced a new way of working with functions and iterators in the form of Generators (or generator functions). Let’s see how we can create a generator in JavaScript

ES6 introduced a new way of working with functions and iterators in the form of Generators (or generator functions). A generator is a function that can stop midway and then continue from where it stopped. In short, a generator appears to be a function but it behaves like an iterator.

Fun Fact: async/await can be based on generators. Read more here.

Generators are intricately linked with iterators. If you don’t know about iterators, here is an article to better your understanding of them.

Here’s a simple analogy to have an intuition for generators before we proceed with the technical details.

Imagine you are reading a nail-biting techno-thriller. All engrossed in the pages of the book, you barely hear your doorbell ring. It’s the pizza delivery guy. You get up to open the door. However, before doing that, you set a bookmark at the last page you read. You mentally save the events of the plot. Then, you go and get your pizza. Once you return back to your room, you begin the book from the page that you set the bookmark on. You don’t begin it from the first page again. In a sense, you acted as a generator function.

Introduction

Let’s see how we can utilise generators to solve some common problems while programming. But before that, let’s define what generators are.

What are Generators?

A normal function such as this one cannot be stopped before it finishes its task i.e its last line is executed. It follows something called run-to-completion model.

function normalFunc() {
  console.log('I')
  console.log('cannot')
  console.log('be')
  console.log('stopped.')
}

The only way to exit the normalFunc is by returning from it, or throwing an error. If you call the function again, it will begin the execution from the top again.

In contrast, a generator is a function that can stop midway and then continue from where it stopped.

Here are some other common definitions of generators —

  • Generators are a special class of functions that simplify the task of writing iterators.
  • A generator is a function that produces a sequence of results instead of a single value, i.e you generate ​a series of values.

In JavaScript, a generator is a function which returns an object on which you can call next(). Every invocation of next() will return an object of shape —

{ 
  value: Any,
  done: true|false
} 

The value property will contain the value. The done property is either true or false. When the done becomes true, the generator stops and won’t generate any more values.

Here’s an illustration of the same —

Image for post

Normal Functions vs Generators

Note the dashed arrow that closes the yield-resume-yield loop just before Finish in Generators part of the image. There is a possibility that a generator may never finish. We’ll see an example later.

javascript es6 programming developer web-development

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

Why Web Development is Important for your Business

With the rapid development in technology, the old ways to do business have changed completely. A lot more advanced and developed ways are ...

Important Reasons to Hire a Professional Web Development Company

    You name the business and I will tell you how web development can help you promote your business. If it is a startup or you seeking some...

9 ES6 Features Every JavaScript Developer Should Know

ES6 brings more amazing features to the JavaScript language. So without any further ado, let’s dive right in to see what are they and how they can help you write code more efficiently.

JavaScript ES6 Basics in 15 Minutes

ES6 stands for ECMAScript 6. ECMAScript was created to standardize JavaScript, and ES6 is the 6th version of ECMAScript. ES6 Introduced an awesome easy syntax to write Javascript, it also has some extra useful functions that help you in your development process and makes things easier for you as a Developer.

What Javascript Spread Operator is, How It Works and How to Use It

JavaScript spread operator is one of the more popular features that were introduced in ES6. This tutorial will help you understand it. You will learn what spread operator is and how it works. You will also learn how to use it to copy and merge arrays and object literals, insert data and more.