JavaScript Best Practices — Sorting Imports, Symbols, String Expressions, and Generators

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

In this article, we’ll take a look at whether we should sort imports in our code, the proper way to define symbols, the spacing of delimiters of expressions in template strings, and calling other generator functions with yield*.

Import Sorting

Sorting imports alphabetically sometimes helps us with looking up the import manually.

For instance, if we have:

import {foo, bar} from "./module";

Then foo and bar aren’t alphabetical order. It may be easier if we instead write:

import {bar, foo} from "./module";

So that we know all imported members are always listed in alphabetical order.

Likewise, if we import multiple modules, we may also want to list the modules in alphabetical order.

For instance, we can write the following code to do that:

import {bar, foo} from "./moduleA";
import {baz} from "./moduleB";

In the code above sorted the imports by their module name. We have moduleA ‘s imports coming before moduleB .

This is more convenient if we ever have to look up import manually.

However, if we have to sort the imports manually in our code, then it’ll be a pain. Therefore, we’ve to think about the benefits over the time spent sorting imports if we’re going to do that.

Symbol Description Should Be Required

In JavaScript, a symbol is a primitive value that’s used as a unique identifier for object and class methods. It’s used as an alternative to strings or numbers as keys of methods.

It has the type 'symbol' when we apply the typeof operator on it.

We can define a symbol by using the Symbol factory function. For instance, we can write the following code to do that:

const foo = Symbol("foo");

In the code above, we defined a new symbol by calling the Symbol function with a string description.

Every instance of a symbol is different. Even if we create another one with the same string passed in it, it’ll reference a different symbol in memory,

This is needed for readers to identify them. Without the description, we can’t identify it.

For example, if we write the following:

const foo = Symbol();

Then there’s no way for us to identify the symbol that we just created. Debugging is much easier if our symbols have a description string passed in so that we can identify them when we’re debugging.

Spacing in Template Strings

When we use template strings, we usually use them to interpolate JavaScript expressions inside our strings. If we’re doing that, then we need to add the delimiter ${} into our string to wrap the expression that we’re interpolating in between the curly braces.

We usually don’t put any spaces between curly braces and the expression. For instance, we write something like the following in our template strings:

const person = {
  name: 'jane'
};
const str = `hi, ${person.name}`;

In the code above, we interpolated the expression person.name into our template string. And we didn’t put any space between the curly braces and the expression.

This is typical spacing as it’s clear where the expression starts and ends without spaces so we can just skip the spaces.

Spacing Around the * in Yield* Expressions

If we’re calling another generator function within a generator, then we need to use the yield keyword with the * beside it.

For instance, if we have the following code:

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

function* foo() {
  yield* bar();
}

Then our foo generator function is calling the bar generator function to return a generator that returns the values of the bar generator function.

It has the same mechanisms as any other generator function. It returns the first value when we call next on it, then pauses, and then when we call next on it again, it returns the next value.

In the foo function above, we don’t have any spaces between the yield keyword and the * . This is standard spacing so that everyone can tell that we’re calling another generator function within foo .

Conclusion

We may want to sort our import statements to make them easier to spot.

Also, when we define symbols, we should always provide a description string so that we can look them up when reading and debugging the code.

Spacing around the curly braces should be standard. There’s usually no spaces between the expression and the curly brace in template strings.

Finally, when we call generator functions within a generator function, we usually write yield* .