JavaScript Tutorial
JS - Introduction JS - Basic JS - Placement JS - Output JS - Statements JS - Syntax JS - Variables JS - Comments JS - Data Types JS - Operators JS - Operator Precedence JS - Condition JS - Switch JS - Functions JS - Objects JS - Loops For JS - Loops While JS - Break JS - Strings JS - String Methods JS - Numbers JS - Number Methods JS - Arrays JS - Array Methods JS - Array Iteration JS - Events JS - Event Listener JS - Event Propagation JS - Date JS - Math JS - Random JS - Boolean JS - Type Conversion JS - RegExp JS - Exception JS - Scope JS - Debugging JS - Hoisting JS - Strict Mode JS - this Keyword JS - Mistakes JS - Best Practices JS - Performance JS - Form Validation JS - ES6 Features
JS Objects
Object Definitions Object Properties Object Methods Object Constructors Object Prototypes
JS Functions
Function Definitions Function Parameters Function Call Function Apply Function Closures
JS HTML DOM
DOM Introduction DOM Methods DOM Selectors DOM HTML DOM CSS DOM Attributes DOM Navigation
JS Browser BOM
JS - Window JS - Screen JS - Location JS - History JS - Navigator JS - Popup Alert JS - Timing JS - Cookies
JS AJAX
AJAX - Introduction AJAX - XMLHttp AJAX - Request AJAX - Response AJAX - PHP
JS JSON
JSON - Introduction JSON - Syntax JSON - Data Types JSON - Parse JSON - Stringify JSON - Objects JSON - Arrays JSON - PHP JSON - JSONP
JS References
JavaScript Reference JavaScript Methods HTML DOM Reference

JavaScript Hoisting

In JavaScript, all variable and function declarations are moved or hoisted to the top of their current scope, regardless of where they are defined. This is the default behavior of JavaScript interpreter which is called hoisting.


Function Hoisting

Functions that are defined using a function declaration are automatically hoisted.

That means they can be called before they have been defined.

Run code

As you can see, we've called the greet() function before it is defined, but the code still works. This is because the function declaration is hoisted to the top automatically behind the scenes.

Hoisting is JavaScript's default behavior of moving declarations to the top.


Only Declarations are Hoisted

JavaScript only hoists declarations, not initializations. If a variable is declared and initialized after using it, the value will be undefined.

Run code

If you declare the variable after it is used, but initialize it beforehand, it will return the value:

Run code

Variables and constants declared with let or const are not hoisted.


JavaScript Initializations are Not Hoisted

JavaScript only hoists declarations, not initializations.

The following two examples produce different result:

Example 1:
Run code
Example 2:
Run code

In the Example 2 only the declaration (var y), not the initialization (=2) is hoisted to the top.

Because of hoisting, y has been declared before it is used, but because initializations are not hoisted, the value of y is undefined.

The above example is implicitly understood as this:

Run code

Always Declare Your Variables At the Top

Hoisting is an unknown or overlooked behavior of JavaScript.

If you don't understand hoisting, programs may contain bugs.

To avoid bugs, always declare all variables at the beginning of every scope.

Note: JavaScript in strict mode does not allow variables to be used if they are not declared.

You will learn more about "use strict" in the next chapter.