In this post let's dive in and explore the key functionalities and differences between let, var and const with code examples.
Firstly, before we look into the key features and differences, let's try to understand what they are at the most basic level.
In order to use a variable in JavaScript, we have to declare that variable. Before ES6, we had only var by which we used to declare variables. From ES6 onwards let and const were introduced to solve few problems that existed with var and to make our code less susceptible to errors.
We will look at the differences of var, let and const in four main aspects:
- Scope
- Redeclaring
- Redefining
- Hoisting
Var
Before the introduction of ES6, var declarations were used for all kinds of variable declarations. But there are certain issues associated with variables declared with var, which led to the introduction of new ways to declare variables in Javascript. First, let's understand var before we move on to their issues.
1. Scope
Scope basically means where the variables declared are available for use.
var is function-scoped
So what it basically means is that if a variable is declared within a function, then it is available and can be accessed only within that function.
Let's look into an example to understand about it.
function demo() {
var item = "hello";
console.log(item) //"hello"
}
demo();
console.log(item)//Uncaught ReferenceError: item is not defined
In the above example we can see that the value of item is available only within the function and returns a error if it is tried to access outside the function.
Now let's see what happens if var is declared outside a function.
var is global-scoped
So what it basically means is that if a variable with var is declared outside the function then that variable is available for use anywhere in the entire window.
Let's look into an example to understand about it.
var item = "hello";
function demo() {
console.log(item) //"hello"
}
demo();
console.log(item)//"hello"
In the above example we can see that the value of item can be accessed anywhere in the entire window.
2. Redeclaring
var can be Redeclared
The variables that are declared using var can be declared again and again using var anywhere in the program.
Let's look into an example to understand about it.
var item = "pizza"
console.log(item) //"pizza"
var item ="burger"
console.log(item) //"burger"
In the above example we can understand that redeclaration of var is accepted and it doesn't throw any errors.
3. Redefining
var can be Redefined
The variables that are declared using var can be assigned again and again with different values anywhere in the program.
Let's look into a example to understand about it.
var item = "pizza"
console.log(item) //"pizza"
item="burger"
console.log(item) //"burger"
In the above example we can understand that redefinition of var is accepted and it doesn't throw any errors.
4. Hoisting
Hoisting is a JavaScript mechanism where variables and function declarations are moved to the top of their scope before code execution.
So let's look into an example to understand about it.
console.log(item) //undefined
var item ="pizza"
The above code is interpreted as:
var item
console.log(item) //undefined
var item = "pizza"
So var variables are hoisted at the top of their scope and they are initialized with a value of undefined.
Problems of Var
Let's look into the problems with var that led to the emergence of let and var declaration in javascript.
Let's look into an example to understand more about it.
var item ="pizza"
var price=100
if(price>50){
var item = "burger"
console.log(item) //"burger"
}
console.log(item) //"burger"
In the above example we can see that initially the item is "pizza" and the price is 100. If the price is greater than 50 then the item is redeclared as "burger".But what happens after the if statement is the main problem. If you want the item value to change only inside the if statement to "burger" and remain as "pizza" outside then it is not possible because var declaration globally redefines all the values declared with it to the newest redefinition made. That's why the value of item outside the if statement is "burger".
If you have used item in other parts of your code, you might be surprised at the output you might get. This will likely cause a lot of problems to your code. This is why let and const are necessary.
Let
let is now preferred for variable declaration as it not only comes as an improvement to var declarations. It also solves the problem with var that we just looked into. Let's look into it in detail.
1. Scope
let is block-scoped
A block is a chunk of code bounded by {}. Anything within curly braces is a block.
So what it basically means is that if a variable is declared with let within a block, then it is available and can be accessed only within that block.
Let's look into an example to understand about it.
let item ="pizza"
if(true){
let item = "burger"
console.log(item) //"burger"
}
console.log(item) //"pizza"
In the above example we see that item outside its block (the curly braces where it was defined) returns "pizza" whereas within the block returns "burger". This is because let variables are block scoped .
2. Redeclaring
let cannot be Redeclared
The variables that are declared using let cannot be declared again using let in the same block.
Let's look into an example to understand about it.
let item = "pizza"
let item= "burger"
console.log(item) //Uncaught SyntaxError: Identifier 'item' has already been declared
In the above example we can understand that redeclaration of let in the same block is not accepted and it throws Identifier 'item' has already been declared error.
3. Redefining
let can be Redefined
The variables that are declared using let can be assigned again and again with different values in the same block.
Let's look into a example to understand about it.
let item = "pizza"
console.log(item) //"pizza"
item="burger"
console.log(item) //"burger"
In the above example we can understand that redefinition of let is accepted and it doesn't throw any errors.
4. Hoisting
So let's look into an example to understand about it.
console.log(item) //Uncaught ReferenceError: Cannot access 'item' before initialization"
let item ="pizza"
Just like var, let declarations are hoisted to the top. Unlike var which is initialized as undefined, the let keyword is not initialized. So if you try to use a let variable before declaration, you'll get a Reference Error.
Const
Variables declared with the const maintain constant values.
1. Scope
const is block-scoped
Like let declarations, const declarations can only be accessed within the block they were declared.
Let's look into an example to understand about it.
const item ="pizza"
if(true){
const item = "burger"
console.log(item) //"burger"
}
console.log(item) //"pizza"
In the above example we see that item outside its block (the curly braces where it was defined) returns "pizza" whereas within the block returns "burger". This is because const variables are block scoped .
2. Redeclaring
const cannot be Redeclared
The variables that are declared using const cannot be declared again using const in the same block.
Let's look into an example to understand about it.
const item = "pizza"
const item= "burger"
console.log(item) //Uncaught SyntaxError: Identifier 'item' has already been declared
In the above example we can understand that redeclaration of const in the same block is not accepted and it throws Identifier 'item' has already been declared error.
3. Redefining
const cannot be Redefined
The variables that are declared using const cannot be assigned again and again with different values in the same block.
Let's look into a example to understand about it.
const item = "pizza"
console.log(item) //"pizza"
item="burger"
console.log(item) //Uncaught TypeError: Assignment to constant variable
In the above example we can understand that redefinition of const is not accepted and it throws an error.
4. Hoisting
So let's look into an example to understand about it.
console.log(item) //Uncaught ReferenceError: Cannot access 'item' before initialization"
const item ="pizza"
Just like let, const declarations are hoisted to the top but are not initialized.
If you liked this article, give it a ❤ 🦄 and Save it for later.
Top comments (0)