Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
January 12, 2022 08:11 am GMT

HOISTING IN js

Hello there today we meet again with new topic that is HOISTING so lets start together

what is hoisting??
HOISTING::JavaScript Hoisting 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.

Here we can declare functions before we use it so variables and class declarations are also being used as difference.

so lets discuss about function hoisting

FUNCTION HOISTING

One of the advantages of hoisting is that it lets you use a function before you declare it in your code.

catName("Tiger");

function catName(name) {
console.log("My cat's name is " + name);
}
/*
The result of the code above is: "My cat's name is Tiger"
*/

Without hoisting you would have to write the same code like this:

function catName(name) {
console.log("My cat's name is " + name);
}

catName("Tiger");
/*
The result of the code above is the same: "My cat's name is Tiger"
*/

this example was used from MDN docs because i found out that this is the best example

VARIABLE HOISTING

so as i told previously we can do variable hoisting too but here variable which can be hoisted are declaration not intializations so we cannot hoist initializations

lets have an example here:
Here we declare then initialize the value of a var after using it. The default initialization of the var is undefined.

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

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

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

If we forget the declaration altogether (and only initialize the value) the variable isn't hoisted. Trying to read the variable before it is initialized results in ReferenceError exception.

console.log(num); // Throws ReferenceError exception - the interpreter doesn't know about num.
num = 6; // Initialization

Variables declared with let and const are also hoisted but, unlike var, are not initialized with a default value. An exception will be thrown if a variable declared with let or const is read before it is initialized.

console.log(num); // Throws ReferenceError exception as the variable value is uninitialized
let num = 6; // Initialization
Copy to Clipboard
Note that it is the order in which code is executed that matters, not the order in which it is written in the source file. The code will succeed provided the line that initializes the variable is executed before any line that reads it.

and the last one class hoisting so this is the last topic for today so lets disscuss and packup

CLASS HOISTING

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.

Function expressions and class expressions are not hoisted.

The expressions evaluate to a function or class (respectively), which are typically assigned to a variable. In this case the variable declaration is hoisted and the expression is its initialization. Therefore the expressions are not evaluated until the relevant line is executed.

so thats all for today catch you in next time with some interesting topic... byee hope you are having a good day...


Original Link: https://dev.to/choppalibhargav/hoisting-in-js-21m2

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To