REFERENCEjavascript

javascript Documentation

📖 INDEX

# what-is-javascript

# function-declaration

# function-expressions

# anonymous-functions

# arrow-functions

# return

# recursive-functions

# arguments-parameters

# array-destructuring

# what-is-dom

# element-selection

# selection-methods

# elements-manipulation

# events

# event-listeners

# modification-methods

LOADING ENGINE...

let & const (ES6)

AI & DATA SCIENCE // let-const

let and const are block-scoped alternatives to var. const is for bindings that don't change; let is for reassignable values.

Syntax

let counter = 0;
counter += 1; // OK

const MAX = 100;
// MAX = 200; // TypeError

Deep Dive Course

ES6 introduced **let** and **const** to fix `var`'s problems: function-scoping, hoisting, and no block-scoping. Both are **block-scoped** and have a **Temporal Dead Zone** (TDZ). `const` prevents reassignment but not mutation of objects. Always prefer const, use let when needed, avoid var.

1Understanding let & const (ES6)

ES6 introduced let and const to fix var's problems: function-scoping, hoisting, and no block-scoping. Both are block-scoped and have a Temporal Dead Zone (TDZ). const prevents reassignment but not mutation of objects. Always prefer const, use let when needed, avoid var.

💡

The rule of thumb: use const by default. Only switch to let when you know you need to reassign.

editor.html

// Block scoping prevents leaking
{
  let blockLet = 'inside';
  const blockConst = 'also inside';
  console.log(blockLet);   // inside
}
// console.log(blockLet); // ReferenceError!

// var leaks
{
  var leaked = 'I escape blocks!';
}
console.log(leaked); // 'I escape blocks!'

localhost:3000

2Practical Example

Here is a real-world application of let & const (ES6) showing how it is used in production JavaScript code.

editor.html

// TDZ: Temporal Dead Zone
try {
  console.log(myLet); // ReferenceError - in TDZ!
} catch(e) {
  console.log(e.message);
}
let myLet = 'now defined';

localhost:3000

3Best Practices

Follow these guidelines when working with let & const (ES6):

1. Default to const, use let only for reassignment

2. Never use var in modern code

3. Understand the TDZ to avoid ReferenceErrors

⚠️

Tip: The rule of thumb: use const by default. Only switch to let when you know you need to reassign.

editor.html

// Block scoping prevents leaking
{
  let blockLet = 'inside';
  const blockConst = 'also inside';
  console.log(blockLet);   // inside
}
// console.log(blockLet); // ReferenceError!

// var leaks
{
  var leaked = 'I escape blocks!';
}
console.log(leaked); // 'I escape blocks!'

localhost:3000

Examples

Example 01Basic Usage

// Block scoping prevents leaking
{
  let blockLet = 'inside';
  const blockConst = 'also inside';
  console.log(blockLet);   // inside
}
// console.log(blockLet); // ReferenceError!

// var leaks
{
  var leaked = 'I escape blocks!';
}
console.log(leaked); // 'I escape blocks!'

Example 02Advanced Example

// TDZ: Temporal Dead Zone
try {
  console.log(myLet); // ReferenceError - in TDZ!
} catch(e) {
  console.log(e.message);
}
let myLet = 'now defined';

Best Practices

Default to const, use let only for reassignment
Never use var in modern code
Understand the TDZ to avoid ReferenceErrors

Interview Question

What is the Temporal Dead Zone?▼

Hint: The gap between scope start and declaration.

Variables declared with let/const exist in the TDZ from the start of their block until the declaration is evaluated. Accessing a variable in its TDZ throws ReferenceError. This is different from var, which is hoisted and initialized to undefined. The TDZ helps catch bugs from using variables before they're properly set up.

Exercises

MediumPractice using let & const (ES6) in a real scenario.

View Solution

// Block scoping prevents leaking
{
  let blockLet = 'inside';
  const blockConst = 'also inside';
  console.log(blockLet);   // inside
}
// console.log(blockLet); // ReferenceError!

// var leaks
{
  var leaked = 'I escape blocks!';
}
console.log(leaked); // 'I escape blocks!'

Frequently Asked Questions

What is the Temporal Dead Zone?▼

Related Functions

VariablesConstantsHoistingScope-Context