JavaScript Interview Topic 03 : Hoisting in Javascript

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:

   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:

   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.

1. 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:

   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.

1. 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:

   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:

   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.