JavaScript Let

Understanding the let keyword for variable declaration

🔧 The let Keyword

The let keyword is used to declare variables in JavaScript. It was introduced in ES6 (2015) and provides block scope, making it safer than var. 


// Using let to declare variables
let name = "John";
let age = 25;
let isStudent = true;

console.log(name, age, isStudent);

Output:

John 25 true

Key Features of let

🔒

Block Scope

Variables exist only within their block 

if (true) {
  let x = 10;
}
// x is not accessible here
🔄

Reassignable

Values can be changed after declaration 

let count = 0;
count = 5; // OK
🚫

No Redeclaration

Cannot declare same variable twice 

let name = "John";
// let name = "Jane"; // Error!
⏰

Temporal Dead Zone

Cannot use before declaration 

// console.log(x); // Error!
let x = 10;

🔹 Block Scope with let

Variables declared with let have block scope - they only exist within the nearest enclosing block: 

// Global scope
let globalVar = "I'm global";

function myFunction() {
  let functionVar = "I'm in function";
  
  if (true) {
    let blockVar = "I'm in block";
    console.log(globalVar);   // ✓ Accessible
    console.log(functionVar); // ✓ Accessible  
    console.log(blockVar);    // ✓ Accessible
  }
  
  console.log(globalVar);   // ✓ Accessible
  console.log(functionVar); // ✓ Accessible
  // console.log(blockVar); // ✗ Error! Not accessible
}

myFunction();

Output:

I'm global
I'm in function
I'm in block
I'm global
I'm in function

🔹 let vs var Comparison

Here's how let differs from the older var keyword: 

// var has function scope
function varExample() {
  if (true) {
    var x = 1;
  }
  console.log(x); // 1 - accessible outside block
}

// let has block scope  
function letExample() {
  if (true) {
    let y = 1;
  }
  // console.log(y); // Error! Not accessible outside block
}

// var allows redeclaration
var name = "John";
var name = "Jane"; // OK with var

// let prevents redeclaration
let age = 25;
// let age = 30; // Error! Cannot redeclare

varExample();

Output:

1

🔹 Common let Usage Patterns

Here are typical ways to use let in your JavaScript code: 

// Loop counters
for (let i = 0; i < 3; i++) {
  console.log("Count:", i);
}
// i is not accessible here

// Conditional variables
let message;
if (new Date().getHours() < 12) {
  message = "Good morning!";
} else {
  message = "Good afternoon!";
}

// Reassigning values
let score = 0;
score += 10;  // Add points
score *= 2;   // Double the score

console.log("Final message:", message);
console.log("Final score:", score);

Output:

Count: 0
Count: 1
Count: 2
Final message: Good afternoon!
Final score: 20

🔹 Best Practices with let

Follow these guidelines when using let: 

// ✓ Good: Declare variables close to where they're used
function calculateTotal(items) {
  let total = 0;
  
  for (let i = 0; i < items.length; i++) {
    let item = items[i];
    total += item.price;
  }
  
  return total;
}

// ✓ Good: Use descriptive names
let userAge = 25;
let isLoggedIn = true;
let shoppingCart = [];

// ✓ Good: Initialize when possible
let count = 0;
let message = "Welcome";

console.log("User age:", userAge);
console.log("Logged in:", isLoggedIn);

Output:

User age: 25
Logged in: true

🧠 Test Your Knowledge

What type of scope does the let keyword provide?