{"id":99702,"date":"2026-01-28T19:05:43","date_gmt":"2026-01-28T13:35:43","guid":{"rendered":"https:\/\/www.guvi.in\/blog\/?p=99702"},"modified":"2026-02-26T12:10:01","modified_gmt":"2026-02-26T06:40:01","slug":"what-is-hoisting-in-javascript","status":"publish","type":"post","link":"https:\/\/www.guvi.in\/blog\/what-is-hoisting-in-javascript\/","title":{"rendered":"What Is Hoisting In JavaScript"},"content":{"rendered":"\n

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.<\/p>\n\n\n\n

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.<\/p>\n\n\n\n

Quick Answer<\/strong><\/p>\n\n\n\n

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.<\/p>\n\n\n\n

What Is Hoisting In JavaScript?<\/strong><\/h2>\n\n\n\n
\"Illustration<\/figure>\n\n\n\n

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.<\/p>\n\n\n\n

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.<\/p>\n\n\n\n

Key Points:<\/strong><\/p>\n\n\n\n

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

Do check out HCL GUVI\u2019s <\/strong>JavaScript for Beginners course<\/strong><\/a> 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.<\/p>\n\n\n\n

Hoisting Examples In JavaScript<\/strong><\/h2>\n\n\n\n

Hoisting in JavaScript<\/a> 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.<\/p>\n\n\n\n

In this section, we will cover:<\/p>\n\n\n\n

    \n
  1. Hoisting With var<\/li>\n\n\n\n
  2. Hoisting With let And const<\/li>\n\n\n\n
  3. Function Hoisting<\/li>\n\n\n\n
  4. Hoisting With Function Expressions<\/li>\n<\/ol>\n\n\n\n

    These examples will make it easier to predict how your JavaScript code will run and avoid common mistakes caused by hoisting.<\/p>\n\n\n\n

    1. Hoisting With var<\/strong><\/h3>\n\n\n\n

    Variables<\/a> 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.<\/p>\n\n\n\n

    Key Points:<\/strong><\/p>\n\n\n\n

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

    Code Example:<\/strong><\/p>\n\n\n\n

    console.log(name); \/\/ Output: undefined\nvar name = \"Alice\";\nconsole.log(name); \/\/ Output: Alice\n<\/code><\/pre>\n\n\n\n
    Explanation:<\/strong>
    <\/strong>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”.<\/p>\n\n\n\n
    2. Hoisting With let And const<\/strong><\/h3>\n\n\n\n
    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.<\/p>\n\n\n\n
    Key Points:<\/strong><\/p>\n\n\n\n
    \u2022 Hoisted But Not Initialized –<\/strong> let and const variables are hoisted but remain uninitialized until their declaration line.
    \u2022 Temporal Dead Zone –<\/strong> Accessing them before declaration throws a ReferenceError.
    \u2022 Block Scope –<\/strong> Both let and const are block-scoped, so hoisting only occurs within the block.<\/p>\n\n\n\n
    Code Example:<\/strong><\/p>\n\n\n\n
    console.log(age); \/\/ ReferenceError\nlet age = 25;\nconsole.log(city); \/\/ ReferenceError\nconst city = \"London\";\n<\/code><\/pre>\n\n\n\n
    Explanation:<\/strong>
    <\/strong>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.<\/p>\n\n\n\n
    3. Function Hoisting<\/strong><\/h3>\n\n\n\n
    Function<\/a> 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.<\/p>\n\n\n\n
    Key Points:<\/strong><\/p>\n\n\n\n
    \u2022 Fully Hoisted –<\/strong> Function declarations are completely hoisted to the top of their scope.
    \u2022 Callable Before Declaration –<\/strong> You can call the function anywhere in the scope.
    \u2022 Function Scope –<\/strong> Hoisting respects the function\u2019s scope, whether global or local.<\/p>\n\n\n\n
    Code Example:<\/strong><\/p>\n\n\n\n
    greet(); \/\/ Output: Hello, World!\nfunction greet() {\n  console.log(\"Hello, World!\");\n}\n<\/code><\/pre>\n\n\n\n
    Explanation:<\/strong>
    <\/strong>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.<\/p>\n\n\n\n
    4. Hoisting With Function Expressions<\/strong><\/h3>\n\n\n\n
    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.<\/p>\n\n\n\n
    Key Points:<\/strong><\/p>\n\n\n\n
    \u2022 var Function Expression –<\/strong> Hoisted as undefined; calling it before assignment will result in an error if invoked.
    \u2022 let\/const Function Expression –<\/strong> Hoisted but uninitialized; calling before assignment throws ReferenceError.
    \u2022 Assignment Matters –<\/strong> Only after the variable is assigned does it hold the function.<\/p>\n\n\n\n
    Code Example:<\/strong><\/p>\n\n\n\n
    console.log(sayHi); \/\/ Output: undefined\nvar sayHi = function() {\n  console.log(\"Hi!\");\n};\nconsole.log(hello); \/\/ ReferenceError\nlet hello = () => console.log(\"Hello!\");\n<\/code><\/pre>\n\n\n\n
    Explanation:<\/strong>
    <\/strong>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.<\/p>\n\n\n\n
    Do check out HCL GUVI\u2019s <\/strong>Online IDE<\/strong><\/a> 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.<\/p>\n\n\n\n
    Common Errors And Best Practices<\/strong><\/h2>\n\n\n\n
    \"Infographic<\/figure>\n\n\n\n
    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.<\/p>\n\n\n\n
    Common Errors:<\/strong><\/p>\n\n\n\n
    \u2022 Using var Before Assignment<\/strong> Accessing a var variable before assigning a value returns undefined.
    \u2022 Accessing let or const Too Early<\/strong> Trying to use let or const variables before declaration causes a ReferenceError.
    \u2022 Calling Function Expressions Too Early<\/strong> Function expressions cannot be called before assignment, unlike function declarations.
    \u2022 Confusing Function Declarations and Expressions<\/strong> Expecting function expressions to behave like declarations often causes errors.
    \u2022 Misunderstanding Scope<\/strong> Variables or functions may be hoisted differently depending on whether they are in global, function, or block scope.<\/p>\n\n\n\n
    Best Practices:<\/strong><\/p>\n\n\n\n
    \u2022 Declare Variables at the Top<\/strong> Always declare variables at the start of their scope to avoid confusion.
    \u2022 Use let and const Carefully<\/strong> Avoid accessing let and const variables before declaration to prevent ReferenceErrors.
    \u2022 Call Functions After Assignment<\/strong> Only call function expressions after they have been assigned.
    \u2022 Prefer Function Declarations for Early Calls<\/strong> Use function declarations if you need to call functions before their code appears.
    \u2022 Understand Scope<\/strong> Be aware of whether your variable or function is global, function-scoped, or block-scoped to avoid hoisting surprises.<\/p>\n\n\n\n
    Do check out HCL GUVI\u2019s <\/strong>JavaScript Hub<\/strong><\/a> 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.<\/p>\n\n\n\n
    \n  
    \ud83d\udca1 Did You Know?<\/h3>\n  
      \n    
    • You can call a function declaration before it appears in the code, but calling a function expression before assignment will fail.<\/li>\n    
    • Variables declared with var are hoisted and initialized with undefined, which can lead to unexpected results if used too early.<\/li>\n    
    • Hoisting does not physically move code; JavaScript only sets up declarations in memory first, which often surprises beginners.<\/li>\n  <\/ul>\n<\/div>\n\n\n\n
      Conclusion<\/strong><\/h2>\n\n\n\n
      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.<\/p>\n\n\n\n
      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.<\/p>\n\n\n\n
      FAQs<\/strong><\/h2>\n\n\n
      \n
      \n
      \n
      1. Can hoisting cause performance issues in large JavaScript applications?<\/strong><\/h3>\n
      \n\n
      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.<\/p>\n\n<\/div>\n<\/div>\n
      \n
      2. Does hoisting behave differently inside strict mode?<\/strong><\/h3>\n
      \n\n
      No, hoisting works the same in strict mode, but strict mode helps prevent common mistakes like using undeclared variables, reducing errors caused by hoisting.<\/p>\n\n<\/div>\n<\/div>\n
      \n
      3. How does hoisting affect JavaScript modules or ES6 imports?<\/strong><\/h3>\n
      \n\n
      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.<\/p>\n\n<\/div>\n<\/div>\n
      \n
      4. Can global variables affect hoisting behavior in functions?<\/strong><\/h3>\n
      \n\n
      Yes, if a variable is declared globally, it may overshadow local variables, and understanding hoisting ensures you don\u2019t accidentally access or overwrite global variables unintentionally.<\/p>\n\n<\/div>\n<\/div>\n
      \n
      5. Are there debugging tools to visualize hoisting in JavaScript?<\/strong><\/h3>\n
      \n\n
      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.<\/p>\n\n<\/div>\n<\/div>\n<\/div>\n<\/div>","protected":false},"excerpt":{"rendered":"
      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 […]<\/p>\n","protected":false},"author":65,"featured_media":102447,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[429,907],"tags":[],"views":"527","authorinfo":{"name":"Jebasta","url":"https:\/\/www.guvi.in\/blog\/author\/jebasta\/"},"thumbnailURL":"https:\/\/www.guvi.in\/blog\/wp-content\/uploads\/2026\/01\/What-Is-Hoisting-In-JavaScript-1-300x116.png","jetpack_featured_media_url":"https:\/\/www.guvi.in\/blog\/wp-content\/uploads\/2026\/01\/What-Is-Hoisting-In-JavaScript-1.png","_links":{"self":[{"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/posts\/99702"}],"collection":[{"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/users\/65"}],"replies":[{"embeddable":true,"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/comments?post=99702"}],"version-history":[{"count":5,"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/posts\/99702\/revisions"}],"predecessor-version":[{"id":102451,"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/posts\/99702\/revisions\/102451"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/media\/102447"}],"wp:attachment":[{"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/media?parent=99702"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/categories?post=99702"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/tags?post=99702"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}