Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

hoisting
function hoisting
variable hoisting

What is function hoisting in JavaScript?

Educative Answers Team

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

JavaScript has a feature that allows function and variables to be hoisted – this is useful for many developers. Hoisting is a JavaScript mechanism where variables and function declarations are moved to the top of their scope before code execution.

Variable Hoisting

Variables are not hoisted as they cannot be used before their declaration. As shown by the code below, the variable x was used before it was declared. At this point, the variable x does not exist. Therefore, an error is thrown when you try to access the value of a variable that doesn’t exist. The value returned by x is undefined, as illustrated by the output:

console.log(x);
var x = "Educative is amazing!";
console.log(x);

Function hoisting

Hoisted functions can be used before their declaration. As you can see, the JavaScript interpreter allows you to use the function before the point at which it was declared in the source code. This is extremely useful as the function can be called before defining it. One can then define the function anywhere in the program code. As can be seen from the code below, the Func_Hoisted() function is called before it is declared. Function declarations can be hoisted.

Func_Hoisted();
function Func_Hoisted() {
console.log("This function is hoisted!");
}

Function expressions vs. function declarations

Function definition hoisting only occurs for function declarations, not function expressions. Function expressions are defined with a function as a variable. The definitions look like var b = function(). This kind of function declarations through expressions makes the function NOT Hoisted. As can be seen in the example below, function a is defined as a declaration, but function b is defined as an expression. So, when we call function b, it gives an error claiming that function b is not defined.

// This will work
a();
// This will throw an error
b();
// function declaration
function a() {
console.log("This function is hoisted!");
}
// function expresssion
var b = function () {
console.log("This declaration makes function not hoisted!");
}
svg viewer

RELATED TAGS

hoisting
function hoisting
variable hoisting
Copyright ©2022 Educative, Inc. All rights reserved

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

Keep Exploring