Understanding JavaScript Hoisting

Hoisting is a behavior in JavaScript where variable and function declarations are moved to the top of their containing scope during the compilation phase, before the code is executed. This means that regardless of where variables and functions are declared within a scope, they are treated as if they were declared at the top of that scope.

However, it is important to note that only the declarations are hoisted, not the initialization or assignments.

Before diving into this topic, I think it is better to understand the meaning of declaration and initialization keywords.

Declaration of Variables

Declaring a variable means specifying a variable with its type. This will help to reserve memory space for that variable to store data. In Javascript, ‘var’, ‘let’ and ‘const’ keywords are used to declare variables.

var count;

Declaration of Functions

Define a block of code which can be repeatedly executable. It consists of a function name and a list of parameters (optional). Here is an example of a Javascript function.

function greet(name) {
  console.log("Hello, " + name + "!");
}

Initialization of Variables

In this process, it will assign a value to a declared variable. This process makes sure that the particular declared variable holds a value before it is used. Here is an example,

var count = 0;

Initialization of Function

In the process of function initialization, the block of code will be assigned to a variable, so the variable can act as a reference to the function. If we consider the previously declared function here, it can be initialised as below.

var greet = function(name) {
  console.log("Hello, " + name + "!");
};

Now you will understand the difference between initialization and declaration.

Let’s dive into our main topic, hoisting in Javascript. I will discuss the topic with the examples.

01. Hoisting with Variables

Example 01.

console.log(flower) //Output: undefined
var flower;

It returns undefined as output, because it is not initialized. And also, the code above will act exactly the same as below code.

var flower;
console.log(flower)

Example 02.

flower="Rose"
console.log(flower) //Output: Rose
var flower

Since the declaration moves to the top, the code will output the initialized name.

Example 03.

console.log(flower) //Output: undefined
var flower = "Rose"

You can see that it returns an undefined value, because hoisting will only move the declaration to the top.

Example 04.

Hoisting is only working with the variable declared using ‘var’ and not working with the variables which are defined using ‘let’ and ‘const’.

flower="Rose"
console.log(flower) //Output:Uncaught ReferenceError: Cannot access 'flower' before initialization
let flower

02. Hoisting with Functions

Example 01.

sayHi("Gayan"); //Output: Hi, Gayan


function sayHi(userName) {
console.log('Hi, ',userName);
}

In this example, sayHi() function was called before it was declared, and it worked perfectly because of Hoisting. However, if we assign this function to a variable, it will give you an error as variable initialization.

Hoisting is a behavior specific to the JavaScript programming language. It is a feature of the JavaScript runtime environment and how it processes and executes JavaScript code. Other programming languages may have different behaviors regarding variable and function declarations.

I hope this article has significantly contributed to expanding your knowledge about JavaScript hoisting. Thank you for taking the time to read this article, and I invite you to follow me for more content like this in the future.