Best of Modern JavaScript — Generator Best Practices

Since 2015, JavaScript has improved immensely.

It’s much more pleasant to use it now than ever.

In this article, we’ll look at JavaScript generators and new regex features.

The Asterisk

The asterisk for generator functions has an asterisk.

If must be between the function keyword and the function name.

And it can have any kind of spacing.

But usually, it has this format:

function* gen() {
  //..
}

Generator Function Declarations and Expressions

Generator function declarations and expressions are both valid.

We can write generator function declarations by writing:

function* gen() {
  //..
}

And we can create generator expressions by assigning a function declaration to a variable:

const gen = function* () {
  //..
}

Generator Method Definitions

We can add generator method definitions by writing:

const obj = {
  * gen(x, y) {
    //...
  }
};

We have the asterisk before the method name.

This is a shorthand for the following:

const obj = {
  gen: function*(x, y) {
    //...
  }
};

Generator method definitions are similar to getters and setters.

For example, we can write:

const obj = {
  get foo() {
    //...
  },
  set foo(value) {
    //...
  }
};

Like the asterisk, get and set are modifiers for the foo methods.

Recursive yield

We can add an asterisk to yield to call another generator function from a generator function.

For instance, we can write:

function* foo(x) {
  //...
  yield* foo(x - 1);
  //..
}

We recursively call foo with the yield* keyword.

Why Use the function* Keyword for Generator Functions?

The function* keyword is chosen for generator functions because the keyword generator might be used by something else.

yield

yield is a reserved word in strict mode.

So it can’t be used with it on.

If the ES6 code is in sloppy mode, then the keyword becomes a contextual keyword that’s available only inside generators.

New Regex Features

New regex features include the /y flag to let us anchor the starting point for the search to the lastIndex property of a regex object.

This is similar to the ^ anchor, but the match for ^ always starts from 0.

This means the match is useful for use with the g flag.

We can use it to match a pattern multiple times.

It’s also useful to find matches immediately after its predecessor.

For example, we can use the regex.prototype.exec method to find all the matches from a string.

If we have:

const REGEX = /foo/;

REGEX.lastIndex = 8;
const match = REGEX.exec('barfoobarfoo');
console.log(match.index);
console.log(REGEX.lastIndex);

Then index is ignores the lastIndex property of the regex, but if we add the g flag:

const REGEX = /foo/g;

REGEX.lastIndex = 8;
const match = REGEX.exec('barfoobarfoo');
console.log(match.index);
console.log(REGEX.lastIndex);

The pattern search starts with the lastIndex index value.

If y is set:

const REGEX = /foo/y;

REGEX.lastIndex = 9;
const match = REGEX.exec('barfoobarfoo');
console.log(match.index);
console.log(REGEX.lastIndex);

If we set the lastIndex to 9, then we get the 'foo' match with that index.

The index has to the exact start point of the match for the y flag to pick up the match.

lastIndex will be updated to 12 after the match is found.

Setting /g and /y together is the same as setting y .

Conclusion

Generator code style can vary.

Also, JavaScript regex objects now can use the y flag to find the exact match after the flag.