JS Let

JavaScript let Keyword: Declaring Block-Scoped Variables

The let declaration in JavaScript is used to declare re-assignable, block-scoped local variables, optionally initializing them to a value.

Understanding the let keyword is essential for modern JavaScript development. It was introduced in ES6 (ES2015) to solve many of the scoping issues associated with the older var keyword.

Use let when you want to declare a variable that is expected to change (be re-assigned) later in your code.

Basic Syntax

// Declare a variable without assigning a value (defaults to undefined)
let name1;

// Declare and initialize a variable
let name2 = "John";
// Declare multiple variables at once
let x = 1, y = 2, z = 3;
console.log(name2); // Outputs: John
console.log(x + y + z); // Outputs: 6

let is block-scoped, which means it belongs to the block (any code inside {...}) where it is declared. This is a key feature that distinguishes it from var.

let x = 1;

if (x === 1) {
  // This 'x' is completely separate from the outer 'x'
  let x = 2; 
  console.log("Inside block:", x); // Expected output: 2
}
console.log("Outside block:", x); // Expected output: 1

Key Features of let

1. Temporal Dead Zone (TDZ)

A variable declared with let is in a "temporal dead zone" (TDZ) from the start of the block until the declaration is reached. Accessing it before declaration results in a ReferenceError.

{
  // TDZ starts here
  // console.log(foo); // ReferenceError: Cannot access 'foo' before initialization
  
  let foo = 2; // End of TDZ for 'foo'
  console.log(foo); // Outputs: 2
}

2. Redeclarations are Forbidden

Unlike var, you cannot redeclare the same variable with let in the same scope. This prevents common bugs.

let x = 1;

// let x = 2; // SyntaxError: Identifier 'x' has already been declared