Summary

JavaScript's hoisting mechanism allows variables and functions to be used before their declaration in the code by conceptually moving their declarations to the top of their containing scope.

Abstract

Hoisting is a unique feature in JavaScript where variable and function declarations are moved to the top of their scope before code execution. This means that even if a variable or function is called before it is declared in the source code, it will work as if it was declared at the beginning. In JavaScript, when variables are hoisted, they are initialized with a value of undefined. This is different from other programming languages where variables and functions must be declared before they are used. Function hoisting is also possible in JavaScript, allowing a function to be called before its definition appears in the code. However, function expressions are not hoisted in the same way as function declarations.

Opinions

The concept of hoisting is presented as a distinctive characteristic of JavaScript compared to other programming languages.
Hoisting is described as a two-step process involving the creation phase, where memory is allocated and variables are initialized to undefined, and the execution phase, where the actual values are assigned.
The article clarifies a common misconception by explaining that hoisting does not actually move the code but is a conceptual framework for understanding how JavaScript handles declarations.
The author emphasizes that function expressions are treated differently from function declarations during hoisting, as the former are not hoisted, and this behavior might not be immediately intuitive to developers.
The article suggests that understanding hoisting is crucial for writing effective and error-free JavaScript code.

JavaScript — Understanding Hoisting

Variables and functions are the most common things we use everyday in a programming language. Almost all the programming languages have the same idea when declaring variables and functions except JavaScript. JavaScript likes to handle things little differently.

In other programming languages such as java, PHP, c++ when you declare a variable or function you define it before calling the function or using a variable.

$x;
$x = 'some value';

In php you can declare a variable like above and can use it for your own purpose but you don’t have to do the same thing in javascript. You can do something like this

x = 5;
var x;

This code is completely fine and works perfectly in JavaScript but it will not be the same in any other languages. This is possible in JavaScript and this is called hoisting.

Simply saying taking all your variables and functions and putting them at the top.

This would be the definitions you would have fined on most of the websites but that is not what actually happens under the hood exactly.

JavaScript has two steps in executing a particular script.

The First step is creation.
Then the execution of the code.

In the first step JavaScript analyses all the code and allocate the memory spaces for variables and functions. All the variables are assigned a value of undefinedwhen declared first.

console.log(x); // This would print undefined

x = 5;

var x;

undefined is a primitive type in JavaScript and all the variables are given a value of undefined when declared.

Function Hoisting

Like variables functions are also hoisted in JavaScript. So even if you write a function definition at the end of the line and call it in the first line of code , it will work without any issues.

hello() // output will be Hello, Welcome to my blog!

function hello() {

console.log('Hello, Welcome to my blog!');

sayHello(); // This would return undefined

var sayHello = function(){
 console.log('hello');
}

The last function definition will not execute since it is defined as a function expression with a variable and all variables will be assigned with undefined before any assignment happen in script

More References for hoisting

Hoisting MDN