var vs let vs const: JS Variable Declarations

function processOrder(orderTotal) {
  if (orderTotal > 100) {
    var discount = 0.15; // Declared inside if-block
    var message = "Premium discount applied!";
  }
 
  // Both variables are accessible here because var is function-scoped
  console.log(discount); // 0.15 (leaks out of the if-block)
  console.log(message);  // "Premium discount applied!"
}
 
processOrder(150);

// Classic var-in-loop problem
for (var i = 0; i < 5; i++) {
  // i is function-scoped, not loop-scoped
}
console.log(i); // 5 (i leaks out of the loop!)

function processOrder(orderTotal) {
  if (orderTotal > 100) {
    let discount = 0.15;             // Block-scoped
    const message = "Premium!";      // Block-scoped
    console.log(discount, message);  // Works: inside the block
  }
 
  // console.log(discount); // ReferenceError: discount is not defined
  // console.log(message);  // ReferenceError: message is not defined
  // Both variables are contained to the if-block
}

// let in loops: each iteration gets its own 'i'
for (let i = 0; i < 5; i++) {
  // i is scoped to this loop block
}
// console.log(i); // ReferenceError: i is not defined

console.log(greeting); // undefined (not an error!)
var greeting = "Hello";
console.log(greeting); // "Hello"
 
// JavaScript interprets this as:
// var greeting = undefined;   <-- hoisted and initialized
// console.log(greeting);      <-- undefined
// greeting = "Hello";         <-- assignment stays in place
// console.log(greeting);      <-- "Hello"

// console.log(name); // ReferenceError: Cannot access 'name' before initialization
let name = "Alice";   // TDZ ends here
console.log(name);    // "Alice"
 
 
// Same behavior with const:
// console.log(MAX); // ReferenceError: Cannot access 'MAX' before initialization
const MAX = 100;
console.log(MAX);  // 100

// Visualizing the Temporal Dead Zone
{
  // ---- TDZ for 'score' starts here ----
  // Any access to 'score' in this zone throws ReferenceError
 
  console.log("Setting up...");
  // console.log(score); // ReferenceError!
 
  let score = 95;
  // ---- TDZ for 'score' ends here ----
 
  console.log(score); // 95 (safe: past the declaration)
}

// var: reassignment allowed
var score = 10;
score = 20; // Fine
 
// let: reassignment allowed
let level = 1;
level = 2; // Fine
 
// const: reassignment NOT allowed
const name = "Alice";
// name = "Bob"; // TypeError: Assignment to constant variable

// var: redeclaration allowed (this causes real bugs)
var color = "red";
var color = "blue"; // No error! Silently overwrites
console.log(color); // "blue"
 
// let: redeclaration NOT allowed
let size = "large";
// let size = "small"; // SyntaxError: Identifier 'size' has already been declared
 
// const: redeclaration NOT allowed
const MAX = 100;
// const MAX = 200; // SyntaxError: Identifier 'MAX' has already been declared

// BUG: using var in a loop with setTimeout
for (var i = 0; i < 3; i++) {
  setTimeout(function() {
    console.log(`var: ${i}`);
  }, 100);
}
// Output: "var: 3", "var: 3", "var: 3"
// All three callbacks share the same 'i', which is 3 after the loop ends
 
// FIX: using let in a loop with setTimeout
for (let i = 0; i < 3; i++) {
  setTimeout(function() {
    console.log(`let: ${i}`);
  }, 100);
}
// Output: "let: 0", "let: 1", "let: 2"
// Each iteration gets its own copy of 'i'

// Real-world version of this bug: attaching click handlers
const buttons = document.querySelectorAll(".tab-button");
 
// BUG with var
for (var i = 0; i < buttons.length; i++) {
  buttons[i].addEventListener("click", function() {
    console.log(`Clicked tab ${i}`); // Always logs the last index
  });
}
 
// FIX with let
for (let i = 0; i < buttons.length; i++) {
  buttons[i].addEventListener("click", function() {
    console.log(`Clicked tab ${i}`); // Logs the correct index
  });
}

// const with primitives: effectively immutable
const pi = 3.14159;
// pi = 3.14; // TypeError: Assignment to constant variable
 
// const with objects: the reference is constant, contents are mutable
const user = { name: "Alice", age: 28 };
user.age = 29;              // Allowed: mutating a property
user.email = "a@test.com";  // Allowed: adding a property
delete user.email;           // Allowed: deleting a property
console.log(user);           // { name: "Alice", age: 29 }
 
// user = { name: "Bob" };   // TypeError: can't reassign the binding
 
// const with arrays: the reference is constant, elements are mutable  
const colors = ["red", "green", "blue"];
colors.push("yellow");       // Allowed: mutating the array
colors[0] = "crimson";       // Allowed: changing an element
console.log(colors);          // ["crimson", "green", "blue", "yellow"]
 
// colors = ["purple"];       // TypeError: can't reassign the binding

const config = Object.freeze({
  apiUrl: "https://api.example.com",
  timeout: 5000,
  retries: 3
});
 
config.timeout = 10000; // Silently fails (or throws in strict mode)
console.log(config.timeout); // 5000 (unchanged)

// var declarations at the global level attach to window
var globalVar = "I'm on window";
console.log(window.globalVar); // "I'm on window"
 
// let and const do NOT attach to window
let globalLet = "I'm NOT on window";
const globalConst = "I'm NOT on window either";
console.log(window.globalLet);   // undefined
console.log(window.globalConst); // undefined