JavaScript Best Practices — Whitespaces, Underscores, and Useless Ternary

avaScript 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 useless whitespaces, whether to include underscores in identifier names and useless ternary expressions.

No Trailing Whitespace at the End of Lines

Trailing whitespaces are useless. They may be picked by source control systems which may identifier as a code change.

This causes frustration for developers since they expect real code differences rather than difference in whitespaces.

Trailing whitespaces are just taking up space and they should be removed.

Dangling Underscores in Identifiers

Dangling underscores in identifiers are good as long as they’re used to identify ‘private’ variables.

JavaScript doesn’t have truly private variables, so an underscore is useful for identifying variables that we shouldn’t access.

For instance, in a class, we can add ‘private’ variables that starts with an underscore to identify them that it shouldn’t be accessed.

We can write the code as follows:

class Person {
  constructor(name) {
    this._name = name;
  }

  get name() {
    return this._name;
  }
}

In the code above, we have this._name , which is a member of the Person class that we identify as private. We should instead use the name getter to access the value of this._name .

Therefore, this is useful for identifying a private variable before JavaScript classes have private members.

However, in other places, we shouldn’t be accessing some properties that start or end with underscores directly, like the __proto__ property.

For instance, we shouldn’t be changing the __proto__ property by reassigning it to a different value:

const foo = {};
foo. __proto__ = { a: 1 };

We shouldn’t be getting or setting the __proto__ property directly even though it exists and became a standard since ES6.

The __proto__ property has the prototype of the given object. In the code above, __proto__ has the prototype of foo .

To access the prototype of an object, we can use the Object.getPrototypeOf method as follows:

const foo = {};
const proto = Object.getPrototypeOf(foo);

The getPrototypeOf method returns the prototype, which is in an internal property of the specified object. It does the same thing as accessing the __proto__ property.

To set the prototype of an object, instead of assigning a new value to the __proto__ property, we should create a new object with the Object.create method.

For instance, we can use it as follows:

const bar = {
  a: 1
};
const foo = Object.create(bar);
foo.b = 1;

In the code above, we have the foo object, which is assigned to the object created by the Object.create method.

It sets the __proto__ property of foo to the bar object. Therefore, when we log it, we’ll see that the value of the a property in __proto__ is 1.

Other than identifying private variables in constructors or classes, then we probably shouldn’t use underscores in our code since they’re supposed to identify internal members or properties of a constructor or object.

Don’t Use Ternary Operators in Useless Ways

If we’re using the ternary operator to return true or false only, then we don’t need to use the ternary operator.

Instead, we can just remove the ? and everything else after it.

For instance, if we have the following code:

const foo = num === 1 ? true : false;

Then that just returns true is num is 1. Otherwise, if num isn’t 1, then it returns false .

We don’t need a ternary expression to do that, we can just write the following code:

const foo = num === 1;

num === 1 returns true if num is 1 and false otherwise.

Another example that we can simplify is the following:

const baz = bar ? bar : 1;

In the code above, we check if bar is truthy. If it’s truthy, then we return bar . Otherwise, we return 1. Then it assigns the returned value to baz .

We can simplify that with the || operator, which returns the first truthy operand that this operator is applied to.

If both of them aren’t truthy, then it returns the 2nd operand.

For instance, if we have the following code:

const baz = bar || 1;

Then it assigns bar to baz if it’s truthy. Otherwise, it assigns 1 to baz .

Therefore, this is simpler and does the same thing as the previous example.

Conclusion

Trailing whitespaces are useless and they should be removed. They just show in version control systems as code difference which frustrates developers.

Underscores can be used to identify private members in classes and constructors. However, most other uses are dubious.

Ternary operators that can be simplified, like the ones that returns true or false or check if a value is truthy and then returns itself or something else depending on that can be simplified.

The post JavaScript Best Practices — Whitespaces, Underscores, and Useless Ternary appeared first on The Web Dev.