Categories
JavaScript Best Practices

JavaScript Best Practices — Variable Scopes

Spread the love

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

In this article, we’ll look at best practices for declaring variables and using JavaScript variable scopes.

Scope

The scope is where we can access a variable.

JavaScript has several kinds of scopes. Variables declared with var has function scope, and variables declared with let or const has block scope.

var variables can also be hoisted so that the variable can be accessed before it’s defined.

let and const variables and constants aren’t hoisted.

Localize References to Variables

Variables are all local in JavaScript if they’re declared with keywords.

If they’re not, then they’re global. Global variables can only be declared in strict mode.

If it’s on, then we can’t declare them.

Global variables are declared with no keyword.

Therefore, we should stick with let and const for declaring variables and constants.

Keep Variables “Live” for as Short a Time as Possible

We should keep them available for as short a time as possible. This means the lines of code that the variable is available for referencing should be small.

This way, we can’t accidentally assign them to an unexpected value as easily and reduce the chance of errors.

If a variable is only available within the block, then that’s better than having it available outside a block.

That’s another benefit to using let and const since they’re block-scoped and we can be sure that they can’t be referenced before they’re defined.

Also, they won’t be available to any code outside the block.

Short live times make our code more readable since we don’t have to keep so much in our minds.

The chance of initialization errors would be reduced.

We can also split block-scoped variables into smaller functions easily.

General Guidelines for Minimizing Scope

We can minimize the scope of our variables easily.

There’re a few guidelines for minimizing scope below.

Initialize Variables Used in a Loop Immediately Before the Loop

We should declare variables used in a loop immediately before the loop so that we can see where they’re used right away.

If we modify the loop, we’ll remember that the variable is used and we won’t make mistakes with them.

For instance, we can write:

let done = false;  
while (!done) {  
  //...  
}

We have the done variable right before the while loop, so we won’t forget about it when we’re working on the loop.

Don’t Assign a Value to a Variable Until Just Before the Value is Used

The values of a variable shouldn’t be assigned until right before the value is used.

This way, it’s clear where the variable first receives its value, and confusion is minimized.

Group Related Statements

If we have related statements, then we should group them together.

This way, we don’t have to jump back and forth when we ready our code to get the whole workflow.

Break Groups of Related Statements into Separate Functions

Shorter functions have shorter variable spans, which is good for readability.

The scope of variables is reduced so that we don’t have to scroll to read all the places where a variable is accessed.

Begin with Most Restricted Visibility, and Expand the Variable’s Scope Only if Necessary

Block scoped variables is good for restricting visibility. It confines the variables within the block.

We should only expand the scope if we need to since we don’t want to expand the ‘live’ time to minimize the chance of assigning them accidentally and make them harder to read.

Minimizing Scope

Maximizing scope by expanding variable scopes may make them easier to write, but the program is easier to understand since those variables may be referenced anywhere.

That’s not good since we don’t want to do that.

We’ve to look at where all the variables in all places just to understand how one variable is used, which is very bad for readability.

Therefore, minimizing scope is definitely something that we should do.

Conclusion

We should minimize the scope of our variables to make them easier to read.

Variables with smaller scopes can also be moved around easier so that we won’t have a difficult time looking at them at all the places that they’re used.

Therefore, block scope variables and constants are good. We can declare them with let and const respectively.

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 *