Object-Oriented JavaScript — Generators and Maps

Check out my books on Amazon at https://www.amazon.com/John-Au-Yeung/e/B08FT5NT62

Subscribe to my email list now at http://jauyeung.net/subscribe/

JavaScript is partly an object-oriented language.

To learn JavaScript, we got to learn the object-oriented parts of JavaScript.

In this article, we’ll look at generators and maps.

Generators

Generator functions let us create generator objects.

They run line by line, returns the result with yield , and then paused until it’s invoked again.

We can use them to write infinite loops since they’ll pause when they aren’t needed.

For instance, we can create a generator function by writing:

function* generatorFunc() {
  yield 1;
  yield 2;
  yield 3;
}

We have the generatorFunc generator function.

It’s indicated by the function* keyword.

The yield keyword lets us return the value and the pause the value.

Then we can use it by creating a generator with it and then call next :

const gen = generatorFunc();
console.log(gen.next());
console.log(gen.next());
console.log(gen.next());
console.log(gen.next());

Then we get:

{value: 1, done: false}
{value: 2, done: false}
{value: 3, done: false}
{value: undefined, done: true}

next returns an object with the value and done properties.

value has value that’s returned and done indicates whether there’s any other value to return.

done is true indicates there’s no other value to return.

If we use yield without an argument, then we can pass a value into next and get the value.

For instance, we can write:

function* generatorFunc() {
  console.log(yield);
  console.log(yield);
  console.log(yield);
}

const gen = generatorFunc();
console.log(gen.next());
console.log(gen.next('foo'));
console.log(gen.next('bar'));
console.log(gen.next('baz'));

We console log yield in the generatorFunc then when we call next with an argument, it’ll be logged.

The first one should be called with nothing since it’ll just start the generator function instead of running the body.

It’ll return:

{"done": false,"value": undefined}

Generator objects conform to the iterator contract.

So we can get the Symbol.iterator method with it.

If we have:

console.log(gen[Symbol.iterator]() === gen);

we log true .

Iterating Over Generators

Generators are iterators.

Anything that supports iterables can be used to iterate over generators.

For instance, we can use the for-of loop:

function* genFunc() {
  yield 1;
  yield 2;
}

for (const i of genFunc()) {
  console.log(i)
}

Then we get:

1
2

We can also use the destructuring syntax with generators.

For instance, we can write:

function* genFunc() {
  yield 1;
  yield 2;
}

const [x, y] = genFunc();

Then x is 1 and y is 2.

Collections

JavaScript provides us with various kinds of collections like Map , WeakMap , Set , and WeakSet .

Now we don’t have to create hacks to create these data structures.

Map

Map allows us to store key-value pairs.

They let us have fast access to values.

For instance, we can write:

const m = new Map();
m.set('first', 1);

Then we can get it by writing:

console.log(m.get('first'));

and get the value by the key.

We can remove the entry with the given keys with the delete method:

m.delete('first');

And we can set the size with the size property:

console.log(m.size);

We can also create a map with an array of key-value arrays:

const m = new Map([
  ['one', 1],
  ['two', 2],
  ['three', 3],
]);

Conclusion

We can use generators to create iterables.

Also, we can use maps to store key-value pairs.