JS: Generator Function

By Xah Lee. Date: . Last updated: .

New in ES2015.

A generator function is a function that returns a generator object.

[see JS: Generator]

Generator function has the following syntax:

generator function declarationfunction * name (…) {…}

generator function expressionfunction * (…) {…}

Generator Method → defined inside object literal expression. {…, * name (…) {…}, …}

[see JS: Object Literal Expression]

The space before or after the asterisk * can be omitted.

Example:

// define a generator function
function * gf () {
    yield 3;
    yield 4;
    yield 5;
}

In the generator function body, you use yield instead of return. Each yield is a stopping point. (explained below.)

Here's a full example showing how it is used.

// example of using generator as iterable

// define a generator function
function * ff () {
    yield 3;
    yield 4;
    yield 5;
}

// generator function returns a generator object
const gg = ff();
// now gg is a generator

// because generator is also a iterable object
// we can use for-of loop on iterable object
for (let p of gg) {
    console.log ( p );
}
// prints
// 3
// 4
// 5

Purpose of Generator Function

Basically the only purpose of generator function is to create generator object.

In the body of generator function, you use yield instead of return. Each yield is a stopping point.

When generator function is called, it returns a generator object.

A generator object is both a Iterable and Iterator.

[see JS: Interface]

So, as a iterable, it can be used in for-of Loop.

Each time a generator is used as iterable (such as in for-of loop), it returns a value at the yield point, and when called again, it resumes computation at that yield point and return the next yield point's value. (this process can be infinite, such as when you have a yield in a infinite loop in the Generator Function body.)

[see JS: for-of Loop]

Most of the time, generator is used as a iterable or iterator.

Generator function provides a easy way to create iterable and iterator.

[see JS: Generator]

Type of Generator Function is Function

Type of Generator Function is a Generator Function object, and typeof operator returns "function".

Type of Generator is Generator object (and not a function object), and typeof operator returns "object".

// define a generator function
function * ff () {
    yield 3;
    yield 4;
    yield 5;
}

// type of Generator Function is function
console.log ( typeof ff === "function" ); // true
console.log ( Object.prototype.toString.call ( ff ) === "[object GeneratorFunction]" ); // true

const gg = ff();

// typo of Generator is object
console.log ( typeof gg === "object" ); // true

console.log ( Object.prototype.toString.call ( gg ) === "[object Generator]" ); // true

[see JS: Determine Type of Object]

Generator Function Constructor

Another way to create generator function is by calling the generator function constructor.

In JavaScript spec, generator function constructor is written as “GeneratorFunction”. But it is not a keyword you can use.

There's no syntax that represents generator function constructor “GeneratorFunction” , but you can get it by:

const GeneratorFunction = Object.getPrototypeOf ( function *(){} ).constructor ;

Once you have the constructor GeneratorFunction, you can create new generator function by the syntax:

GeneratorFunction (p1, p2, … , pn, body)

where all arguments are strings.

It works similarly to Function Constructor.

[see JS: Function Constructor]

For example,

const gf = Object.getPrototypeOf ( function *(){} ).constructor ; const ff = gf ( " yield 3; yield 4; yield 5;" );

is roughly equivalent to:

function * ff () { yield 3; yield 4; yield 5; }

Here's a full example.

const gf = Object.getPrototypeOf ( function *(){} ).constructor ;

// define a generator function
const ff = gf ( " yield 3; yield 4; yield 5;" )

// this is basically equivalent to
// function * ff () { yield 3; yield 4; yield 5; }

// generator function returns a generator object
const gg = ff();
// now gg is a generator object

// because generator is also a iterable object

// we can use for-of loop on iterable object
for (let p of gg) {
    console.log ( p );
}
// prints
// 3
// 4
// 5

In general, there's no practical use of Generator Function constructor. Use the syntax function * name () {…} instead.

The reason the generator function constructor object exist is so that JavaScript can maintain some language structure consistency. That is, each object X has a constructor object C that creates instances of X, and the constructor object C has property "prototype" that is the parent object of instances of X, etc.

JS Iterable ⭐

  1. Interface
  2. Iterable
  3. Iterator
  4. Iterator Prototype
  5. for-of Loop
  6. Spread Operator
  7. Generator
  8. Generator Function
Liket it? I spend 2 years writing this tutorial. Help me spread it. Tell your friends. Or, Put $5 at patreon.

Or, Buy JavaScript in Depth

If you have a question, put $5 at patreon and message me.

JavaScript in Depth

Basics

  1. JavaScript Basics
  2. true, false
  3. Operators
  4. Branch Control
  5. Loop
  6. Array Basics
  7. Object Basics
  8. RegExp Basics

Variable

  1. Value Types
  2. let
  3. const
  4. var
  5. var Order
  6. var Scope
  7. Global Variable
  8. Destructuring Assignment

String

  1. String Overview
  2. Template String
  3. Char, Code Unit, Codepoint
  4. String Escape Sequence
  5. Unicode Escape Sequence

