JavaScript Interview Topic 03 : Hoisting in Javascript
Tags: webdev, javascript, programming, tutorial
Published: 2023-06-27 16:39:50

Hoisting is a JavaScript behavior that allows variable and function declarations to be moved to the top of their containing scope during the compilation phase, before the code is executed. This means that you can use variables and functions before they are declared in your code. However, it's important to note that only the declarations are hoisted, not the initializations or assignments.

points to understand about hoisting:

**1. Variable Hoisting:**

   When variables are hoisted, the declaration is moved to the top of the scope, but the assignment or initialization remains in place. This allows you to use variables before they are declared. However, if you try to access a variable before it's assigned a value, it will result in `undefined`. For example:

   ```javascript
   console.log(myVariable); // undefined
   var myVariable = 10;
   ```

In this example, the `myVariable` declaration is hoisted to the top, but the assignment `var myVariable = 10;` remains in place. So, the first `console.log` statement prints `undefined`.

**2. Function Hoisting:**

Function hoisting is a JavaScript behavior that allows you to call a function before it's declared in your code. This is possible because function declarations are fully hoisted to the top of their containing scope during the compilation phase.

Here's a more detailed explanation of how function hoisting works:

1. Function Declaration Hoisting:
   In JavaScript, when you declare a function using the `function` keyword, the entire function declaration is hoisted to the top of its containing scope. This means that you can call the function before its actual declaration in your code. For example:

   ```javascript
   sayHello(); // "Hello!"

   function sayHello() {
     console.log("Hello!");
   }
   ```

   In this example, the `sayHello` function is hoisted to the top of its containing scope, allowing us to call it before the actual function declaration. When the function is invoked, it will execute the code within its function body.

   It's important to note that function declarations are hoisted but not their assignments or initializations. Only the function name and the function body are hoisted.

2. Anonymous Function Expressions:
   Function expressions, on the other hand, behave differently when it comes to hoisting. With function expressions, only the variable declaration is hoisted, not the function assignment. For example:

   ```javascript
   sayHello(); // TypeError: sayHello is not a function

   var sayHello = function () {
     console.log("Hello!");
   };
   ```

   In this example, the variable declaration `var sayHello` is hoisted to the top, but the function assignment `function () { console.log("Hello!"); }` remains in place. As a result, when we try to call `sayHello` before the assignment, it throws a `TypeError`.

3. Named Function Expressions:
   Named function expressions are also subject to hoisting, but the function name is only accessible within the function itself and not outside of it. For example:

   ```javascript
   sayHello(); // TypeError: sayHello is not a function

   var sayHello = function greet() {
     console.log("Hello!");
   };
   ```

   In this example, the function expression is assigned to the variable `sayHello`, but the function name `greet` is only accessible within the function itself. So, when we try to call `sayHello` before the assignment, it throws a `TypeError`.

Function hoisting can be useful when organizing your code, allowing you to call functions before their declarations. However, it's generally considered a best practice to declare functions at the top of their containing scope to enhance code readability and prevent potential issues with hoisting.


**3. Hoisting and Let/Const:**
   Variables declared with `let` and `const` are also hoisted but behave differently compared to `var`. With `let` and `const`, the hoisted variable is in a "temporal dead zone" until the actual declaration is encountered. Accessing the variable before its declaration results in a `ReferenceError`. For example:

   ```javascript
   console.log(myVariable); // ReferenceError: Cannot access 'myVariable' before initialization
   let myVariable = 10;
   ```

In this example, the `let myVariable = 10;` declaration is hoisted, but accessing it before the declaration causes a `ReferenceError`.

Hoisting is a default behavior in JavaScript, but it's important to understand how it works to avoid any unexpected results. It's considered a best practice to declare variables and functions at the beginning of their scope to enhance code readability and prevent confusion.