Difference Between var, let and const keyword
In JavaScript to declare a variable there are 3 keywords var, let, const. let, and const keyword introduced in ES6. It is an updated version of the var keyword.
Web Designers or Front End Developers got confused about which keyword should they use to declare a variable, in this blog you will understand which keyword when to use.
Var Keyword
It is used to declare a variable in the old days. It has some issues like we can use variable value first without declaring, this issue is called hoisting, that’s the reason you should not use var keyword nowadays.
Scope of Var Keyword
Scope means availability of variable where we can use variable value. The variable scope can be global or local/function.
Global Scope: If it is declared outside the function, then it is called global scope and it is available in the whole window.
Local/Function Scope: As its name suggests, if the variable is declared inside a function then it is called local scope or function scope of the variable. It is available only inside a function it can’t be accessed outside the function; if you do so then you will get an error.
Example:
var data=”global variable”;
function test()
{
var localdata=”local variable”;
}
Here data is a global variable, we can access global variables inside or outside the function. localdata is the local variable we can access this variable only in function, we can not access this variable outside the function. So if we do this:
var data=”global variable”;
function test()
{
var localdata=”local variable”;
}
Console.log(localdata);
We will get the error localdata is not defined because we are trying to access a local variable outside the function scope.
Hoisting of var keyword | Problem to Use var Keyword
Hoisting is a problem, which means we can declare a variable after it has been used.
Example:
<!DOCTYPE html>
<html>
<body>
<script>
x = 5;
console.log(x);
var x;
</script>
</body>
</html>
Here in this example, we have declared variable x at the end, but variable x value has been used. It is an issue of var keyword and it creates a problem in web applications where we write a lot of javascript. So Web Designer should use the let keyword instead of var.
let Keyword
It is an improved version of the var keyword, it was introduced in ES6. It solves the hoisting problem.
Example:
<!DOCTYPE html>
<html>
<body>
<script>
x = 5;
console.log(x);
let x;
</script>
</body>
</html>
Here it will throw an error because the let variable can not be used before declaring.
Const Keyword
Const keyword is used when we want to make our variable fixed or constant which value cannot be updated further. Sometimes in a project, we need to make some variable constant that cannot be updated.
Example:
<!DOCTYPE html>
<html>
<body>
<script>
const pi=3.14;
console.log(pi);
</script>
</body>
</html>
Categories: web designing javascript front end developer
