JavaScript var, let and const Explained — Scope, Hoisting and When to Use Each

// --- Creating variables with let (the modern default choice) ---

// Declare a variable and assign a value to it in one line
let playerName = "Alex";

// Declare a variable now, assign a value later
let playerScore;
playerScore = 0; // we set it here when we're ready

// Read the value by using the variable name
console.log(playerName);   // prints: Alex
console.log(playerScore);  // prints: 0

// --- Update the value stored inside the variable ---
playerScore = 150; // Alex just scored 150 points
console.log(playerScore);  // prints: 150

// --- JavaScript can store many types of value ---
let gameTitle   = "Space Quest";   // text (called a 'string')
let numberOfLives = 3;             // a number
let isGameOver  = false;           // true or false (called a 'boolean')

console.log(gameTitle, numberOfLives, isGameOver);
// prints: Space Quest 3 false

// ============================================================
// PART 1 — const: for values that should never change
// ============================================================

const maxLivesAllowed = 3; // this rule never changes in our game
console.log(maxLivesAllowed); // prints: 3

// Trying to change a const causes an error:
// maxLivesAllowed = 5; // TypeError: Assignment to constant variable.


// ============================================================
// PART 2 — let: for values that will change over time
// ============================================================

let currentLives = 3;      // starts at 3
console.log(currentLives); // prints: 3

currentLives = currentLives - 1; // player lost a life
console.log(currentLives);       // prints: 2


// ============================================================
// PART 3 — Block scope with let and const
// The {} curly braces create a 'block'
// Variables declared inside cannot be seen outside
// ============================================================

let roundNumber = 1;

if (roundNumber === 1) {
  let roundMessage = "Welcome to Round 1!"; // only lives inside this block
  console.log(roundMessage); // prints: Welcome to Round 1!
}

// console.log(roundMessage); // ReferenceError: roundMessage is not defined
// It no longer exists out here — the block ended


// ============================================================
// PART 4 — var ignores block boundaries (this is the problem)
// ============================================================

if (true) {
  var leakyVariable = "I escaped the block!"; // var ignores {} scope
}

console.log(leakyVariable); // prints: I escaped the block!
// ^ This is unexpected behaviour — var 'leaked' out of the if block
// This is why modern JavaScript uses let and const instead

// ============================================================
// PART 1 — var hoisting: silent and confusing
// ============================================================

console.log(welcomeMessage); // prints: undefined  (NOT an error!)
// ^ JavaScript hoisted the *declaration* of welcomeMessage to the top
// but the *value* "Hello!" hasn't been assigned yet at this point

var welcomeMessage = "Hello!";

console.log(welcomeMessage); // prints: Hello!

// What JavaScript actually sees (after hoisting) is:
// var welcomeMessage;           <-- moved to top automatically
// console.log(welcomeMessage);  <-- undefined, not assigned yet
// welcomeMessage = "Hello!";    <-- value assigned here
// console.log(welcomeMessage);  <-- Hello!


// ============================================================
// PART 2 — let hoisting: loud and helpful
// ============================================================

// Uncommenting the next line would cause:
// ReferenceError: Cannot access 'errorMessage' before initialization
// console.log(errorMessage);

let errorMessage = "Something went wrong";
console.log(errorMessage); // prints: Something went wrong
// let is in the Temporal Dead Zone before this line —
// any access before here throws an error immediately


// ============================================================
// PART 3 — A realistic hoisting bug with var
// ============================================================

function checkHighScore(newScore) {
  if (newScore > 100) {
    var congratsText = "New high score!";
  }
  // var leaks out of the if block — it's now undefined here, not missing
  console.log(congratsText); // prints: undefined  (silent bug!)
}

checkHighScore(50); // score is NOT > 100, so congratsText was never set
// But JavaScript doesn't throw an error — it just says undefined

// ============================================================
// PART 1 — const object: the binding is locked, not the contents
// ============================================================

const userProfile = {
  username: "alex_42",
  level: 5,
};

console.log(userProfile.username); // prints: alex_42

// You CAN change properties inside the object
userProfile.level = 6;             // user levelled up!
userProfile.badges = ["explorer"]; // add a new property

console.log(userProfile);
// prints: { username: 'alex_42', level: 6, badges: [ 'explorer' ] }

// You CANNOT reassign the variable to a new object:
// userProfile = { username: "someone_else" };
// TypeError: Assignment to constant variable.


// ============================================================
// PART 2 — const array: same rule applies
// ============================================================

const inventoryItems = ["sword", "shield"];

inventoryItems.push("potion"); // adding to the array is allowed
console.log(inventoryItems);  // prints: [ 'sword', 'shield', 'potion' ]

// inventoryItems = ["axe"]; // TypeError — can't swap the whole array


// ============================================================
// PART 3 — Object.freeze() if you truly want immutability
// ============================================================

const gameConfig = Object.freeze({
  maxPlayers: 4,
  startingLives: 3,
});

gameConfig.maxPlayers = 10; // silently fails in non-strict mode
console.log(gameConfig.maxPlayers); // still prints: 4
// Object.freeze() makes the contents truly read-only