But why was there a need for let and const to be introduced for the same reason we had var? We will discuss this and also the differences between them in this article with examples.
Before going into more detail, how about understanding the word scope first as it will be used many times, and we need to understand it for declaring variables too.
Let’s understand this with the help of an example -
It is of three types -
- Functional Scope
- Global Scope
- Block Scope
Variables declared inside a function are called local variables and have function scope. Local variables are accessible from anywhere inside the function.
Variables declared outside any function or parenthesis are called global variables and have global scope. They are accessible from anywhere inside the program.
Any variable declared inside a function without any of the keywords is also considered a global variable.
Variables declared inside a block of curly braces or parenthesis are also local variables but they have block scope. They can only be accessed inside that block.’
Let’s see an example to understand them -
The above example contains a variable i declared with the keyword var and has been declared inside a function making its scope functional. Thus, it can be accessed from both inside and outside of the ‘for loop’ but within the braces of function.
While in this above example, i is declared with let making it a variable with block scope. Because of this, it is not accessible outside of the curly braces.
A set of parenthesis also falls in the block scope category, but when attached with curly braces like in this case.
Scope of VAR
As told already, variables declared with var have both functional and global scope. It depends upon where it is declared.
Hoisting in Var
Hoisting is a process where all the variable declarations are done at the top of their scope.
console.log (greeter);var greeter = “say hello”
it is interpreted like this:
var greeter;console.log(greeter); // greeter is undefinedgreeter = “say hello”
In the case of var, variable declarations can be made anywhere and can be accessed from anywhere within its scope. This is because variables declared with var without any value are considered undefined.
Problems with var
The variables declared by var can be re-declared and updated that can cause errors later in the code. Due to this, let and const are added as the keywords for declaring a variable.
Check the below example -
After the introduction of ES6, let was introduced as one of the keywords for declaring a variable. It has taken the place of var as the most preferred keyword for declaring variables as it overcame the problems that var had,
Scope of let
Let is block-scoped which means that it can only be used with the set of curly braces whether used for declaring a variable or using its value, both must be done within the same curly braces. Let’s understand this with the help of an example -
Hoisting in let
Variables declared by let needs to be hoisted at the top of their scope.
Advantages of let over var
A variable defined by let can be updated but cannot be re-declared in the same scope.
Why not see an example to get a clear picture -
Const keyword is used to declare variables that can neither be updated nor re-defined.
Scope of Const
Just like let, it is also block-scoped but needs to be initialized first.
Hoisting of Const
It should also be hoisted at the top of its scope, in the same manner as let is done.
Advantages of Const
The term “const” can be practically misleading, as it does not define a constant value but it defines a constant reference for the value.
It means that in const -
- A constant value cannot be re-assigned
- A constant array can not be re-assigned
- A constant object cannot be re-assigned
But we can -
- Change the elements of a constant array
- Change the properties of a constant object
How about an example to understand this better -
To sum it all up I will be differentiating them in a tabular form