Table of contents
1.
Introduction
2.
What is var?
3.
What is let?
4.
What is const?
5.
How to Declare Variables with var in JavaScript
5.1.
The scope of variables declared with var
5.2.
Javascript
5.3.
How to redeclare and reassign variables declared with var
5.4.
Javascript
5.5.
How to hoist variables declared with var 
5.6.
Javascript
6.
How to Declare Variables with let in JavaScript
6.1.
The scope of variables declared with let
6.2.
Javascript
6.3.
How to redeclare and reassign variables declared with let
6.4.
Javascript
6.5.
How to hoist variables declared with let
6.6.
Javascript
7.
How to Declare Variables with const in JavaScript
7.1.
The scope of variables declared with let
7.2.
Javascript
7.3.
How to redeclare and reassign variables declared with const
7.4.
Javascript
7.5.
How to hoist variables declared with const
7.6.
Javascript
8.
Differences between var, let, and const
9.
Frequently Asked Questions
9.1.
When should I use "var", "let", and "const"?
9.2.
Can I reassign a variable declared with "const"?
9.3.
What is the temporal dead zone?
10.
Conclusion
Last Updated: Sep 5, 2024
Easy

Difference between var, let and const keywords in JavaScript

Author Nilesh Kumar
0 upvote
Career growth poll
Do you think IIT Guwahati certified course can help you in your career?
difference between let and var and const in javascript

Introduction

Variable declaration in JavaScript is the process of creating a variable and giving it a name so that it can be used to store a value. A variable is a named container that holds a value, and can be used to store and manipulate data in a program. "var", "let", and "const" are all used in JavaScript to declare variables. However, there are many differences between let, var, and const in javascript in terms of how they behave and how they should be used.

What is var?

"var" is the oldest way to declare a variable in JavaScript. Variables declared with "var" have a function-level scope, meaning they are only accessible within the function in which they were declared. They also have "hoisting" behavior, which means they are accessible throughout the entire scope of the function, regardless of where they were declared. However, because of its function-level scope, variables declared with var can lead to unexpected behavior and are generally not recommended.

What is let?

"let" was introduced in ECMAScript 6 (also known as ES6) as an alternative to "var". Variables declared with "let" have the block-level scope, meaning they are only accessible within the block in which they were declared. They also have the concept of the temporal dead zone, which means they are not accessible before they are declared.

What is const?

"const" was also introduced in ECMAScript 6 and is used to declare variables that cannot be reassigned. This makes "const" variables useful for declaring constants, such as pi or the gravitational constant, which have a fixed value. Like "let", "const" variables have the block-level scope, and, they are not accessible before they are declared.

However, it is recommended to use "let" and "const" over "var" when declaring variables in JavaScript because they have more predictable behavior, and "const" is the most recommended for defining constant values that you don't expect to change.

Read More About, Basics of Javascript

How to Declare Variables with var in JavaScript

In JavaScript, the process of creating a variable and giving it a name so that it can be used to store a value is known as variable declaration. In JavaScript, you can use the "var", "let", and "const" keywords to declare variables. But there are many differences between let, var, and const in javascript. Here are some examples of how to use each keyword:

The scope of variables declared with var

  • Javascript

Javascript

var x = 5;
console.log(x); // Output: 5

if (x > 0) {
 var x = 10;
 console.log(x); // Output: 10
}
console.log(x); // Output: 10
You can also try this code with Online Javascript Compiler
Run Code

 

As you can see, in this example, the variable x declared with "var" keyword has function scope and the value inside if block can still be accessed outside.

How to redeclare and reassign variables declared with var

  • Javascript

Javascript

var x = 10;
console.log(x); // output : 10

// redeclare the variable
var x;
console.log(x); // output : 10

// variable reassignment
x = 20;
console.log(x); // output : 20
You can also try this code with Online Javascript Compiler
Run Code


As you can see in this example, if we redeclare the variable, it does not affect its value. Its value remains the same. But if we reassign the value, the variable is storing the reassigned value.

How to hoist variables declared with var 

  • Javascript

Javascript

console.log(myvar); // output : undefined
var myvar = 10;
console.log(myvar); // output : 10
You can also try this code with Online Javascript Compiler
Run Code


Due to hoisting, it does not matter where we have declared the variables, the variable declarations move to the top of their scopes. In this example, we have printed the variable before its declaration, and it is not giving any error. It will give an undefined value until we initialize it

How to Declare Variables with let in JavaScript

The scope of variables declared with let

  • Javascript

Javascript

let y = 5;
console.log(y); // Output: 5

