Before the release of javascript ES6, var was the only form of variable declaration used. But, following the release of ES6, let and const were introduced. In this article, we will be highlighting the difference between them.
Var
When var was used as the only form of variable declaration, it did the job but had a few problems that could cause errors during the execution of one's code.
Var scope
In this sense, scope means places in one's code where a variable is available for use. Var is globally scoped when declared outside a function and locally scoped when declared inside a function.
var greeting = 'hello there';
// global scope
function holla(){
var compliment = 'hi there';
// local scope
}
console.log(greeting); // hello there
console.log(compliment); // compliment not defined
The greeting variable is globally scoped and can be accessed everywhere in the code while the compliment variable is locally scoped and can only be accessed within the function( in this case holla() ) where it was declared. From the image above, the compliment variable threw an error because it was declared inside the holla() function and cannot be accessed outside the function.
Var can be redeclared and reassigned
If a variable is redeclared within the same scope, No errors will be thrown.
//redeclaring
let greeting = 'hello there';
let greeting = 'hi there';
// updating
let compliment = 'looking good';
compliment = 'beautiful'
Both variations in the code snippet above will work fine without giving any errors
Var hoisting
Hoisting is a JavaScript mechanism where variables and function declarations are moved to the top of their scope before code execution.
console.log(hoist); //undefined
var hoist = 'This is hoisted';
Normally, we would expect the console to return an error saying the variable hoist is not defined but rather it returned undefined, that is because the variable was hoisted but a better practice is to declare a variable before calling it
Problem that's associated with var
So far var seems perfect without errors, but it does have a weakness
var greeting = 'good morning';
var time_on_clock = '0';
if (time_on_clock > 12 && time_on_clock < 18){
var greeting = 'good afternoon';
}
console.log(greeting) // good afternoon
The code snippets above explain that if greeting is greater than 12 and less than 18 it returns good afternoon. Seems perfect if that is what you intend for the code to do. But, it might be a major problem if you didn't know or forgot that the variable greeting had already been declared before. This could be a continuous reoccurrence throughout your code and thereby causing hardly traceable errors and that is where let and const come in.
Let
Since the release of the ES6 version of javascript, let has been a more preferred way to declare a variable and it tackles the problem with var that we mentioned above.
Let scope
Let is block-scoped, meaning it stays within a parenthesis where it is called. A block code is encased by { }. A variable that's declared in a block using let is only available within that block.
let temperature = 'warm';
let degree_in_celcius = '15';
if (temperature is <= 0){
let low_temperature = 'cold';
console.log(low_temperature); // cold
}
console.log(low_temperature) // low_temperature is not defined
In the snippet above you'll notice that you calling low_temperature outside the block where it was declared returned an error.
Let cannot be redeclared but can be reassigned
If you try reassigning a variable using let, just like var, it updates but, if you try to redeclare the variable it throws an error
//redeclaring
let greeting = 'hello there';
let greeting = 'hi there'; //Uncaught SyntaxError: Identifier 'greeting' has already been declared
// reassigning
let compliment = 'looking good';
compliment = 'beautiful' //works fine
let doesn't allow redeclaring that's the reason for the error. However, if the variable is redeclared in a different block it works just fine so long it's only called within the block.
let greeting = 'good morning';
let time_on_clock = '0';
if (time_on_clock > 12 && time_on_clock < 18){
let greeting = 'good afternoon';
console.log(greeting) // good afternoon
}
console.log(greeting) // good morning
There is no error in the code above because they are both treated in different scopes. The let outside the if statement block is treated separately from the one inside
Let hoisting
Unlike var, let doesn't support hoisting. It returns an error
console.log(hoist); // Uncaught ReferenceError: Cannot access 'hoist' before initialization
let hoist = 'This is hoisted';
Const
When variables are declared using const they are read-only. This doesn't mean it is immutable, what it means is that the variable cannot be reassigned. If the value of the variable is an object it can be updated or altered.
Const scope
Just like let, const is block-scoped and can only be accessible within the block where it was initialized.
Const cannot be redeclared or reassigned
Because of its read-only characteristic, const doesn't allow redeclaration or reassigning.
//redeclaring
let greeting = 'hello there';
let greeting = 'hi there'; //Uncaught SyntaxError: Identifier 'greeting' has already been declared
// reassigning
let compliment = 'looking good';
compliment = 'beautiful'; //Uncaught TypeError: Assignment to constant variable.
Both redeclaring and reassigning return errors. It is not entirely the same for objects. While a const object cannot be updated, its properties can be.
const car = {
'steering' : 1,
'tires' : 4,
}
car = {
'side mirior' : 2,
'head lights' : 2,
} // error
car['side mirror'] = 2; // this will work fine
console.log(car)// {steering : 1, tires: 4, side mirror: 2}
Const hoisting
Just like let, const doesn't support hoisting.
Pictorial representation what var, let and const supports.
