JavaScript Best Practices — Avoid Variables Bad Practices

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 how to avoid some bad practices when declaring variables.

Don’t Chain Variable Assignments

Variable assignments shouldn’t be chained because we create global variables in some of the variables in the chain.

For instance, if we write the following code to declare multiple variables in a chain as follows:

{
  let a = b = c = 5;
}

Then a would be declared as a block-scoped variable with let . However, the let keyword doesn’t apply to b and c .

They’re all declared as global variables. This is definitely something that we don’t want.

Therefore, we should avoid the chain of assignments that we have above. Instead, we should write to them all in their own line as follows:

{
  let a = 5
  let b = a;
  let c = a;
}

In the code above, we declared the variable a in the same way, we did in the previous example, but we put the declarations of b and c into their own line.

We assigned the value of a to b and also to c . This way, they’re all block-scoped and we won’t be declaring global variables accidentally.

Avoid Using Unary Increments and Decrements (++, --)

We should avoid unary increment and decrement statements since they’re subject to automatic semicolon insertion, which we don’t want since semicolons may be added to places that we don’t expect them to.

Not using increment and decrement operators also prevents us from incrementing and decrementing values unintentionally which causes unexpected behaviors in our programs.

Therefore, if we have the following code:

let num = 1;
num++;

Then should change it to the following:

let num = 1;
num += 1;

This is better since it’s a statement rather than an expression, so we can’t do something like:

let num = 1;
const foo = num++;

foo is still 1 since the latest value isn’t returned if ++ or -- comes after the variable.

We wouldn’t be able to do the same thing with:

num += 1;

so it’s a lot safer since it’s harder to do an assignment with the line above without creating a new line.

Avoid Linebreaks Before or After = in an Assignment. If the Expression We’re Assigning is Long, Surround Them in Parentheses

If we want to assign a long JavaScript expression to a variable, then we should wrap them in parentheses instead of using line breaks. Line breaks aren’t as clear as parentheses in delimiting expressions.

For instance, instead of writing the following:

let str =
  'The quick brown fox jumps over the lazy dog';

We should instead write:

let str = (
  'The quick brown fox jumps over the lazy dog'
);

This way, we make our code clear that the long string is one expression.

No Unused Variables

Unused variables are dead code and dead code shouldn’t be in our production code.

Since it’s unused then they should be removed. They take up space and confuse readers.

Therefore, instead of writing:

let unusedVar = 1;

We should remove it.

var Declarations Get Hoisted

var declarations are hoisted to the top of their closest enclosing function scope, but their assignment isn’t.

This is something that many developers don’t expect since they don’t have the complete understanding of var .

For instance, if we have the following code:

const foo = () => {
  console.log(x);
  var x = 1;
  console.log(x);
}

foo();

Then x is undefined in the first console log but it’s 1 in the second. If we log it before foo is declared then we get the ‘Uncaught ReferenceError: x is not defined’ error and the function won’t run.

Therefore, the declaration is hoisted onto the top of the function but the value isn’t.

This is an annoying feature of JavaScript which tricks a lot of people. It’s not all that useful, so let and const declarations don’t have this characteristic.

It’s one more reason that we should use let and const instead of var .

Conclusion

var declarations are tricky, so they shouldn’t be used. Dead code like unused variables should be removed.

Variable assignment chains are also tricky since the middleware variables are all declared as global variables, so we should assign them all in their own line.

Finally, increment and decrement operators shouldn’t be used since they both return the new value if it comes before the operand and does the assignment. It’s also subject to automatic semicolon insertion, which does things that we may not expect.