JavaScript let vs var vs const

We define variables in JavaScript using let, var, or const. In this article let us explore each of them and find out the difference between let vs var vs const. Knowing the difference between them is makes it easier to decide what to use where and when.

Using Let, Var & Const

The following example shows how to declare a variable using the let var & const keywords. You can create variables without an initial value

or you can create them with an initial value.

Difference between Let vs Var vs Const

Variable Scope

The scope or visibility of the variable is the major difference between these keywords.

The scope is a region of the program where a variable is visible. Every variable we define will become part of a scope. We can access that variable only within its scope.

JavaScript creates four Scopes. They are Global Scope, Function Scope, Block Scope & Module Scope.

We can access the variable only inside the scope in which we declare it. We cannot access it outside the scope

var is function scoped

The variables we declare using var inside a function are only available within that function. If we declare them outside the function, then they are available everywhere i.e. they are a global variable.

Even if we declare a var variable inside a code block, they are still scoped to the enclosing function. If there is no enclosing function, then they will become a global variable.

For Example, in the following code. variable localVar is declared inside the if block, but you can refer to it anywhere inside the function in which it is defined. That includes nested functions or other code blocks. But you cannot refer to it outside the function.

let & const are block scoped

The variables declared using let or const are block-scoped. They are scoped to the block in which we declare them. A code block is anything inside curly parentheses. For Example, if condition, try/catch/ block, while loop, for loop, function, etc.

This means that we can only use it in the code block where we declare them. Outside the code block, they are invisible

If they are outside the code block, but within the function body then they become function scoped.

If they are outside the function and code block, then they are available globally or become a global variable.

For Example, change the variable type of localVar to let. You will JavaScript immediately throws an error in all instances where they are outside the if block.

We can redeclare a var variable

We can redeclare or redefine a var variable.

For Example, here we are declaring MaxTry variable twice. The JavaScript does not complain and the code works perfectly. Note that we even changed the value from number to string.

But we cannot use the let or const to redeclare a variable.

The following example tries to redeclare a variable that is already declared with var. Identifier 'MaxTry' has already been declared is thrown by JavaScript here

The same goes if you try to redeclare a let variable with var

Var can be accessed before they are declared

We can access the var variable, even before we declare them.

This is because the JavaScript compiler process all variable declarations before executing any code. Hence declaring a variable anywhere in the code, is equivalent to declaring it at the top of the scope. This is called variable hoisting.

Now, change var to let. Compile and run the code. The code throws an error

Const cannot be reassigned

We must declare a const variable with an initial value. The value cannot be reassigned again.

Global Variables

If we declare a variable outside the scope, then it will become a global variable.

But there is a difference in how JavaScript creates them.

The global variable using the var keyword becomes property of the global object. The name of the global object in the browser environment is window. You can also access the global object using the property globalThis. Hence we can use global object to access any global variable created by var keyword.

But global variables using the let (or const) keyword does not become the property of the global object. Hence we cannot access them using the global object

let, var & const. Which one to choose?

Now, we know the difference between let, var & const. So the question is which one will you choose.

Const is always the first choice, if the value of the variable does not change once initialized. This will prevent some programmers from accidentally modifying the value, which can happen if you use var or let

let is the choice of all other variables. Because let & const are block-scoped. You do not have to worry about variables declared in for loop or if the statement is overwritten outside the block. block scope helps us to identify bugs and makes our code easier to read.

Avoid var. The var can be redefined, can be reassigned, and does not support block scope. This makes the code harder to read & debug.

Leave a Comment

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Scroll to Top