In JavaScript, variables can be declared using these three different methods:
- var
- let
- const.
In this write-up, I will explicitly show you the difference between these three ways of creating variables.✨
All three of these three keywords have similarities in their syntax. However, they differ in the following criteria:
1. Scope
2. Redeclaration
3. Hoisting.
Scope Differences
"var" - is function scoped, thus it is only accessible within the function it is defined.
"let" and "const" are block scoped, thus accessible within the block in which it's defined.
Defining Function Scope Variable:
function myFunc()
{
var x = "X";
let y = "Y";
const z = "Z";
console.log(x, y, z); //OUTPUT: "X Y Z"
{
var a = "A"
let b = "B"
const c = "C"
}
console.log(a); //OUTPUT: A
console.log(b); //OUTPUT: Uncaught ReferenceError: b is not defined
console.log(c); //OUTPUT: Uncaught ReferenceError: c is not defined
}
myFunc();
NB: variable a is still defined beacause it was declared with var and it is still within the function myFunc().
Defining Global Variables
"var" can be used to define global variables.
"let" and "const" cannot define global variables.
var x = "X";
let y = "Y";
const z = "Z";
console.log(window.x); //OUTPUT: A
console.log(window.y); //OUTPUT: Undefined
console.log(window.z); //OUTPUT: undefined
Redeclaration:
Variables declared with "var" can be declared again in the scope within which it's defined.
But it is not possible with the case of "let" and "const".
var x = "A";
var x = "B"
console.log(x); //OUTPUT: B, last declaration is printed.
let y = "A";
let y = "B"; // Uncaught SynthaxError
const z = "A";
const z = "B"; // Uncaught SynthaxError
At this point, 'const' and 'let' are almost the same.
And yes! they are. Except for one difference.
Thus,
The value of variables defined by "let" can be changed after assigning some values.
It is impossible to do so with "const". It's value is assigned one and is not mutable.
var x = "A";
x = "B"
console.log(x); //OUTPUT: B, last declaration is printed.
const y = "A";
const y = "B"; // Uncaught TypeError: invalid assignment to const y.
Hoisting Difference
When variable is declared with "var" (but not initialized) at the end of the function, It is moved to the top of it's scope by the JavaScript runtime and, therefore, there will be no error by the runtime if that variable is used before being declared.
Variables declared with "let" and "const" are only accessible after their declaration.
function myFunc()
{
console.log(a); //OUTPUT: undefined
console.log(b); //OUTPUT: Uncaught ReferenceError: b is not defined
console.log(c); //OUTPUT: Uncaught ReferenceError: c is not defined
var a = "A"
let b = "B"
const c = "C"
console.log(a); //OUTPUT: A
console.log(b); //OUTPUT: B
console.log(c); //OUTPUT: C
}
myFunc();
Conclusion:
- Use 'var' for function scope or Global scope variables
- Use 'let' & 'const' for block scope variables
NB: use 'const' only to defined variables whose value is not change at any part of the application.
I am Bentil!
You can support me to keep writing more stuffs like this.
Top comments (2)
Hey, I have one comment from my side.
You said - "let" and "const" cannot define global variables.
That is not correct as they can. Global scoped let and const do not create a property in global object as you mentioned but it does not influence on variable scoping.
Awesome!.
Thank you. I will do that