Object-Oriented JavaScript — Generators and Maps
Tags: webdev, programming, javascript, beginners
Published: 2021-01-24 21:59:16

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