Javascript Hoisting

Hoisting is a concept that is available in javascript by default. It is a behavior of moving all the declarations to the top.

Example

xxxxxxxxxx

greetMessage = 'Welcome to ReadersBuddy';

​

let greet = document.getElementById('message');

greet.innerHTML = greetMessage;

​

var greetMessage;

​

The above code will be reorganised as

xxxxxxxxxx

var greetMessage

greetMessage = 'Welcome to ReadersBuddy';

​

let greet = document.getElementById('message');

greet.innerHTML = greetMessage;

​

This will generate display the result as

Welcome to ReadersBuddy

Note:

• If we declare the variable greetMessage as let and const then it will not be hoisted.
• Javascript only hoists the declaration, not the initializations.

Let's modify the above code as below.

xxxxxxxxxx

let greet = document.getElementById('message');

greet.innerHTML += greetMessage;

​

var greetMessage = 'ReadersBuddy';

​

This will display the output as

undefined