JavaScript Best Practices — Generator Functions and Class Assignment
Tags: javascript, codenewbie, codequality, webdev
Published: 2020-07-18 21:10:08

---
title: JavaScript Best Practices — Generator Functions and Class Assignment
published: true
date: 2020-07-18 20:30:28 UTC
tags: javascript,codenewbie,codequality,webdev
canonical_url: https://thewebdev.info/2020/07/18/javascript-best-practices%e2%80%8a-%e2%80%8agenerator-functions-and-class-assignment/?utm_source=rss&utm_medium=rss&utm_campaign=javascript-best-practices%25e2%2580%258a-%25e2%2580%258agenerator-functions-and-class-assignment
---

JavaScript is a very forgiving language. It’s easy to write code that runs but has mistakes in it.

In this article, we’ll look at spacing around generator functions and assigning classes to other values.

### Spacing Around the \* in Generator Functions

Spacing around generator functions should be consistent. We usually define generator functions with the following spacing.

For instance, we can define one as follows:

```
function* foo() {
  yield 1;
}

```

A generator function is defined by the `function*` keyword. It denotes that the function is a generator function.

Then the rest of the first line has the same parts as for any other traditional function.

After the `function*` keyword, we have `foo` , which is the function name, then the parentheses, and then one space character, and then the opening curly brace.

The generation function returns a generator when it’s called, which we can use the spread operator or the `for...of` loop on.

For instance, we can use it as follows:

```
const arr = [...foo()];

for (const f of foo()) {
  console.log(f);
}

```

In the first line, we used the spread operator to spread the generated returned by `foo` into an array, so we get `1` .

In the loop, we looped through the entries returned by the generator returned by calling `foo` and then log the value in the loop.

The `yield` keyword returns the item that’s returned from the generator.

We can also define a generator within an object. We can do this 2 ways. The first is using same `function*` keyword as follows:

```
const obj = {
  foo: function*() {
    yield 1;
  }
}

```

In the code above, we have the `obj` object that has the `foo` property with the `function*` keyword to indicate that the function is a generator function.

The spacing is the same as in the standalone generator example we have previously except that our function doesn’t have a name.

We can also shorten this by replacing the `function*` keyword with `*` as follows:

```
const obj = {
  * foo() {
    yield 1;
  }
}

```

The code above is the short version of the previous example. The `*` symbol is separated by a space character from the property name `foo` .

With both, we can call it as follows:

```
const arr = [...obj.foo()];

for (const f of obj.foo()) {
  console.log(f);
}

```

And we get the same result as the other examples.

We can also define generator methods inside a class. For instance, we can define it as follows:

```
class Foo {
  * foo() {
    yield 1;
  }
}

```

In the code above, we have the `foo` generator function. The syntax of the function definition is the same as the object shorthand version that we have in the previous example.

Then we can call it as follows:

```
const arr = [...new Foo().foo()];

for (const f of new Foo().foo()) {
  console.log(f);
}

```

We can also define a static generator method in the `Foo` class instead of an instance method as follows:

```
class Foo {
  static * foo() {
    yield 1;
  }
}

```

In the code above, we have one before and after the `*` symbol.

Then we can use it as follows:

```
const arr = [...Foo.foo()];

for (const f of Foo.foo()) {
  console.log(f);
}

```

The spacing for the `*` is standard so we can just follow that to make our generator functions and methods readable.

![](https://cdn-images-1.medium.com/max/800/0*kqIr7PVZok8mJ3b-)Photo by [Inspired Horizons Digital Marketing](https://unsplash.com/@inspiredhorizonsdigitalmarketing?utm_source=medium&utm_medium=referral) on [Unsplash](https://unsplash.com?utm_source=medium&utm_medium=referral)

### Don’t Modify Variables of Class Declarations

In JavaScript, a class is nothing special. It’s just syntactic sugar for constructor functions.

Therefore, like any other function, it’s just a regular object. The class name is a regular variable name that can be assigned anything else.

It’s better that we don’t assign our class name to something else even though we can. This way, we keep our code easy to understand by nothing writing confusing code like assigning class names to another value, including classes.

For instance, we shouldn’t write code like the following:

```
class A { }
A = 0;

```

If we did that, then `A` would be 0 because we reassigned it to 0 on the 2nd line.

Instead, if we want to assign 0 to something, assign it to another variable. For example, we can write:

```
class A {}
const b = 0;

```

### Conclusion

Generator functions can be defined in many ways. We should keep the spacing consistent and follow conventions to make them easy to read.

In JavaScript, classes are just functions, which are just objects assigned to a variable name. Therefore, we can assign the class name to another value, just like another variable. We should avoid doing that to reduce confusion in our code.

The post [JavaScript Best Practices — Generator Functions and Class Assignment](https://thewebdev.info/2020/07/18/javascript-best-practices%e2%80%8a-%e2%80%8agenerator-functions-and-class-assignment/) appeared first on [The Web Dev](https://thewebdev.info).