Tools: Hoisting in JavaScript

Function Declarations ## Variable Declarations with let and const ## Function Expressions and Arrow Functions ## Hoisting Inside Functions ## Summary Hoisting is JavaScript’s behavior of moving declarations (not initializations) to the top of their containing scope—either a function or the global scope. This process happens during the compilation phase, before any code is executed. In JavaScript, function declarations are fully hoisted. This means that both the function’s name and its implementation are moved to the top of their scope. As a result, you can call a function before it appears in your code. This is similar to languages like C#, where you can call class methods from anywhere within the class, regardless of their order. Here, both sayHi and sum are called before their definitions. This is possible because JavaScript hoists the entire function declarations, so the engine knows about these functions before any code is executed. Variable declarations using let and const are also hoisted, but only the declaration is moved—not the initialization. These variables are placed in the temporal dead zone (TDZ) from the start of their scope until the line where they are initialized. During this period, the variable exists but cannot be accessed. In this case, JavaScript knows about the variable b due to hoisting, but it hasn’t been initialized yet. Trying to access b before its declaration results in a ReferenceError. This behavior helps prevent bugs that might occur when variables are used before they are ready. When you define a function using a function expression (including arrow functions) and assign it to a variable declared with let or const, only the variable declaration is hoisted—not the function assignment. This means the variable is also in the temporal dead zone until it is initialized. Here, JavaScript hoists the declaration of sayHi, but the function is not assigned until that line is executed. If you try to call sayHi before the assignment, you’ll get a ReferenceError: ReferenceError: Cannot access 'sayHi' before initialization This happens because, unlike function declarations, function expressions assigned to variables behave just like any other variable declared with let or const. Just as with the global scope, variable and function declarations inside a function are hoisted to the top of that function's local scope. This means you can reference them anywhere within the function, even before their actual declaration in the code. Only the declarations are hoisted, not the initializations. For variables declared with var, the variable is initialized to undefined at the top of the function scope. For let and const, the variable is hoisted but not initialized (temporal dead zone applies). Function declarations are fully hoisted and can be called anywhere within the function. let a and const b are hoisted but not initialized, so accessing them before their declaration results in a ReferenceError. The function declaration sayHello is hoisted, so it can be called before its definition. Function declarations are fully hoisted; you can call them before their definition in the code. Variables declared with let or const are hoisted, but not initialized, and are in the temporal dead zone until their assignment line. Function expressions (including arrow functions) assigned to let or const variables are not available before their initialization, just like any other variable. Inside functions, the same rules apply: variables and function declarations are hoisted to the top of the function’s local scope. Understanding hoisting is key to avoiding bugs and writing predictable, robust JavaScript code. If you’d like to explore this concept even further, I recommend searching the web for more articles, tutorials, and documentation on JavaScript hoisting to gain a deeper understanding! Templates let you quickly answer FAQs or store snippets for re-use. Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink. Hide child comments as well For further actions, you may consider blocking this person and/or reporting abuse CODE_BLOCK: sayHi("rahul"); sum(1, 2); function sayHi(name) { console.log(name); } function sum(a, b) { console.log(a + b); } Enter fullscreen mode Exit fullscreen mode CODE_BLOCK: sayHi("rahul"); sum(1, 2); function sayHi(name) { console.log(name); } function sum(a, b) { console.log(a + b); } CODE_BLOCK: sayHi("rahul"); sum(1, 2); function sayHi(name) { console.log(name); } function sum(a, b) { console.log(a + b); } CODE_BLOCK: console.log(b); // ReferenceError: Cannot access 'b' before initialization let b = 2; Enter fullscreen mode Exit fullscreen mode CODE_BLOCK: console.log(b); // ReferenceError: Cannot access 'b' before initialization let b = 2; CODE_BLOCK: console.log(b); // ReferenceError: Cannot access 'b' before initialization let b = 2; COMMAND_BLOCK: sayHi("rahul"); const sayHi = (name) => console.log(name); Enter fullscreen mode Exit fullscreen mode COMMAND_BLOCK: sayHi("rahul"); const sayHi = (name) => console.log(name); COMMAND_BLOCK: sayHi("rahul"); const sayHi = (name) => console.log(name); CODE_BLOCK: function demoHoisting() { // Uncommenting the next line will cause a ReferenceError // console.log(a); // ReferenceError: Cannot access 'a' before initialization let a = 10; console.log(a); // 10 // Uncommenting the next line will cause a ReferenceError // console.log(b); // ReferenceError: Cannot access 'b' before initialization const b = 20; console.log(b); // 20 sayHello(); // "Hello!" function sayHello() { console.log("Hello!"); } } demoHoisting(); Enter fullscreen mode Exit fullscreen mode CODE_BLOCK: function demoHoisting() { // Uncommenting the next line will cause a ReferenceError // console.log(a); // ReferenceError: Cannot access 'a' before initialization let a = 10; console.log(a); // 10 // Uncommenting the next line will cause a ReferenceError // console.log(b); // ReferenceError: Cannot access 'b' before initialization const b = 20; console.log(b); // 20 sayHello(); // "Hello!" function sayHello() { console.log("Hello!"); } } demoHoisting(); CODE_BLOCK: function demoHoisting() { // Uncommenting the next line will cause a ReferenceError // console.log(a); // ReferenceError: Cannot access 'a' before initialization let a = 10; console.log(a); // 10 // Uncommenting the next line will cause a ReferenceError // console.log(b); // ReferenceError: Cannot access 'b' before initialization const b = 20; console.log(b); // 20 sayHello(); // "Hello!" function sayHello() { console.log("Hello!"); } } demoHoisting(); - Only the declarations are hoisted, not the initializations. - For variables declared with var, the variable is initialized to undefined at the top of the function scope. - For let and const, the variable is hoisted but not initialized (temporal dead zone applies). - Function declarations are fully hoisted and can be called anywhere within the function. - let a and const b are hoisted but not initialized, so accessing them before their declaration results in a ReferenceError. - The function declaration sayHello is hoisted, so it can be called before its definition. - Function declarations are fully hoisted; you can call them before their definition in the code. - Variables declared with let or const are hoisted, but not initialized, and are in the temporal dead zone until their assignment line. - Function expressions (including arrow functions) assigned to let or const variables are not available before their initialization, just like any other variable. - Inside functions, the same rules apply: variables and function declarations are hoisted to the top of the function’s local scope.