What is Hoisting in JavaScript

What is Hoisting in JavaScript ?

Okay, Welcome.

So I am Vikram Parihar, Today we will learn and try to understand the concept of hositing in #javascript. Before we go ahead if you are new to javascript please considered following link to understand the basic functionality and concept of javascript.

• https://developer.mozilla.org/en-US/docs/Web/JavaScript
• https://docs.microsoft.com/en-us/learn/modules/web-development-101-variables/

What is Hoisting ?

In JavaScript, hoisting allows you to use functions and variables before they're declared. In this post, we'll learn what hoisting is and how it works

console.log(hi)
var hi = 'Welcome to hoisting'

Look at the below code, You can see, you are accessing the "hi" variable before your declaration and js interpreter allow you to run this block of code.

This is because the JavaScript interpreter splits the declaration and assignment of functions and variables: it "hoists" your declarations to the top of their containing scope before execution.

This process is called hoisting, and it allows us to use hi before its declaration in our example above.

Variable hoisting with var

When the interpreter hoists a variable declared with var, it initializes its value to undefined. The first line of code below will output undefined:

console.log(foo); // undefined

var foo = 'bar';

console.log(foo); // "bar"

Variable hoisting with let and const

Variables declared with let and const are hoisted but not initialized with a default value. Accessing a let or const variable before it's declared will result in a ReferenceError:

console.log(foo); // Uncaught ReferenceError: Cannot access 'foo' before initialization

let foo = 'bar';  // Same behavior for variables declared with const

Function hoisting

Function hoisting is useful because we can hide function implementation farther down in the file and let the reader focus on what the code is doing. In other words, we can open up a file and see what the code does without first understanding how it's implemented.

Look at the following code

resetScore();
drawGameBoard();
populateGameBoard();
startGame();

function resetScore() {
	console.log("Resetting score");
}

function drawGameBoard() {
	console.log("Drawing board");
}

function populateGameBoard() {
	console.log("Populating board");
}

function startGame() {
	console.log("Starting game");
}

However, using functions before their declaration is a matter of personal preference. Some developers, such as Wes Bos, prefer to avoid this and put functions into modules that can be imported as needed (source: Wes Bos).

Airbnb's style guide takes this further and encourages named function expressions over declarations to prevent reference before declaration:

Function declarations are hoisted, which means that it’s easy - too easy - to reference the function before it is defined in the file. This harms readability and maintainability.

If you find that a function’s definition is large or complex enough that it is interfering with understanding the rest of the file, then perhaps it’s time to extract it to its own module! (Source: Airbnb JavaScript Style Guide)

Conclusion

Thanks for reading, and I hope this post helped you learn about hoisting in JavaScript. Feel free to reach out to me on github if you want to connect or have any questions!

What is Hoisting in JavaScript ?