Function

  1. Define Function
  2. Arrow Function ⭐
  3. Function Params
  4. “arguments” Object
  5. Rest Params ⭐
  6. Arg Default Value ⭐
  7. Arg Destructure ⭐
  8. f Declaration vs Expression
  9. Closure
  10. f call apply bind
  11. Functional Programing

Object Property

  1. Property Overview
  2. Property Key
  3. Dot vs Bracket Notation
  4. Create/Delete Property
  5. Get/Set Property
  6. Check Property Existence
  7. Access Property
  8. List Properties
  9. Property Attributes
  10. Getter/Setter
  11. Property Descriptor
  12. Symbol

Object and Inheritance

  1. Object Overview
  2. Object Type
  3. Find Object's Type
  4. Prototype Chain
  5. Create Object
  6. Object Literal Expr
  7. Create Object with Parent X
  8. Get/Set Parent
  9. Show Prototype Chain
  10. Prevent Adding Property
  11. Clone Object
  12. Test Object Equality
  13. Add Method to Prototype

Array

  1. Understand JS Array
  2. Create Array
  3. Sparse Array
  4. Array-Like Object
  5. Array How-To

Class

  1. “this” Binding
  2. What's Constructor?
  3. Property Key "prototype"
  4. Operator “new”
  5. Operator “instanceof”
  6. Property Key “constructor”
  7. Class
  8. Keyword “extends”
  9. Keyword “super”

Iterable ⭐

  1. Interface
  2. Iterable
  3. Iterator
  4. Iterator Prototype
  5. for-of Loop
  6. Spread Operator
  7. Generator
  8. Generator Function

Misc

  1. Set Object
  2. Map Object
  3. Try Catch Throw Finally
  4. Import/Export
  5. Promise
  6. Proxy
  7. ES2015 Features
  8. How to Convert ES5 to ES2015
  9. Style Guide
  10. Semicolon Rules
  11. Exclamation Before Function
  12. How to Determine Strict Mode?
  13. x.y.z Associativity
  14. Function Chain
  15. Random Number, Range, Integer, Element
  16. Timing JS Code
  17. Range Function for Array
  18. Random Array Element, Randomize Array
  19. Tagged Template String
  20. String to Number
  21. Format Number

Object Reference

  1. the Global Object
  2. Object 🙼 Object.prototype
  3. Array 🙼 Array.prototype
  4. Function 🙼 Function.prototype
  5. String 🙼 String.prototype
  6. RegExp 🙼 RegExp.prototype 🙼 RegExp Syntax
  7. Date 🙼 Date.prototype
  8. Set ⭐🙼 Set.prototype
  9. Map ⭐🙼 Map.prototype
  10. JSON
  11. Math
  12. Reflect
  13. Symbol ⭐🙼 Symbol.prototype
  14. Number 🙼 Number.prototype
  15. Boolean 🙼 Boolean.prototype

DOM How-To

  1. Basic DOM Methods
  2. Get Elements by ID, Tag, Name, Class, CSS Selector
  3. Change CSS
  4. Change Node Content
  5. Create/Insert Node
  6. Remove Node
  7. Get Element's Attribute Value
  8. Set Element's Attribute Value
  9. Remove Element's Attribute Value
  10. List/Add/Remove Class Attribute
  11. Add/Remove Event Handler
  12. Navigate DOM Tree

DOM Overview

  1. Browser Window Object, Document Object Model
  2. Intro to Event-Based Programing
  3. JavaScript Load Order
  4. What is Live Object
  5. NodeList vs HTMLCollection
  6. DOM: Whitespace Nodes

Basic DOM Methods

  1. Basic DOM Methods
  2. Node Type, Name, Value
  3. Navigate DOM Tree

HTML Form

  1. HTML Form
  2. Visit URL in a New Window
  3. Instant Field Validation
  4. Input Field Validation
  5. HTML: Input Range Slider

DOM How To

  1. Encode URL, Escape String
  2. Browser Info, Navigator Object
  3. Get URL (window.location)
  4. Web Cookies
  5. Web Storage
  6. Find Window Width
  7. Find Element Width
  8. WebSocket

Web Scripting Examples

  1. Disable Right Click
  2. document.write
  3. Image Rollover
  4. Pop-up New Window
  5. Digital Clock
  6. Stopwatch
  7. Fade a Element
  8. Fade a Element Using CSS Transition
  9. Shake Element
  10. How to Create Tooltip
  11. Falling Snow Effect
  12. JavaScript: Floating Box Following Scroll

DOM Misc

  1. Value of “this” in Event Handler
  2. Event Delegation
  3. Get Current Script Tag
  4. insertAfter Element
  5. Randomize List
  6. create Document Fragment
  7. innerHTML, nodeValue, textContent, innerText?

jQuery

  1. jQuery Basics
  2. jQuery() vs querySelectorAll()
  3. Write JQuery Plugin

node.js