Topic 8324 min readStructured Tutorial

Understanding let and const in ES6

Quick Answer

In ES6, let and const are new ways to declare variables. let allows block-scoped variables that can be reassigned, while const declares block-scoped constants that cannot be reassigned. They help avoid issues with var's function-scoping and hoisting, making code more predictable and easier to maintain.

Learning Objectives

Explain the purpose of let and const in a practical learning context.
Identify the main ideas, terms, and decisions involved in let and const.
Apply let and const in a simple real-world scenario or practice task.

Introduction to let and const

ES6 introduced let and const as new ways to declare variables in JavaScript.

These keywords improve variable scoping and assignment rules compared to the older var keyword.

Use let and const to write clearer and safer JavaScript code.

Why let and const?

Before ES6, JavaScript only had var for variable declarations, which is function-scoped and can lead to unexpected behaviors.

let and const introduce block scoping, meaning variables exist only within the nearest enclosing block, such as inside loops or conditionals.

var is function-scoped, let and const are block-scoped.
var declarations are hoisted and initialized with undefined, let and const are hoisted but not initialized.
const variables must be assigned at declaration and cannot be reassigned.

Using let

let declares variables that can be reassigned and are limited to the block scope.

It helps avoid bugs caused by var's function scoping and hoisting.

Variables declared with let are not accessible before their declaration (temporal dead zone).
let allows reassignment but not redeclaration in the same scope.

Example of let

Here is an example demonstrating block scope with let.

Using const

const declares variables that cannot be reassigned after their initial assignment.

It is useful for defining constants or values that should not change.

const variables must be initialized at declaration.
const does not make objects immutable, only the binding cannot be changed.

Example of const

This example shows how const works with primitive values and objects.

Differences between var, let, and const

Understanding the differences helps choose the right declaration for your variables.

Comparison of var, let, and const
Feature	var	let	const
Scope	Function-scoped	Block-scoped	Block-scoped
Hoisting	Yes, initialized with undefined	Yes, not initialized (TDZ)	Yes, not initialized (TDZ)
Reassignment	Allowed	Allowed	Not allowed
Redeclaration	Allowed in same scope	Not allowed in same scope	Not allowed in same scope
Initialization	Optional	Optional	Required

Practical Example

The variable 'message' declared with let is only accessible inside the if block.

const prevents reassignment of the variable binding but does not make objects immutable.

Examples

let Block Scope Example

if (true) {
  let message = 'Hello inside block';
  console.log(message); // Output: Hello inside block
}
// console.log(message); // Error: message is not defined

The variable 'message' declared with let is only accessible inside the if block.

const with Primitive and Object Example

const PI = 3.14;
// PI = 3.1415; // Error: Assignment to constant variable.

const user = { name: 'Alice' };
user.name = 'Bob'; // Allowed, object properties can be changed
console.log(user.name); // Output: Bob

const prevents reassignment of the variable binding but does not make objects immutable.

Best Practices

Use const by default for all variables unless you know they need to be reassigned.
Use let only when you need to reassign a variable.
Avoid using var to prevent scope-related bugs.
Declare variables as close as possible to where they are used.

Common Mistakes

Trying to reassign a const variable.
Assuming const makes objects immutable.
Using var and encountering unexpected scope issues.
Accessing let or const variables before declaration causing ReferenceError.

Hands-on Exercise

Block Scope Practice

Write a function that declares a variable with let inside a loop and logs its value. Observe the scope behavior.

Expected output: Logs numbers from 0 to 4, each scoped to the loop iteration.

Hint: Use a for loop and declare the loop counter with let.

Const Reassignment Test

Try to reassign a const variable and observe the error.

Expected output: Throws a TypeError indicating assignment to constant variable.

Hint: Declare a const variable and assign a new value to it later.

Interview Questions

What is the difference between let and var in JavaScript?

Interview

let is block-scoped and not initialized until its declaration (temporal dead zone), whereas var is function-scoped and hoisted with initialization to undefined.

Can you reassign a variable declared with const?

Interview

No, const variables cannot be reassigned after their initial assignment, but if the variable holds an object, the object's properties can still be changed.

What is let and const, and why is it useful?

Beginner

In ES6, let and const are new ways to declare variables.