JavaScript: Declaring Variables with Var, Let, and Const

Variable declaration in JavaScript can be performed in different ways with three keywords; var, let, and const. If you are not clear about the main differences between these keywords and when to choose one over the other, this post is for you.

Before we get into details, let’s first understand what scope is:

Variable Scope

Scope refers to the visibility of a variable in JavaScript, this means that a variable is not accessible outside the scope in which it is defined.

Global Scope: Variables declared outside of a function or a block have global scope and are accessible from everywhere in the code.

Local Scope: Variables declared inside a function or a block have local scope and they are accessible only within that function or block, not accessible from the global scope. There are two types of local scope in JavaScript:

1. Function Scope: When a new function is declared, it creates its own scope. Variables defined in the function are bound to it and can not be accessed outside the function.
2. Block Scope: A code block in JavaScript can be defined using {curly braces} and variables defined inside of a block statement like if conditions or for and while loops are block scoped. This means that variables defined inside of a block are accessible only within that curly brace. Let’s take a look at an example:

The first and second console.log(color1) both log the variable color1 because it is declared in the global scope.

The first console.log(color2) logs the variable color2 successfully because it is accessible within the function addColor, whereas the second console.log(color2) throws an error because the variable color2 is not visible outside of its scope.

Now, let’s explain what the keywords var, let, and const are:

Var

Var was the only keyword used to declare variables in JavaScript before let and const were introduced recently with ES6 (ECMAScript 2015). Var declarations are either globally scoped or locally (function) scoped, but not block scoped.

Var can be updated and redeclared within the same scope without getting an error. The second variable you declared with var overwrites the first one. This might cause you to accidentally overwrite the value of the existing variable with the same name and debugging becomes hard in this situation.

Let

ES6 introduced the new keyword let in 2015. The main difference between var and let is that var is function scoped while let is block scoped. When a variable is declared with let in if statement or for loop, it is only valid in that block and this helps to debug your code easily.

Let can be updated within its scope like var, but let can not be redeclared within its scope. This is why it is better to use let because it reduces the potential error of redeclaring a variable accidentally more than once within the same scope like var does.

Const

Declaration of the variables with const is similar to let and it is block scoped. The difference between const and let is that a new value can not be assigned to a variable with const after the initial value is set, which means that const creates constant variables within its scope.

Let’s look at the example below to understand the differences in their scope:

All the variables are accessible within the same if statement/block. Although the variable color1 is still visible out of the block because of its function scope, the other two variables color2 and color3 are not valid anymore because we can access these two variables only within the curly braces they are declared in. Lastly, there is no access to any of those variables out of the function, because they are not globally scoped.

Here is a table to summarize what we have discussed:

Generally, it is advised to avoid using var. The best practice is to use const as a default option unless you need to reassign the variable in for loops or switch statements, in that case, let will be a better option.