if (y > 0) {
 let y = 10;
 console.log(y); // Output: 10
}
console.log(y); // Output: 5
You can also try this code with Online Javascript Compiler
Run Code


In this example, the variable y declared with "let" keyword has block-level scope, so the value inside if block is not accessible outside. By looking at the code you can see that there are many differences between let, var, and const in javascript.

How to redeclare and reassign variables declared with let

  • Javascript

Javascript

let myvar = 10;
console.log(myvar); // output : 10

// reassignment
myvar = 20;
console.log(myvar); // output : 20

// redeclaration
let myvar = 5;
console.log(myvar); // output : syntax error
You can also try this code with Online Javascript Compiler
Run Code

 

Here, we have reassigned the variable within its block, so its value is updated to the new reassigned value. But we can not redeclare the variable declared with let within the same scope, if we do so, it will give the syntax error.

How to hoist variables declared with let

  • Javascript

Javascript

console.log(myvar); // ReferenceError
let myvar = 50;
console.log(myvar); // output 50
You can also try this code with Online Javascript Compiler
Run Code


The variables declared with let are not hoisted to the top of the scope. So, if we try to access a variable before declaring it, it will surely give us a Reference Error. In this example, you can see that printing the variable before its declaration is giving us an error.

How to Declare Variables with const in JavaScript

The scope of variables declared with let

  • Javascript

Javascript

const pi = 3.14;
console.log(pi); // Output: 3.14

pi = 3.14159; // TypeError: Assignment to constant variable.
You can also try this code with Online Javascript Compiler
Run Code


As you can see, in this example, the variable pi declared with the "const" keyword is a constant variable that can't be reassigned. It will throw an error if we try to do so.

How to redeclare and reassign variables declared with const

  • Javascript

Javascript

const myvar = "first value";
console.log(myvar); // first value

// reassignment
myvar = "second value";
console.log(myvar); // TypeError

// redeclaration
const myvar = "third value";
console.log(myvar); // Syntax Error
You can also try this code with Online Javascript Compiler
Run Code


We cannot change the value of a const variable. Once we assign it some value, it cannot be changed throughout the program execution. In this example, reassigning a variable leads to a Type Error, and if we try to redeclare it, it will give us a Syntax Error because of its block scope.

How to hoist variables declared with const

  • Javascript

Javascript

console.log(exp); // ReferenceError
const exp = "not bad";
console.log(exp); // output : not bad
You can also try this code with Online Javascript Compiler
Run Code


The variables declared with const are not hoisted to the top of the scope. This example shows that accessing the variable before its declaration results in a Reference Error. We can say that variables declared with const are not hoisted and must be assigned some value at the time of declaration.

Differences between var, let, and const

Here is a comparison table between "var", "let" and "const" in JavaScript:

Feature var let const
Scope Var has function-level scope, which makes the variables declared with var accessible throughout the function they are declared in. Let has block-level scope, which makes the variables declared with let inaccessible to the entire function they are declared in. Similar to let, const has a block-level scope as well.
Reassignable Variables declared with var can be reassigned. Variables declared with let can be reassigned. Variables declared with const cannot be reassigned.
Hoisting Variables declared with var are hoisted, which means they can be accessed before they are declared. Variables declared with let are not hoisted. Variables declared with const are not hoisted.
Temporal Dead Zone Variables declared with var don't have a temporal dead zone, making them accessible before declaration. Variables declared with var have a temporal dead zone, making them inaccessible before declaration. Similar to let, const has a temporal dead zone as well.

Frequently Asked Questions

When should I use "var", "let", and "const"?

It is generally recommended to use "let" and "const" over "var" when declaring variables in JavaScript because they have more predictable behavior. Use "const" for constant variables that you don't expect to change, and use "let" for variables that you expect to change. "var" is not recommended to use because of its function-level scope and hoisting behavior.

Can I reassign a variable declared with "const"?

No, you cannot reassign a variable declared with "const". If you try to reassign a variable declared with "const", you will get a TypeError.

What is the temporal dead zone?

The temporal dead zone (TDZ) is a behavior that occurs when we try to access a variable declared with "let" or "const" before it is declared. It throws a ReferenceError.

Conclusion

We hope you enjoyed reading this article. We discussed the difference between let and var and const keywords in Javascript. Further, we discussed the brief about var, let, const, and implementation of var, let, const, and Comparision Table between var, let, const.

If you wish to learn more about Javascript, you can refer to blogs on 

Do visit our website to read more such blogs. Make sure you enroll in our courses. You can take mock testssolve problems, and interview puzzles. Also, you can check out some exciting interview stuff- interview experiences and an interview bundle for placement preparations. 

Happy Coding! 

Live masterclass