JavaScript Best Practices — Type Conversions and Casing

JavaScript is an easy to learn programming language. It’s easy to write programs that run and does something. However, it’s hard to account for all the uses cases and write robust JavaScript code.

In this article, we’ll look at the best ways to cast types in JavaScript programs. Also, we look at the casing of identifiers.

Type Casting & Coercion

There are some rules that we should follow when we’re casting types.

Best Place to Perform Type Coercion

We should do type coercion at the beginning of a statement.

This way, we’ll know that we’re converting types right away.

No Wrappers

We should never use wrapper objects to convert types.

Instead, we should use factory functions.

For instance, instead of writing:

const totalScore = new String(score);

We write:

const totalScore = String(score);

This is because wrapper objects return an object instead of a primitive.

It’s not beneficial to us.

Wrapper objects are used by JavaScript to convert them to objects so that we can call its methods.

Use Number for Casting to a Number

Number is used for casting anything to a number.

For instance, we write:

const val = Number(inputValue);

This way, we get a number primitive value returned.

This is better than using a constructor or other functions.

For instance, writing:

const val = new Number(inputValue);

is bad since it returns an object rather than a number.

Using + as follows:

const val = +inputValue;

may confuse people that may not be familiar with the + operator.

If we use parseInt , we should pass in the base which we want to convert the number to.

For instance, we write:

const val = parseInt(inputValue, 10);

We put 10 as the 2nd argument to convert inputValue to a decimal number/

Don’t Use Boolean Constructor

Like numbers and strings, we should never use the Boolean constructor.

There’s no advantage to using it.

Instead, we use the Boolean factory function.

For instance, we write:

const hasAge = Boolean(3);

instead of writing:

const hasAge = new Boolean(3);

Naming Conventions

We shouldn’t use single letter names. They’re never that descriptive.

So instead of writing:

const q = () => {
  //...
}

We write:

const question = () => {
  //...
}

Use camelCase for Identifiers

We should use camelCase to name objects, properties, and constructor instances.

For example, we write:

const bigObject = {};

Use PascalCase for Constructors

PascalCase for used for naming constructors or classes.

For instance, we write:

class StudentUser {
  //...
}

or:

function StudentUser(name) {
  //...
}

No Leading or Trailing Underscores

There are no private variables in JavaScript constructors or classes, so we shouldn’t use underscores to indicate that they’re private.

So we shouldn’t write:

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

It just misleading to use underscores to indicate privacy when it’s not private.

Don’t Save Reference to this

We don’t need to save reference to this because we can use arrow functions to avoid doing that.

For instance, we can write:

function bar() {
  return () => {
    console.log(this);
  };
}

instead of:

function bar() {
  const self = this;
  return function () {
    console.log(self);
  };
}

It’s also shorter as an additional benefit.

Base Filename Should Match the Name of its Default Export

Default exports should match the name of the file that it’s exported from to eliminate any confusion.

For instance, we write:

import Foo from './Foo';

or:

import bar from './bar';

This way, we get no confusion.

Likewise, for exports, we write:

class Foo{
  // ...
}
export default Foo;

We make the case consistent to make them easier to read.

Use camelCase for Functions that are used as Default Export

Since functions are supposed to be camelCase, we should use name the default export the same way.

So we write:

function eatLunch() {
  // ...
}

export default eatLunch;

Conclusion

We should stick with standard JavaScript casing for functions, classes, and other identifiers.

This should also apply to imports and exports in modules.

To cast types, we should use factory functions that let return primitive values if we’re trying to convert to primitive values.