What Is Hoisting In JavaScript

Imagine reading JavaScript code from top to bottom, but the browser seems to read it in a different order. A variable is used first, declared later, and the code still runs. For beginners, this feels confusing and hard to trust.

This behavior is called hoisting in JavaScript. Many beginners encounter this while learning JavaScript and are unsure why it happens. This blog is written for beginners to clearly explain what hoisting in JavaScript is, using simple examples and easy explanations.

Quick Answer

Hoisting in JavaScript is a behavior where the JavaScript engine moves variable and function declarations to the top of their scope before the code runs. This allows some variables and functions to be used before they are written in the code. Only declarations are hoisted, not the values assigned to them, which explains many unexpected results in JavaScript.

What Is Hoisting In JavaScript?

In JavaScript, sometimes variables or functions can be used before they are written in the code, and the program still works. This happens because of a behavior called hoisting. Hoisting in JavaScript moves all variable and function declarations to the top of their scope during memory allocation, even before the code runs.

This does not mean the values assigned to variables are moved. Only the declarations are prepared first. Understanding hoisting in JavaScript helps beginners see how JavaScript reads their code, why some variables or functions exist before they appear, and how to avoid unexpected errors.

Key Points:

• Variables Are Hoisted –  Variables declared with var are hoisted and initialized with undefined.
• Functions Are Hoisted – Function declarations are fully hoisted, allowing them to be called before their definition.
• Only Declarations Are Hoisted – Assigned values are not hoisted, only the declaration itself.
• No Physical Movement – JavaScript does not physically move code lines. It prepares memory first.
• Scope Matters –  Hoisting occurs within the variable or function’s scope, whether global or local.

Do check out HCL GUVI’s JavaScript for Beginners course to learn more about how hoisting, variables, functions, and other core JavaScript concepts work in practice. This course offers hands-on examples and exercises to help you write clean and error-free JavaScript code with confidence.

Hoisting Examples In JavaScript

Hoisting in JavaScript behaves differently depending on whether you are working with variables or functions. This section will give you clear examples to understand how hoisting works in real code. You will see how variables declared with var, let, and const behave, how function declarations are hoisted, and how function expressions differ.

In this section, we will cover:

1. Hoisting With var
2. Hoisting With let And const
3. Function Hoisting
4. Hoisting With Function Expressions

These examples will make it easier to predict how your JavaScript code will run and avoid common mistakes caused by hoisting.

1. Hoisting With var

Variables declared with var are hoisted to the top of their function or global scope. This means the variable name is known to JavaScript before the code runs, but it is initialized with undefined. Accessing the variable before the assignment line does not throw an error, but its value will be undefined. This behavior often leads to confusion for beginners who expect variables to exist only after their declaration.

Key Points:

• Hoisted With undefined – Variables declared with var are hoisted and initialized with undefined.
• Function Scope – var is function-scoped, not block-scoped, so hoisting happens within the function.
• Accessible Before Declaration – You can reference the variable before it is written, but it will return undefined.

Code Example:

console.log(name); // Output: undefined
var name = "Alice";
console.log(name); // Output: Alice

Explanation:
In this code, the variable name is hoisted to the top of the scope and initialized with undefined. That is why the first console.log prints undefined. After the assignment, it prints “Alice”.

2. Hoisting With let And const

Variables declared with let and const are hoisted, but unlike var, they are not initialized. These variables remain in the temporal dead zone from the start of the block until their declaration is reached. Trying to access them before the declaration throws a ReferenceError. This makes let and const safer to use, as they prevent accidental use of variables before initialization.

Key Points:

• Hoisted But Not Initialized – let and const variables are hoisted but remain uninitialized until their declaration line.
• Temporal Dead Zone – Accessing them before declaration throws a ReferenceError.
• Block Scope – Both let and const are block-scoped, so hoisting only occurs within the block.

Code Example:

console.log(age); // ReferenceError
let age = 25;
console.log(city); // ReferenceError
const city = "London";

Explanation:
Here, age and city are hoisted but uninitialized. Attempting to access them before declaration results in a ReferenceError. This demonstrates the temporal dead zone, which prevents using the variable before it is defined.

3. Function Hoisting

Function declarations in JavaScript are fully hoisted. This means both the function name and its body are moved to the top of their scope during memory allocation. Because of this, you can call a function anywhere within its scope, even before the line where it is defined. This behavior is useful for organizing code and creating helper functions that are used before they are defined in the source code.

Key Points:

