Difference between let, const, and var Keywords in JavaScript

Photo by James Harrison on Unsplash

Have you ever thought about the difference between let, const, and var and how they are used in JavaScript? I got you covered because at the end of this article you will be able to give a clear difference between the three. So without further ado let’s get started.

JavaScript Variables

JavaScript has variables just like many other programming languages. JavaScript variables are simply a container that stores data(or for storing data values). You can place data into this container and refer to the data simply by naming the container.

In a JavaScript program, before using a variable it must be declared. One can define variables using the keywords var, let or const. But before we look into these variables and their differences, let’s first see what scope of a variable is all about.

JavaScript Variable Scope

The scope of a variable is the part of your program in which it is defined. JavaScript variables have only two scopes.

Global Variable: A global variable has global scope which means it can be defined anywhere in your JavaScript code.

Local Variable: When you use JavaScript, local variables are variables that are defined within functions. They have local scope, which means that they can only be used within the functions that define them.

Variable Declaration in JavaScript

During the early days of JavaScript, there was only one way to declare variables and that was using the var keyword. However, there were some issues associated with variables declared using the var keyword so it was necessary create other new ways for variable declaration. With the advent of ES6, now developers are able to define variables according to their specific needs, thanks to two new keywords: let and const.

All three of these keywords are similar in their syntax for declaring variable. However they differ in their usage and scope as explained in the next section.

let, const, and var Variable Declaration in JavaScript

The differences the above variable keywords are:

• Variables declared with var and const are scoped to the immediate function body.
• Variable declared with the var keyword are hoisted. Hoisting means that the variable can be accessed in their enclosing scope even before they are declared.
• Variables declared with the let keyword is block-scoped. Block-scoped means that variables will have scope to the immediate enclosing block.

In details, let’s now discuss how these keyword can help improve developer code and how to use each keyword declare a variable in JavaScript programs.

How to use the let Keyword in JavaScript

let is the improved version of var. let eliminates all the issues of var that we will talk about in the coming sections. let has a similar syntax to var but has a more strict scope.

let is a Block Scoped

The let keyword should be used in situations where you want to declare a variable that should be restricted to the block in which it is restricted. Also, variables declared with the let keyword cannot be updated or re-declared. Here is an example of how to use let to declare variables in JavaScript:

function func() 
{
    let x = 10; 
 
    if(x === 10) 
    {
        let y = 20; 
 
        console.log(x); //Output 10
        console.log(y); //Output 20
    }
     
    console.log(x); // Output 10
    console.log(y); // ’undefined'
}
 
 
func();

Note that the variable y declared with the let keyword is not accessible beyond the if block in which it is declared. If we would have declared it with the var keyword, then it would have been available, because var has global scope within a function. The following code snippet will help you to better understand this train of thought:

function func() 
{
    console.log(x); //Output 'undefined'
    console.log(y); //Error - "Uncaught ReferenceError: y is not defined"
     
    var x = 10;
    let y = 20;
}
 
func();

Another thing to bear in mind is that let cannot be used before its declaration. If you do so, it will result in a ReferenceError.

Get Joshua Ngene’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Note: Variables declared with the let keyword are not subject to hoisting. This means you cannot use a variable unless it is declared and initialized.

The const Keyword in JavaScript

The const keyword follows the same rules as the let keyword. The only difference with const is that it is used to define only constant values in JavaScript programs.

const myVar = 200;
 
myVar = 2.5;// Uncaught TypeError: Assignment to constant variable.

const Declarations are Block Scoped

The scoping principles of const are the same as that of the let keyword. Like let, the variables declared with the const keyword will also have scope restricted to the block in which they are declared.

Points to Note:

const declares a variable with a constant value.
Use the const keyword if the variable that you are declaring should not be allowed to be reassigned in the future.

How to use the var Keyword in JavaScript

The var keyword has traditional variable declaration syntax. It is optional to initialize a variable with a value if it is declared with the var keyword. If developers do not initialize it with a value, JavaScript will automatically assign undefined to it, as shown in the following code snippet:

var i;  // i is 'undefined'
 
var j = ‘JavaScript’; //initialized with string

var is Function Scoped

Variables that are declared with var keyword have function scope. Function scoped here means that they can be accessed only inside the function in which they are declared, as showcased in the following JavaScript code example:

function func() 
{
    var x = 8;
 
    if(1) 
    {
        var y = 15; 
 
        console.log(x); //Output 8
        console.log(y); //Output 15
    }
     
}
 
func();
 
console.log(x); //undefined. Not available outside function
console.log(y); //undefined. Not available outside function

Hoisting of var in JavaScript

Variables declared with the var keyword are subject to hoisting. Hoisting is a kind of default behavior in which all the declarations either variable declaration or function declaration are moved at the top of the scope just before executing the program’s code.

Issues with var for Variable Declaration

One of the issues is that the variables declared with the var keyword can be re-declared or updated in the same scope. This could lead to a serious problem if we declare another variable with the same name in the same scope; the new value will replace the old one. Check out the following code snippet for illustration:

var color =”Red”;
var color= “Green”;
console.log(“color”); // output Green
var color=”Blue”;
console.log(color); // output Blue

Another issue with the var keyword is that if you declare a variable without the keyword var, then that variable will have global scope. To get a better understanding, consider the following code:

for(x = 0; x < array.length; x++){  //index has a global scope
   //code
}

In the above code snippet, the JavaScript for loop will create variable x in the global scope. If you would create a new variable with the same name x and use it somewhere else in the program, then that new variable’s value will get overwritten.

Summary

var is functional scope

let, const are both BLOCK scope

const, cannot be reassigned, however it is mutable

Found this useful? Hit the 👏 button to show how much you liked it! 🙂

Follow me on Medium for the latest updates and posts!