JavaScript Interview Questions

Beginner

1. What is variable hoisting?

In JavaScript, hoisting is a behavior where the engine allocates memory for variable and function declarations during the compilation phase, before the code is executed. While it is metaphorically described as “moving declarations to the top of their scope”, the actual source code text does not move.

How a variable behaves during hoisting depends entirely on the keyword used to declare it: var, let, or const.

• Hoisting with var

  Variables declared with var are hoisted to the top of their containing function or global scope and are automatically initialized with a value of undefined.

  console.log(greet); // Outputs: undefined (due to hoisting)
  
  var greet = "Hello, World!";
  
  console.log(greet); // Outputs: "Hello, World!"

  How the interpreter sees it?

  var greet; // Declaration is hoisted and initialized to undefined
  console.log(greet); // undefined
  greet = "Hello, World!"; // Assignment stays in place
  console.log(greet); // "Hello, World!

• Hoisting with let and const

  Variables declared with let and const are also hoisted, but unlike var, they are not initialized with a default value.

  They enter what is known as the Temporal Dead Zone (TDZ). The TDZ is the period between the entering of a block scope and the line where the variable is explicitly declared and initialized. Attempting to access the variable while it is in the TDZ will throw a ReferenceError.

  let age = 20;
  {
    console.log(age); // Throws ReferenceError: Cannot access 'age' before initialization
  
    let age = 25;
  }

  The fact that it throws a ReferenceError instead of falling back to an outer global variable proves that let and const are hoisted. The scope is “aware” of them, it just strictly forbids early access.

2. Function Declaration vs Function Expression

In JavaScript, how a function is hoisted depends entirely on how it is written. The two most common ways to define a function. Function Declarations and Function Expressions behave very differently during the compilation phase.

• Function Declarations

  A Function Declaration is a standalone statement that begins with the function keyword.

  Function declarations are completely hoisted. The JavaScript engine moves both the function’s name and its entire body to the top of its scope. This means you can safely call a function declaration before it appears in your source code.

  // This works perfectly!
  greet(); // Outputs: "Hello!"
  
  function greet() {
    console.log("Hello!");
  }

• Function Expressions A Function Expression occurs when a function is created and assigned to a variable.

  Because it is assigned to a variable, its hoisting behavior is determined strictly by the variable keyword used (var, let, or const). The function body itself is never hoisted early.

  Case A: Assigned to a var

  The variable name is hoisted and initialized to undefined. If you try to invoke it like a function before the assignment line, JavaScript throws a TypeError because you are trying to execute undefined().

  sayHi(); // Throws TypeError: sayHi is not a function
  
  var sayHi = function() {
    console.log("Hi!");
  };

  Case B: Assigned to a let or const

  The variable name is hoisted but remains uninitialized in the Temporal Dead Zone (TDZ). If you try to access or call it early, JavaScript throws a ReferenceError.

  sayBye(); // Throws ReferenceError: Cannot access 'sayBye' before initialization
  
  const sayBye = () => {
    console.log("Goodbye!");
  };