Categories
JavaScript Best Practices

JavaScript Best Practices- Variable Declarations

Spread the love

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 declare variables the right way.

Require Initialization in Variable Declarations

Variable declarations should have values assigned to it when it’s declared so that we don’t have to worry about undeclared variables later.

For instance, we should write the following code:

var x = 1;

to make sure that x has value from the beginning.

Also, constants declared with const must be declared with a value, so we must write:

const x = 1;

However, this is more of a stylistic preference since it doesn’t have a significant impact on our code.

Never Use the delete Operator on Variables

The delete operator should never be used on variables. It might lead to unexpected behavior.

For instance, if we have the following code without strict mode on:

let x = 1;
delete x;

We get that x is still 1 after using the delete operator on it. It also prohibited if we use strict mode, so the following code will throw an error:

'use strict'
let x = 1;
delete x;

The code above will give us the error ‘Uncaught SyntaxError: Delete of an unqualified identifier in strict mode.’

This is one good reason to use strict mode is to prevent us from doing things like using delete on variables.

Don’t Name Labels With the Same Name as Variables Names

We shouldn’t have label names to label loops with names that are the same as variable names.

For instance, we shouldn’t have labels as we have in the following code:

let x = 1;

const baz = () => {
  x: for (let y = 0; y <= 1; y++) {
    break x;
  }
}

It’s just confusing to have labels that have the same name as a variable.

No Undeclared Variables

Undeclared variables are variables that haven’t been defined.

Without strict mode, these would just be created on the fly as global variables. This isn’t desirable as it pollutes the global scope. We don’t want that because multiple global variables with the same name may conflict with each other.

Therefore, we shouldn’t have code like the following:

a = 1;

In the code above, if strict mode isn’t on, then a is declared as a global variable.

We don’t want that, so we should turn on strict mode, which prevents the creation of the global variable a and instead will throw an error.

To declare variables, we should either use let , const , or var . let and const are much preferred because they’re block-scoped and they can’t be referenced before they’re declared. const also can’t be reassigned to a new value, and a value must be set when something is declared with const .

Also, we should use undeclared variables with typeof . For instance, if a is undeclared, we should write expressions like:

typeof a === 'undefined';

Without strict mode, the expression above will return true if a isn’t declared beforehand.

With strict mode on, as follows:

'use strict';
typeof a === 'undefined';

it’ll also return true , so we should check that we don’t have these kinds of undeclared variables used with the typeof operator.

No Initializing to undefined

In JavaScript, variables that are declared and not initialized is automatically set to undefined . Therefore, we don’t have to set it to undefined explicitly.

For instance, we don’t have to write something like the following to set bar to undefined :

let bar = undefined;

Instead, we can just write:

let bar;

Don’t Use undefined as a Variable Name

We shouldn’t use undefined as a variable name since it’s reserved keyword.

For instance, we should never write something like the following:

var `undefined = "hi";`

Without strict mode, this would just do nothing. If we log undefined after this line, we’ll still get undefined .

However, this is useless and confusing. Therefore, it’s prohibited with strict mode on.

We also can’t replace var with let or const as follows:

let undefined = "hi";

or:

const undefined = "hi";

As we’ll get the error ‘Uncaught SyntaxError: Identifier ‘undefined’ has already been declared’.

This is another good reason to use let and const .

Conclusion

We should be careful when we’re declaring JavaScript variables. We shouldn’t declare variables with reserved keywords like undefined .

Also, we shouldn’t have undeclared variables in our code. JavaScript strict mode should prohibit this from happening.

delete operator shouldn’t be used on variables since it doesn’t do anything.

Labels shouldn’t have the same name as variable names to eliminate confusion.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *