Emmanuel Obi
The Code Prophet

Follow

The Code Prophet

Follow
Understand Hoisting In 4 Minutes๐Ÿš€โœ๐Ÿพ.

Understand Hoisting In 4 Minutes๐Ÿš€โœ๐Ÿพ.

Have you thought about the reason why you can call a function before declaring it in JavaScript? Let's take a look!

Emmanuel Obi's photo
Emmanuel Obi
ยทOct 8, 2022ยท

4 min read

In this article, I briefly discuss Hoisting with regard to variables, classes, and functions. Hoisting is an important concept every JavaScript developer must understand and if you don't already, then today is your lucky day.๐Ÿ™‚

To really understand Hoisting, we must first understand the lifecycle of a variable.

Shall we?

What (Really) Goes Into Mentorship That Works (5).jpg

Lifecycle of a variable

Let us understand this precisely

The lifecycle of a variable follows this sequence:

1.Declaration -> 2.Initialization/Assignment -> 3. Usage

Example

var a;      // Declaration

a = 2000;      // Initialization/Assignment

console.log(a)      // Usage

But as we should all be aware, JavaScript allows us to declare and initialize the variables simultaneously. This is a very common practice.

Example

var a = 2000;      // Declaration & Initialization

console.log(a)      // Usage

Another essential thing to remember is that JavaScript first declares the variables and functions, and after that initializes them. However, undeclared variables do not exist in JavaScript until the code assigning them gets executed. So when assigning values to any of the undeclared variables, they are converted to global variables by JavaScript when the assigned code is being executed. Therefore, all undeclared variables are global variables.

To demonstrate this, let's look at an example.

Example

function firstFunc() {   
    a = 11;   
    let b = 50;   
}   

firstFunc();   

function secondFunc() {  
console.log(a);      // 11  
console.log(b);      // ReferenceError : b is not defined  
}  

secondFunc();

The variable a which was assigned a value without being declared in firstFunc, became a global variable. Hence, the reason why it was available to secondFunc and b was not.

What is hoisting?

Simply put, Hoisting in JavaScript refers to the process whereby the interpreter appears to move the declaration of functions, variables, or classes to the top of their scope, prior to execution of the code.

Hoisting allows functions to be safely used in code before they are declared.

Variable and class declarations are also hoisted, so they too can be referenced before they are declared. Note that doing this can lead to unexpected errors, and is generally not recommended.

Due to the concept of hoisting in JavaScript, we can call a function even before we declare it in our program's code.

  • Variable hoisting

Hoisting works with variables, so you can use a variable in code before it is declared and/or initialized.

However as stated earlier, JavaScript only hoists declarations, not initializations! This means that initialization doesn't happen until the associated line of code is executed, even if the variable was originally initialized then declared, or declared and initialized in the same line.

Until that point in the execution is reached the variable is initialized with undefined by default.

Example of what can happen if you use a variable before it is declared:

console.log(value);      // Returns 'undefined' from hoisted var declaration (not 30)
var value;      // Declaration
value = 30;      // Initialization
console.log(value);      // Returns 30 after the line with initialization is executed.

The same thing happens if we declare and initialize the variable in the same line.

console.log(value);      // Returns 'undefined' from hoisted var declaration (not 30)
var value = 30;      // Initialization and declaration.
console.log(value);      // Returns 30 after the line with initialization is executed.
  • Hoisting : Functions

An advantage of hoisting is that it lets you use a function before you declare it in your code.

Example

const message = getMessage();
console.log({message});

const getMessage = () => "Message received";

Without hoisting, we'd have to arrange our code this way:

Example

const getMessage = () => "Message received";

const message = getMessage();
console.log({message});
  • Hoisting: Classes

Classes defined using a class declaration are hoisted, which means that JavaScript has a reference to the class. However the class is not initialized by default, so any code that uses it before the line in which it is initialized is executed will throw a ReferenceError.

  • Hoisting: Function and Class expressions

Function expressions and class expressions are not hoisted.


Closing

Thanks for reading through this article, I hope you've learned from this. There are a lot more fundamental JavaScript concepts(Closures, Currying...) that you must learn and I hope to touch on them in future articles.

Please let me know your thoughts in the comment section and share this article with your network!๐Ÿ’œ

Your friend In Progress,

CodeProphet.

What (Really) Goes Into Mentorship That Works (4).jpg

ย 
Share this