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!
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?
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.
Relevant Links To Refer To
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.
