Hoisting Javascript

Hoisting is a javascript concept and is defined as the process of moving variable and function declarations to the top of the file(or current scope of execution). Hoisting is done automatically by the javascript engine.

This post will explain hoisting in much more detail than the above definition. That was just for an interview purpose 😉
Hoisting can be divided into two parts: Function and Variable hoisting.

Understanding Function 
Before digging into the concept of function hoisting, first let us be familiar with terms like functions, function declaration and function expression in javascript. If you are familiar with these, skip this section.

Function: A function in javascript is a set of statements performing some task. A function may or may not accept arguments and may or may not return a value.

Function declaration: Defining a function using function keyword and a function name followed by function arguments and body is called function declaration in javascript.
When it is without any name, function is called an anonymous function.
Example,

function print() {
   console.log('Function declaration');
}

Function expression: A function declaration when assigned to a variable is known as function expression. A function expression may or may not contain a function name. Example,

// function expression with name
const f = function print() {
   console.log('Function declaration');
}

// function expression without name
const f = function() {
   console.log('Function declaration');
}

1. Function Hoisting
Suppose you have a function defined in a javascript code as below.

function print() { 
   console.log('Function declaration'); 
}

If you try to call this function before it is declared, then it will be successfully called. Example,

//call function
print();  // prints Function declaration

// define function
function print() {
   console.log('Function declaration');
}

This is possible because at run time, the javascript engine moves all the function definitions at the top. Thus, at run time, the above code will become.

function print() {
   console.log('Function declaration');
}
print();

This is called Function hoisting.

Function hoisting only happens for functions defined using Function declaration syntax(explained above).
For functions that are defined using Function expression syntax, this does not happen.
That is, you can not call a function defined using Function expression syntax before its definition.

Thus, below code when executed will result in an error.

// call function
f();

// function expression
const f = function print() {
   console.log('Function declaration');
}

2. Variable Hoisting
In javascript, variable declarations are also hoisted. This means that if a variable is used before it is defined, then it will not be an error. Example,

// print variable value
console.log(name); // prints undefined

// declare variable
var name;

This is because at run time, javascript engine will move all the variable declarations to the top. Thus, at run time, the above code will be changed to.

var name;
console.log(name); 

Value of variable will be undefined since it has not been initialized till the time it is used.

Another example.

// print variable value
console.log(name); 

// declare variable
var name = 'codippa';

Can you guess what does above code print?
It will again be undefined although the variable has been initialized. This is because javascript hoists declarations of variables, not their initialization. Above code at run time will be changed to.

var name;
console.log(name); 
name = 'codippa';

Variable declaration will move to the top due to hoisting but its initialization will remain at the same line. Clearly, at the time the variable is used, it has no value or it is undefined.

let and const are not hoisted
let and const are the new keywords for declaring variables and constants respectively, in javascript introduced in ES6. Variables and constants declared using these keywords are not hoisted.

That is, if you use variables that are declared with let or constants declared with const, then it will be an error. Example,

// print variable value
console.log(name); 

// declare variable
let name = 'codippa';

Above code will result in

Thus, variables declared with var are hoisted but those declared with let are not hoisted.

Hope this post clarified the concept of hoisting in javascript. Hit the clap!!!