JavaScript Interview Questions for Beginners , Code Examples on Hoisting— Part 2

In Part 2 of our JavaScript Interview Questions series, we’ll unravel the enigma of hoisting. Understanding hoisting is crucial for acing JavaScript interviews and writing efficient code. I

Lets explore the concept of hoisting, its intricacies, and provide practical examples to help you grasp this essential JavaScript feature.

function test() {
   console.log(a);   // 1. This will log 'undefined'.
   console.log(foo());   // 2. This will log '2'.

   var a = 1;

   function foo() {
      return 2;
   }
}

test();

Here’s the explanation of each step:

1. Function Declaration (Hoisting): In JavaScript, function declarations are hoisted to the top of their containing scope. So, test is available throughout the entire test() function.
2. Variable and Function Declarations (Hoisting): Inside the test function, there are two declarations Variable a is declared using var. Function foo is declared using a function declaration. Both variable and function declarations are hoisted to the top of the test function's scope.
3. Variable Initialization: var a = 1; initializes the variable a with the value 1. This assignment occurs at the point where the var declaration is encountered during runtime.
4. Function Definition: The foo function is defined here. It doesn't execute immediately; it only defines a function that can be invoked later.
5. Function Return Value: foo() is called. This function returns 2.
6. Function Invocation (Execution): The test function is invoked with test(), which starts the execution of the function.

Now, let’s explain the output based on the steps:

1. console.log(a); At this point, a has been hoisted to the top of the test function's scope, but it hasn't been assigned a value yet. Therefore, console.log(a); logs undefined to the console.
2. console.log(foo());The foo function is defined before this line, so it can be called. It returns 2, which is then logged to the console. This happens even though the function declaration for foo is placed after this line in the code.

The output of the code is:

undefined
2

This is due to the behaviour of variable and function hoisting in JavaScript, where declarations are moved to the top of their containing scope during the compilation phase, but variable assignments and function executions happen in the order they appear in the code during runtime.

var x = 5;

(function() {
  console.log(x);
  var x = 10;
  console.log(x);
})();

console.log(x); 

Explanation:

1. var x = 5;: Here, a global variable x is declared and initialized with the value 5. This variable is accessible throughout the global scope.
2. IIFE, an anonymous function that is immediately executed. Inside it, there’s a local variable x declared with var. The key thing to understand is that variable declarations with var are hoisted, meaning they are moved to the top of their containing scope during compilation. However, they are initialized with undefined until they are assigned a value.
3. Inside the IIFE: console.log(x);: This first console.log statement prints the value of x. However, since there's a local x variable declared inside the function, JavaScript interprets it as a local variable. As a result, the local x is hoisted and initialized with undefined, so undefined is logged.
4. var x = 10;: Here, the local x variable is assigned the value 10.
5. After the IIFE: console.log(x);: Finally, outside the IIFE, we log the global variable x, which is still set to 5. It hasn't been affected by the local variable x inside the IIFE.

Output Explanation:

• The first console.log(x); inside the IIFE logs undefined because of hoisting, as it references the local x before it is assigned a value.
• The second console.log(x); inside the IIFE logs 10 because it references the local x after it has been assigned the value 10.
• The last console.log(x); outside the IIFE logs 5 because it references the global variable x, which was never modified within the IIFE.

This behaviour highlights the importance of understanding hoisting and variable scope when working with JavaScript.

function example() {
  console.log(name); // undefined
  console.log(age); // ReferenceError: age is not defined
  console.log(city); // ReferenceError: city is not defined
  
  var name = "John";
  let age = 30;
  const city = "New York";
  
  function greet() {
    console.log(`Hello, ${name}!`);
  }
  
  greet();
  
  var greet = function() {
    console.log(`Hi, ${name}!`);
  };
  
  greet();
}

example();

Explanation:

1. Inside the example function, we have variable declarations using var, let, and const. These variables are hoisted to the top of the function scope, but they have different behaviours due to their declarations.
2. There's a function declaration function greet() that is hoisted entirely, allowing it to be called before its declaration.
3. Later in the code, a function expression var greet = function() is assigned to the greet variable. This changes the behavior of the greet function.

Output Explanation:

• console.log(name); and console.log(age); both print undefined because var and let variables are hoisted and initialized with undefined. However, let variables like age remain in the Temporal Dead Zone (TDZ) until their declaration, so accessing them results in a ReferenceError.
• console.log(city); also results in a ReferenceError because const variables like city remain in the TDZ as well.
• greet(); initially calls the function declaration, which logs "Hello, John!" because the function declaration is fully hoisted.
• The later assignment of a function expression to the greet variable changes its behaviour, and the subsequent greet(); call logs "Hi, John!" because it now refers to the function expression.

This code snippet demonstrates the complexities of variable hoisting and function declarations vs. expressions in JavaScript, making it suitable for discussing hoisting in more detail during interviews.

Summary:

JavaScript hoisting is a process that takes place during the creation phase of an execution context. It involves moving variable and function declarations to the top of the script or function scope. Key points to understand about hoisting include:

1. JavaScript hoists variables declared with the let keyword but doesn't initialize them immediately, unlike variables declared with var.
2. Function expressions and arrow functions are not hoisted in JavaScript. They remain in their original position in the code and are not moved to the top of the scope.

In essence, hoisting is a fundamental concept in JavaScript that affects the visibility and behaviour of variables and functions in your code during execution.