Can you predict the output for the below snippets of code?

console.log(item1) 
console.log(item2)
var item1;
let item2;

let item3;
console.log(item3)

The answer to the first question is : undefined and Reference error

The answer to the second question is: undefined

Did you get them right?

These above code snippets use the concept of Hoisting and Temporal Dead Zone. Let us have a closer look in what exactly do these terms mean. But before we learn about these concepts let us first look into the basics of var, let and const.

In JavaScript we can declare variables using var, let and const keywords and all these three types have their own differences.

var

Variables declared with var are global scoped and their values can be changed anytime in the program. These variables can be redeclared and reassigned.

var fullname="John"
var fullname="Jane"

The above code snippet works perfectly fine but it is not a good practice to use var. In larger code bases, one can accidently redeclare and change the value of the same variable name and it might lead to unexpected results.

let

To sove the above problem, let was introduced. let does not allow the redeclaration of the same variable and it is block scoped i.e. its scope is limited within that block of code. Variables declared using let can be reassigned.

let fullname=”John”
let fullname=”Jane”   // SyntaxError: Identifier 'fullname' has already been declared

In the above code snippet, when we declare the variable using let and then try to redeclare the same variable, it throws an error.

const

We declare variables with const when we are sure that the value of these variables will not be changed in the code since they cannot be reassigned or redeclared. Also we have to initialize the variables during declaration itself for the variables declared with const keyword otherwise it leads to SyntaxError.

const fullname="John"

Now that we know the basic differences between var, let and const, let us now learn about hoisting.

Hoisting

Whenever any code is executed, before starting the step-by-step execution of the code, JS interpreter first scans the entire code and moves the variable declarations to the top of the scope. Only the declarations are hoisted (moved to the top) and not the initializations. Initializations are only done while the execution of the code. In case of variables declared with var, these variables are hoisted and they are initialized with undefined by default.

Variables declared with let and const are also hoisted but they work a little different than the variables declared using var.

Temporal Dead Zone

The variables which are declared with let and const keyword are not initialized with the default undefined value as in case of var variables. The default value undefined is only stored when the execution reaches the line of code where these variables are declared. If we try to access the variables declared using let or const before they have been declared, then we get a ReferenceError. The lines of code from the start of the block till the line where these variables are declared is known as the Temporal Dead Zone and we will not be able to access the variables before their declaration.

Once let and const variables are declared, they will be initialized with the value undefined and then on trying to access these variables, we will get undefined.

console.log(item1)   //undefined
console.log(item2)  //ReferenceError
var item1;
let item2;

Hence, in the above example, the item1 value is undefined since it is a variable declared using the var keyword which means that it is hoisted and initialized with the value undefined. The item2 gives ReferenceError since item2 is declared using the let keyword and it has not been initialized. It is in the Temporal Dead Zone.

But in the below example, since the variable item3 is accessed after the declaration, the let variable is initialized with the default value undefined and hence it prints undefined.

let item3;
console.log(item3)     // undefined

I hope that these examples have helped you understand the basics of the var, let, const and the concepts of Hoisting and Temporal Dead Zone.

Happy Learning 😊!!