Difference between var, let, and const keyword in JavaScript
What is Scope?
| var | let | const |
|---|---|---|
Variables declared with var are in the function scope. |
Variables declared with let are in the block scope. |
Variables declared with const are in the block scope. |
Scope is the accessibility during runtime of variables, functions, or objects in a particular part of your code.
1. Global scope
When we define a variable outside of all document functions, it is in the Global scope and is accessible to all available functions.
var globalVal = 10;function test() {console.log("Printing gloablVal", globalVal);}test(); //10
test JavaScript, in the function in the code above, will check if globalVal is defined. It finds that it is not defined, and then checks in the global scope to find the globalVal. Finally, it prints 10.
The globalVal is stored in the window object, so we can access it using window.globalVal. The variable in the global scope can be accessed and modified in any scope.
2. Function scope
When we define a variable inside a function, we can only access the variable inside the function.
function test(){var a = 10;console.log("Value of 'a' inside funuction", a);}test();try{console.log("Triyng to access 'a' defined in function ")console.log(a);}catch(e){console.log(e.message);}
The visibility of variable a is limited to the test function.
3. Block Scope
When we define a variable inside a block, we can only access the variable inside that block. We can achieve this with let and const.
varhas no Block scope.
function test() {{let a = 10;const b = 5;}try{console.log("We will get error when we try to access a b")console.log(a, b);// error will be thrown here} catch(e) {console.log(e.message);}}test();
Paste before this
Look at the below code snippets to understand this.
Explanation:
- In the
vartab, when we run the code, we see an error asais not defined becausevarvariables are only accessible in the function scope. - In the
lettab, when we run the code, we see an error asiis not defined becauseletvariables are only accessible within the block they are declared. - In the
consttab, when we run the code, we will see thatxwas defined under the block was accessible, but when we try to accessxoutside that block, we get an error.
Hoisting
Hoisting means that we can define a variable before its declaration.
| var | let | const |
|---|---|---|
| Allowed | Not allowed | Not allowed |
Take a look at the code snippets below to further understand this.
Explanation
-
In the
vartab, when you run the code, you will see there is no error and that we can declarevarvariables after defining them. -
In the
lettab, when you run the code, you will get an error asletvariables do not support hoisting. -
In the
consttab, when you run the code, you will get an error asconstvariables do not support hoisting.
Reassign the value
To reassign a value is to reassign the value of a variable.
| var | let | const |
|---|---|---|
| Allowed | Allowed | Not allowed |
Take a look at the code snippets below to understand this.
Explanation
-
In the
varandlettab, when you run the code, you will see that there is no error and we can define new values to thevarandletvariables. -
In the
consttab, when you run the code, you will get an error as aconstvariables value cannot be reassigned.
Redeclaration of the variable
The redeclaration of a variable means that you can declare the variable again.
| var | let | const |
|---|---|---|
| Allowed | Not allowed | Not allowed |
Take a look at the code snippets below to understand this.
Explanation
-
In the
vartab, when you run the code, you will see that there is no error as we allowed to declare the same variable again. -
In the
letand theconsttabs, when you run the code, you will get an error as theletandconstvariables do not allow you to redeclare them again.
Summary
varis used when we need to create a variable inside of a block and want to access the var on the whole function.letis used when we need to create a variable that should be only accessed inside the block.constis used when we need to create a variable that should only be accessed inside the block, and the value of the variable remainsunchanged.
