JavaScript ES6 Variables: let, const, and Block Scope

JavaScript ES6 introduced let and const to improve how variables are declared and managed. Before ES6, developers commonly used the var keyword to create variables. However, var can sometimes cause unexpected behavior because it is function-scoped rather than block-scoped.

With ES6, developers gained better control over variable scope and reassignment. Understanding let, const, and block scope is essential for writing clean, predictable JavaScript code.

In this tutorial, you will learn how to use let and const, understand block scope, and compare them with var through practical examples.

What Is let in JavaScript?

The let keyword declares a variable whose value can be changed later. It was introduced in ES6 and is commonly used when a variable needs reassignment.

Example of let

let age = 20;

console.log(age);

age = 25;

console.log(age);

Output:

20
25

In this example, the variable age is initially assigned the value 20. Later, its value changes to 25.

You can declare a variable with let without assigning an initial value.

let score;

score = 100;

console.log(score);

Output:

However, you cannot declare the same let variable twice in the same scope.

let name = "Alex";

// SyntaxError: Identifier 'name' has already been declared
let name = "Sarah";

To change the value, use assignment instead of declaring the variable again.

let name = "Alex";

name = "Sarah";

console.log(name);

Output:

Sarah

What Is const in JavaScript?

The const keyword declares a variable whose binding cannot be reassigned after initialization. It is useful when a variable should continue referring to the same value or object.

A const declaration must include an initial value.

Example of const

const country = "India";

console.log(country);

Output:

India

If you try to reassign a const variable, JavaScript throws a TypeError.

const country = "India";

country = "USA";

This produces an error because a variable declared with const cannot be reassigned.

Can You Change an Object Declared with const?

Yes. The const keyword prevents reassignment of the variable binding, but it does not make an object or array immutable.

const student = {
    name: "Alex",
    age: 21
};

student.age = 22;

console.log(student.age);

Output:

The property age can change because the object itself has not been reassigned.

However, assigning an entirely new object to student is not allowed.

const student = {
    name: "Alex"
};

// TypeError: Assignment to constant variable
student = {
    name: "Sarah"
};

The same rule applies to arrays declared with const.

const numbers = [10, 20, 30];

numbers.push(40);

console.log(numbers);

Output:

[10, 20, 30, 40]

The array’s contents can change, but the variable numbers cannot be reassigned to another array.

What Is Block Scope in JavaScript?

Block scope means that a variable is accessible only within the block in which it is declared.

A block is a section of code enclosed in curly braces {}. Blocks commonly appear in if statements, loops, and standalone code blocks.

Variables declared with let and const are block-scoped.

Example of Block Scope

{
    let message = "Hello JavaScript";

    console.log(message);
}

Output:

Hello JavaScript

The variable message can be accessed inside the block where it was declared.

If you try to access it outside that block, JavaScript throws a ReferenceError.

{
    let message = "Hello JavaScript";
}

console.log(message);

The error occurs because message exists only inside the block.

Block Scope with if Statements

if (true) {
    let age = 25;
    const city = "Hyderabad";

    console.log(age);
    console.log(city);
}

Output:

25
Hyderabad

Both variables are accessible inside the if block.

They cannot be accessed outside it:

if (true) {
    let age = 25;
}

console.log(age);

This produces a ReferenceError because age is block-scoped.

Block Scope with Loops

Block scope is particularly useful when working with loops.

for (let i = 1; i <= 3; i++) {
    console.log(i);
}

Output:

1
2
3

The variable i is limited to the loop’s scope. You cannot access it after the loop finishes.

for (let i = 1; i <= 3; i++) {
    console.log(i);
}

console.log(i);

The final statement causes a ReferenceError because i is not accessible outside the loop.

Difference Between let and const

Both let and const are block-scoped, but they differ in how their variable bindings can be reassigned.

Feature	let	const
Reassignment	Allowed	Not allowed
Initial value required	No	Yes
Block-scoped	Yes	Yes
Redeclaration in the same scope	Not allowed	Not allowed
Can hold an object or array	Yes	Yes
Object or array contents can change	Yes	Yes

Use let when you need to reassign a variable. Use const when you do not need to reassign its binding.

Difference Between var, let, and const

JavaScript supports three commonly used variable declaration keywords: var, let, and const.

Feature	var	let	const
Scope	Function scope	Block scope	Block scope
Reassignment	Allowed	Allowed	Not allowed
Redeclaration in the same scope	Allowed	Not allowed	Not allowed
Must be initialized during declaration	No	No	Yes
Available before declaration through hoisting	Yes, initialized to `undefined`	No, due to the temporal dead zone	No, due to the temporal dead zone

Example: var vs let

The following example shows how var behaves differently from let inside a block.

{
    var firstName = "Alex";
    let lastName = "Smith";
}

console.log(firstName);

Output:

Alex

The variable firstName is accessible outside the block because var is not block-scoped.

The variable lastName cannot be accessed outside the block because it was declared with let.

Example: var in a Loop

for (var i = 1; i <= 3; i++) {
    console.log(i);
}

console.log(i);

Output:

The variable i remains accessible after the loop because var is function-scoped or global-scoped, depending on where it is declared.

Using let prevents this behavior:

for (let i = 1; i <= 3; i++) {
    console.log(i);
}

Here, i is limited to the loop.

What Is the Temporal Dead Zone?

The temporal dead zone (TDZ) is the period between entering a scope and the point where a let or const declaration is initialized. During this period, accessing the variable causes a ReferenceError.

For example:

console.log(age);

let age = 20;

This code throws a ReferenceError because age is accessed before its declaration is initialized.

The same rule applies to const.

console.log(country);

const country = "India";

The variable exists in the scope during the temporal dead zone, but it cannot be accessed until initialization.

This behavior helps prevent certain errors caused by using variables before they are ready.

Best Practices for Using ES6 Variables

Follow these practices when declaring variables in modern JavaScript:

Use const by default when you do not need to reassign the variable.
Use let when a variable’s binding needs to change.
Avoid using var in new code unless there is a specific reason to use its scoping behavior.
Declare variables before using them.
Keep variables within the smallest appropriate scope.
Remember that const does not make objects or arrays immutable.

These practices help make your code easier to understand, debug, and maintain.

Frequently Asked Questions

What is let in JavaScript?

let declares a block-scoped variable that can be reassigned but cannot be redeclared in the same scope.

What is const in JavaScript?

const declares a block-scoped variable binding that must be initialized and cannot be reassigned.

What is block scope?

Block scope means a variable declared with let or const is accessible only inside the block where it is declared.

Can I change a const array in JavaScript?

Yes. You can change the contents of a const array using operations such as push(), but you cannot reassign the variable to a different array.

Why is let preferred over var?

let is block-scoped, which helps prevent unexpected variable access outside loops and conditional blocks.

Can I use let and const in modern JavaScript?

Yes. Both are widely used in modern JavaScript and are supported by current browsers and JavaScript runtimes.

What to Learn Next

Continue learning modern JavaScript concepts with these topics: