Hoisting is one of those quirky features in JavaScript that can trip up new developers. To understand hoisting, it’s essential to know how JavaScript handles variable and function declarations when your code runs.

What is Hoisting?

In JavaScript, hoisting refers to the behavior in which variable and function declarations are moved to the top of their containing scope (be it global or function scope) during the compilation phase. This means you can use variables and functions before they are actually declared in your code.

Variable Hoisting

In JavaScript, the way hoisting works for variables differs slightly depending on whether you use var, let, or const.

• var:

  When you declare a variable with var, the declaration is hoisted to the top, but not its initialization. For example:

  console.log(myVar); // Output: undefined
  var myVar = 5;
  console.log(myVar); // Output: 5

  In the above code, myVar is hoisted to the top, but its value of 5 isn’t assigned until the line myVar = 5; is executed. Hence, the first console.log displays undefined.

• let and const:

  Variables declared with let and const also get hoisted, but they stay uninitialized until their declaration is reached. Accessing these variables before their declaration results in a ReferenceError:

  console.log(myLet); // ReferenceError: Cannot access 'myLet' before initialization
  let myLet = 10;
  
  console.log(myConst); // ReferenceError: Cannot access 'myConst' before initialization
  const myConst = 20;

  Hence, let and const come with a "temporal dead zone" (TDZ) which prevents the use of the variable before it’s declared.

Function Hoisting

Functions behave differently than variables. Function declarations are fully hoisted, which means you can call a function before you define it in your code.

• Function Declarations:

  greet(); // Output: Hello!
  
  function greet() {
    console.log("Hello!");
  }

  In this case, the greet function is declared and initialized before any actual code execution happens, allowing you to call it at the top of the file.

• Function Expressions:

  If you use a function expression, hoisting behaves differently. The variable will be hoisted, but the function itself will not:

  myFunc(); // Output: TypeError: myFunc is not a function
  
  var myFunc = function() {
    console.log("Hello!");
  };

  In this code, myFunc is hoisted as a variable but is still undefined at the time of the call, resulting in a TypeError.

Summary of What Gets Hoisted

1. Function Declarations: Hoisted completely, both declaration and definition.
2. Variable Declarations:
   • var: Hoisted but uninitialized (undefined).
   • let and const: Hoisted but remain in the temporal dead zone until declared.
3. Function Expressions: Only the variable name is hoisted (as undefined), not the function itself.

Understanding hoisting is crucial because it helps you avoid common pitfalls that might lead to unexpected behavior in your JavaScript code. With this knowledge, you can write cleaner and more efficient code, sidestepping some of the confusion that comes with variable and function declarations.