JavaScript Best Practices — Generator 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.

Photo by Inspired Horizons Digital Marketing on Unsplash

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 appeared first on The Web Dev.