Most of the Javascript developers are already familiar with var
, let
, and const
keywords. Still, If it is a mystery for you, this article is for you. In this article, We will discuss the usage of these keywords, scope, hoisting, and their differences.
Before discussing these keywords, let us discuss the Scope
and Hoisting
first in Javascript.
Scope
In Javascript, Scope determines the accessibility/visibility of a variable, there are two kinds of scope
Function scope
Block scope
Function Scope is the scope where a variable is accessible only within a function.
function fn(){
var a: string = "test";
console.log(a); // test
}
console.log(a); // Error: a is not defined
Block Scope is the scope where a variable is accessible within a block of code.
A Block of code is the code between the curly braces.
{
var a: string = "test a";
let b: string = "test b";
const c: string = "test c";
console.log(a); // test a
console.log(b); // test b
console.log(c); // test c
}
console.log(a); // test a
console.log(b); // Error: b is not defined
console.log(c); // Error: c is not defined
Have you noticed something? b and c are accessible only within the block of code but a is accessible outside the block as well. We will discuss this in detail further.
Hoisting
Hoisting is a Javascript mechanism where variables declarations are moved to the top before execution. For Example:
console.log(a);
var a = 10;
Before execution
var a; //declares variable with undefined value
console.log(a); //undefined
a=10;
var
The scope of the variable defined with the var
keyword is limited to the 'function' within which it is defined.
function(){
var a= 10;
console.log(a); // 10
}
console.log(a); // Error: a is not defined
Here a is not defined because it was initialized inside the function, it can only be accessible within that function. If it is defined outside of the function then the scope will be global.
var a= 10;
function(){
console.log(a); //10
a=20;
}
console.log(a); // 20
They can also be redeclared and reassigned, for example:
var a: number = 10;
a=20; //Reassigned
var a: number = 30; //Redeclared
console.log(a); // 30
var benefits
- Function/Global scope variable
- Can be Redeclared
- Can be Reassigned
var
keyword seems perfect, but then why would you choose let
and const
keywords? We will discuss this in our next blog, meanwhile, can you think what is wrong with the below code block
{
function anyFn(){
var message = 20;
}
var message = "hello";
anyFn();
console.log(message); //20
}