Var, let and const in Javascript

While learning javascript, it is important to understand how const, let, and var act. These keywords are used to declare variables in javascript. While understanding these keywords, it is also important to understand the concepts of scope and hoisting in javascript.

var keyword :

When we declare a variable using var keyword, it can be function scoped or global scope. If we declare var outside the function then it is globally scoped and can be accessed anywhere in the code. If var is declared inside a function, then it is function scoped.

var a = 2;     //varable declared gloabally

function localScope() {
   var b = 5;
   console.log(a);   // output 2
   console.log(b);   // output 5
}
localScope();
console.log(a);    // output 2
console.log(b);    // ReferenceError :  b is not defined

In the above code snippet, when we are accessing 'a' inside the function localScope, it works well. Here, 'a' is declared gloablly scoped. But when we are accessing 'b' outside the localScope function, it gives an error because the variable b is declared locally inside a function

We can reassign some new value to variable which is declared with var or we can also redeclare. The variable holds the last assigned value and both the cases work well.

var a = 2;

a = 2;     //  reinitiated with some other value
console.log(a)    // output 2

var a = 20;     // redeclared
console.log(a);   // output 20

We can use the variable even before it is initiated this will show variable is "undefined". This is because of hoisting in javascript which will be discussed soon.

console.log(a)    //undefined
var a=100;

let keyword :

The let keyword is block scoped which means variables which declared as let can be accessed only in the block in which it is initialized. If we try to access it outside the block, it gives an error.

{
  let a = 10;
}
console.log(a);   // ReferenceError : a not defined

We can reinitialize value to a variable that is declared using let but we cannot redeclare it. If we use variable before it is declared, it gives an error whereas in case of var, it says 'undefined'.

let a = 10;   // declared

a = 20;    // reinitialized works fine

let a = 30;     // SyntaxError: Identifier 'a' has already been declared

const keyword :

const as the name suggests we can't change the value which is assigned to const variable. Once the value is initialized to a variable, it cannot be redeclared or reinitialized. The variables declared using 'let' are block scoped and variables cannot be used before its declaration.

const x = 10;

x = 20   // TypeError : Assigning to a constant variable.

In case of objects, we can add properties to the object assigned but we cannot change whole object. Same in case of arrays too. We can add values to existing array but cannot assign new array to same variable.

const details = {
  name: "Naveen",
  age : 21,
};
console.log(details)   // { name: 'Naveen', age: 21 }

details = {
  name: "Srinath",
};   // TypeError: Assignment to constant variable.

// correct syntax
details.age = 21;
console.log(details);