Introduction:
We have already covered the lustrous features of ES6 and to date, many of the Javascript developers have already started using it. Many developers have understood and found out the benefits of these features. But our assumption about these usages can be partially true also, as many of the developers can still be in the dark.
In ES6, one of the interesting features which came out is let and const. To be brief, both are used for variable declaration. We will look into them in more detail in this article below. But the main question is, what makes them differentiate from var, which we are using earlier. Let’s find the answer to this question.
Source: Giphy
Also See, Javascript hasOwnProperty
Introduction to var
Before the era of ES6, var used to rule the world. But, there were many issues with the usage and declaration of var. Hence, it became necessary to emerge new ways to overcome the flaws. This led to the invention of let and const. But before proceeding ahead, we should be very clear with the concept of var.
Scope of var
As the name suggests, scope refers to the boundary or area up to which the variable can be accessed and used. The variables declared under var are global and can be accessed locally too. Var variables can also have function type scope.
Let’s say if any variable is declared outside the function block and can be accessed through the program, then that variable is global. The same work is done by global var type variables. The variables declared with var can be accessed throughout the window.
The scope of var is a function when the variables are declared within any function body. This means they are accessible inside the function body only.
|
var temp = "hey there"; function newFunction() { var user = "hello World"; } |
Here, temp is globally scoped and is accessible throughout the program. While the user is function scoped because it is declared within the function. Users cannot be accessed outside the function braces.
Redeclaration and reuse: var
The variables declared under var can be reused and redeclared. But the constraint is, this should be done within the same scope.
|
var temp = "Hey There"; var temp = "Hello Coders"; var temp = "Coding Ninja"; |
Another way,
|
var temp = "Hey There"; temp = "Hello Coders"; temp = "Coding Ninja"; |
var hoisting:
Hoisting is an interesting feature of javascript. Using hoisting, the variables and functions are moved to the top and are executed at the beginning of code execution. Follow the below example for better clarity:
|
// If we write this: console.log (temp); |
Then it is interpreted as:
|
var temp; console.log(temp); // temp is undefined temp = "Coding Ninja" |
Here, var variables are hoisted to the top of the scope, and the value is initialized with undefined.
Cons with var
Take the below example:
|
var temp = "Hello World"; var count = 4; if (count > 3) { var temp = "Hello coders"; } console.log(temp) // "Hello Coders" |
In the example above, as count > 3, the condition is true, and the temp variable is redefined to “Hello coders.” This will not create any problem if we are knowingly changing the variable value. But if there arises a situation when you don’t know that a particular variable is already defined before with the same name and it's getting updated later. For checking you can try it on the online js editor.
117+ registered 