The introduction of ECMAScript 2015, introduced two new ways of declaring variables – “let and const”. But was there a need to do so when we already have “var” to begin with? There were some problems with var which were later founded out and to came up with the solutions for that problem, let and const were introduced, but why two. This blog will cover all of it like the difference between var, let, and const and also the problems which var had.
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 –
Scope is of three types –
- Functional Scope
- Global Scope
- Block Scope
Variables declared inside a function are called local variables and have a 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 undefined greeter = "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 which 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 need 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
|Scope||Function and Global scoped||Block Scoped||Block Scoped|
|Hoisting||Anywhere||At the top||At the top|
|Re-declaring a value||Yes||Yes||No|
|Re-assigning a value||Yes||Yes||No|
|Initialization||Undefined by default||It has to be initialized||It has to be initialized|