Important Concepts Along with Interview Questions and Answers

<aside> 💡 This document covers understanding var, let, and const in JavaScript. It includes the concepts of variable shadowing, illegal shadowing, hoisting, and the temporal dead zone.

</aside>

Var, Let and Const

1. Variable Shadowing

Notes:

• In JavaScript, variable shadowing occurs when a variable with the same name as a variable in a higher scope is declared in a lower scope.
• It's a common practice but can lead to confusion if not used carefully because the inner variable will "shadow" the outer variable.
• In the example below, let a inside the if block shadows the outer let a, and they are two separate variables despite having the same name.

Example:

function test() {
  let a = "Hello"; // Outer variable

  if (true) {
    let a = "Hello World"; // Inner variable shadows the outer one
    console.log(a); // Prints "Hello World"
  }

  console.log(a); // Prints "Hello"
}

test();

Explanation:

• In the outer scope of the function test, a variable a is declared and assigned the value "Hello".
• Inside the if block, another variable a is declared with let, which is only accessible within the block. This shadows the outer a.
• The first console.log(a) inside the block prints "Hello World" because it refers to the inner a.
• The second console.log(a) outside the block prints "Hello" because it refers to the outer a.

2. Illegal Shadowing

Notes:

• This occurs when trying to shadow a variable using var within the same scope where that variable is already defined using let or const.
• In the example below, var b = "Bye"; is illegal shadowing because b is already declared using let in the same scope.