var, let and const in Javascript

When you are learning javascript, it is important to understand how var, let and const behave. These are the keywords used for declaring variables in javascript. While understanding these keywords, it is also important to know the concepts of scope and hoisting in javascript.

let and const are new javascript keywords introduced in ES6. Before ES2015, javascript has only one keyword i.e., 'var' for declaring variables. var keyword handles variables in function and global scoped whereas, 'let' and 'const' come with a concept of block scope in javascript.

var keyword :

When we declare a variable using var keyword, it can be function scoped or global scoped. If we declare var at the top level i.e., outside of functions, it then has global scope and can be accessed anywhere in the code. If var is used inside a function, it has function scope where its usage is limited to that function itself.

var x = 10;

function scope() {
   var y = 20;
   console.log(x);   // output 10
   console.log(y);   // output 20
}
scope();
console.log(x);    // output 10
console.log(y);    // ReferenceError : y is not defined

In the above code, when we try to access 'x' inside the function, it works well. Here, 'x' is global scoped as it is declared outside the function. But when we try to access 'y' outside the function, it gives an error because it is declared inside the function.

We can reinitialize a 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 x = 10;

x = 30;     //  reinitialized
console.log(x)    // output 30

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

If we use the variable first and then if we declare it using var keyword, this says the variable is "undefined". This is because of hoisting in javascript which will be discussed soon.

console.log(x);    // undefined

var x = 10;

let keyword :

The let keyword is block scoped which means its variable access can be only up to the block in which it is initialized. If we try to access it outside the block, it gives an error.

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

We can reinitialize value to a variable which 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 x = 10;   // declared

x = 20;    // reinitialized works fine

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

const keyword :

const name itself states that the values assigned are constant. 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: "Prashanth",
  age : 21,
};
console.log(details)   // { name: 'Prashanth', age: 21 }

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

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

Hoisting in javascript :

In javascript, when the code is compiled and before it gets executed, a global execution context is created. There are two phases in global execution context. One is memory allocation phase and execution phase. Hoisting comes in this memory allocation phase.

Before execution, all the variables and functions in the code are hoisted in memory. That means they are moved to the top of the scope just before the code executes. Though variables and functions are declared still their values are not initialized.

check();
console.log(x);     // undefined

var x = 10;

function check(){
    console.log("hello")     // prints hello
}

If we write above code in other programming languages, it throws an error because the values are accessed before they are initialized. When we try to execute the same code in javascript, it works well. This is just because of "hoisting in javascript".

When we try to access the function in the first line of code it returns "hello" because the function is already declared in the memory. Similarly, in second line when we try to console 'x', its value is not initialized. Since the variable is declared in the memory, it says undefined.