• Fully Hoisted – Function declarations are completely hoisted to the top of their scope.
• Callable Before Declaration – You can call the function anywhere in the scope.
• Function Scope – Hoisting respects the function’s scope, whether global or local.

Code Example:

greet(); // Output: Hello, World!
function greet() {
  console.log("Hello, World!");
}

Explanation:
The function greet is fully hoisted, so it can be called before its definition in the code. This is different from variables, which may only be initialized with undefined.

4. Hoisting With Function Expressions

Function expressions, including arrow functions, behave differently from function declarations. Only the variable they are assigned to is hoisted, not the function itself. Using a function expression before it is assigned depends on whether the variable is declared with var, let, or const. Accessing it too early can lead to errors or undefined values.

Key Points:

• var Function Expression – Hoisted as undefined; calling it before assignment will result in an error if invoked.
• let/const Function Expression – Hoisted but uninitialized; calling before assignment throws ReferenceError.
• Assignment Matters – Only after the variable is assigned does it hold the function.

Code Example:

console.log(sayHi); // Output: undefined
var sayHi = function() {
  console.log("Hi!");
};
console.log(hello); // ReferenceError
let hello = () => console.log("Hello!");

Explanation:
The var function expression sayHi is hoisted as undefined, so referencing it before assignment does not throw ReferenceError, but calling it would. The let arrow function hello is in the temporal dead zone, so accessing it before declaration throws a ReferenceError.

Do check out HCL GUVI’s Online IDE to practice JavaScript concepts like hoisting by writing and running code instantly in your browser. It helps you experiment with variable declarations, function behavior, and execution flow in real time, making it easier to understand how JavaScript actually works.

Common Errors And Best Practices

When learning hoisting in JavaScript, beginners often face unexpected behavior that can feel confusing. Most of these issues are not caused by complex problems, but by small mistakes related to variable declarations, function usage, or scope. Understanding these common errors and following best practices can help avoid bugs and make your code more predictable.

Common Errors:

• Using var Before Assignment Accessing a var variable before assigning a value returns undefined.
• Accessing let or const Too Early Trying to use let or const variables before declaration causes a ReferenceError.
• Calling Function Expressions Too Early Function expressions cannot be called before assignment, unlike function declarations.
• Confusing Function Declarations and Expressions Expecting function expressions to behave like declarations often causes errors.
• Misunderstanding Scope Variables or functions may be hoisted differently depending on whether they are in global, function, or block scope.

Best Practices:

• Declare Variables at the Top Always declare variables at the start of their scope to avoid confusion.
• Use let and const Carefully Avoid accessing let and const variables before declaration to prevent ReferenceErrors.
• Call Functions After Assignment Only call function expressions after they have been assigned.
• Prefer Function Declarations for Early Calls Use function declarations if you need to call functions before their code appears.
• Understand Scope Be aware of whether your variable or function is global, function-scoped, or block-scoped to avoid hoisting surprises.

Do check out HCL GUVI’s JavaScript Hub to deepen your understanding of core JavaScript concepts like hoisting, variables, functions, and execution flow. This hub brings together structured articles, explanations, and learning resources that help beginners connect theory with real coding behavior.

Conclusion

Understanding hoisting in JavaScript is essential for writing predictable and error-free code. By knowing how variables and functions are hoisted, you can avoid common mistakes and make better decisions about where and how to declare them.

Remember that var variables are initialized with undefined, let and const exist in the temporal dead zone, and function declarations are fully hoisted while function expressions are not. Keeping these rules in mind will help you write cleaner, more reliable JavaScript code.

FAQs

1. Can hoisting cause performance issues in large JavaScript applications?

Hoisting itself does not significantly affect performance, but relying on it heavily can make code harder to read and maintain, which may indirectly impact efficiency in large projects.

2. Does hoisting behave differently inside strict mode?

No, hoisting works the same in strict mode, but strict mode helps prevent common mistakes like using undeclared variables, reducing errors caused by hoisting.

3. How does hoisting affect JavaScript modules or ES6 imports?

In ES6 modules, variables and functions are still hoisted within the module scope, but imports are handled differently and are not hoisted like regular variables or functions.

4. Can global variables affect hoisting behavior in functions?

Yes, if a variable is declared globally, it may overshadow local variables, and understanding hoisting ensures you don’t accidentally access or overwrite global variables unintentionally.

5. Are there debugging tools to visualize hoisting in JavaScript?

Yes, browser developer tools like Chrome DevTools allow you to step through code execution, inspect scopes, and see how variables and functions are hoisted during runtime.