JavaScript let Explained: Differences Between let, var, and const (Beginner to Intermediate Guide)

By 佐川 直弘 | Naohiro Sagawa (運営者)

※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　

1. Introduction

Variable declaration in JavaScript is one of the most fundamental concepts in programming. In recent years, three different declaration keywords—var, let, and const—have come into common use, making it important to choose the appropriate one for each situation.

In this article, we focus on the keyword “javascript let” and clearly explain the characteristics and usage of let, as well as its differences from var and const. The content is designed for beginners to intermediate developers, covering everything from basic concepts to practical usage.

Our goal is to help readers accurately understand when and why to use let, enabling them to write safe, efficient, and maintainable JavaScript code.

2. Overview of JavaScript Variable Declaration Methods

In JavaScript, variables are used to temporarily store data. There are three main keywords available for declaring variables:

• var: The traditional variable declaration method used in older JavaScript
• let: A block-scoped variable declaration introduced in ES6 (ECMAScript 2015)
• const: A constant declaration keyword, also introduced in ES6

Each of these keywords has different characteristics, so it is important to choose the appropriate one depending on the purpose and context.

The table below summarizes their basic features:

As shown in this table, let is widely used as a flexible variable declaration that supports block scope and allows reassignment, making it suitable for many modern JavaScript scenarios.

3. let What Is It? — Basic Usage

let is a newer variable declaration keyword introduced in ES6. It mainly has the following characteristics.

1. It has block scope
2. It allows reassignment
3. Its hoisting behavior differs from var

3.1 Basic Syntax of let

The following code shows the basic way to declare a variable using let.

let x = 10;  // Declare variable x and assign the value 10
x = 20;      // Reassignment is allowed
console.log(x); // Output: 20

As you can see from this example, let allows you to change the value after declaration. This is different from const, and makes let suitable for flexible data management.

3.2 Characteristics of Block Scope

Because let has block scope, it is only valid within the block where it is declared.

{
  let y = 30;  // Declared inside the block
  console.log(y); // Output: 30
}
console.log(y); // Error: y is not defined

In this way, the variable y cannot be referenced outside the block, resulting in an error. This helps prevent unintended global pollution and enables safer variable management.

3.3 Hoisting Behavior

let is hoisted, but attempting to access it before declaration results in an error.

console.log(z); // Error: Cannot access 'z' before initialization
let z = 50;

This behavior contrasts with var, which is initialized as undefined during hoisting. To avoid errors, always use let only after it has been declared.

4. Differences Between var and let

In JavaScript, you can declare variables using var or let, but there are several important differences between them. In this section, we focus on scope, redeclaration, and hoisting behavior, and explain the differences in detail with concrete examples.

4.1 Scope Differences

One key difference is that var has function scope, while let has block scope.

Example of Function Scope (var)

function exampleVar() {
  if (true) {
    var a = 10; // Variable declared inside the function
  }
  console.log(a); // Output: 10
}

exampleVar();

Example of Block Scope (let)

function exampleLet() {
  if (true) {
    let b = 20; // Valid only within the block
  }
  console.log(b); // Error: b is not defined
}

exampleLet();

Because of this difference, let is better suited to preventing unintended variable redefinition or overwriting.

4.2 Whether Redeclaration Is Allowed

var can be redeclared within the same scope, but let does not allow redeclaration.

Redeclaration Example with var

var x = 10;
var x = 20; // Redeclaration is allowed without issues
console.log(x); // Output: 20

Redeclaration Example with let

let y = 10;
let y = 20; // Error: Identifier 'y' has already been declared
console.log(y);

With this characteristic, let helps prevent mistakes where the same variable is accidentally declared more than once.

4.3 Hoisting Differences

Hoisting is a JavaScript mechanism where variable and function declarations are moved to the top of their scope.

Hoisting Example with var

console.log(z); // Output: undefined
var z = 30;

Hoisting Example with let

console.log(w); // Error: Cannot access 'w' before initialization
let w = 40;

4.4 Summary of Usage

var is used for older code or when backward compatibility is required, whereas let is used in modern code to achieve safer scope management.

Comparison Table

5. Differences Between const and let

In JavaScript, const is another commonly used variable declaration method alongside let. In this section, we take a closer look at the differences between let and const and explain how to use each appropriately.

5.1 What Is const?

const is a keyword used to declare variables that cannot be reassigned.

Basic Syntax

const pi = 3.14; // Declare a constant
pi = 3.14159;    // Error: Assignment to constant variable.

In this example, the value of pi cannot be changed after declaration, and attempting to reassign it results in an error.

5.2 Differences Between let and const

5.3 Reassignment and Redeclaration Comparison

Reassignment Example with let

let count = 1;  // Initialization
count = 2;      // Reassignment is allowed
console.log(count); // Output: 2

Reassignment Example with const

const maxCount = 10;
maxCount = 20; // Error: Assignment to constant variable.

As shown above, let is suitable for handling changing values, while const is best for fixed values.

5.4 Important Notes for Objects and Arrays

Although const prevents reassignment, the properties of objects and elements of arrays can still be modified.

Object Example

const user = { name: "Taro" };
user.name = "Jiro"; // Modifying properties is allowed
console.log(user.name); // Output: "Jiro"

user = { name: "Saburo" }; // Error: Reassignment is not allowed

Array Example

const numbers = [1, 2, 3];
numbers.push(4); // Adding elements is allowed
console.log(numbers); // Output: [1, 2, 3, 4]

numbers = [5, 6, 7]; // Error: Reassignment is not allowed

5.5 Practical Usage Examples

Cases where const should be used:

1. Constants or values that never change

const TAX_RATE = 0.1;

2. When fixing references to objects or arrays

const CONFIG = {
  apiUrl: "https://example.com/api",
};

Cases where let should be used:

1. When values need to change dynamically

let count = 0;
count++;

2. Variables incremented within loops

for (let i = 0; i < 10; i++) {
  console.log(i);
}

6. When to Use let and Key Considerations

JavaScript provides three variable declaration options: var, let, and const. Among them, let plays a particularly useful role in specific situations.

In this section, we explain when you should use let and the key points to keep in mind.

6.1 Recommended Use Cases for let

1. When block scope is required Because let has block scope, it allows safe variable management within conditional statements and loops. Example: Managing variables inside a conditional block

if (true) {
  let message = "Hello, World!";
  console.log(message); // Output: Hello, World!
}
console.log(message); // Error: message is not defined

2. When values need to be updated dynamically const does not allow reassignment, but let is suitable for scenarios where values change dynamically. Example: Variable management inside a loop

let total = 0;
for (let i = 1; i <= 5; i++) {
  total += i;
}
console.log(total); // Output: 15

3. When storing temporary values For variables used only briefly within a function, let improves code readability and maintainability. Example: Local variables inside a function

function calculateDiscount(price) {
  let discount = 0.1; // Temporary discount rate
  return price * (1 - discount);
}
console.log(calculateDiscount(1000)); // Output: 900

6.2 Points to Note When Using let

1. Be careful with variable initialization Accessing a let variable before it is declared results in an error. Example: Access before initialization

console.log(a); // Error: Cannot access 'a' before initialization
let a = 10;

2. Understand hoisting behavior Although let is hoisted, it cannot be accessed within the “Temporal Dead Zone (TDZ).” Example: TDZ behavior

if (true) {
  console.log(b); // Error: Cannot access 'b' before initialization
  let b = 20;
}

3. Be aware of scope boundaries You cannot redeclare a variable with the same name within the same block. Example: Redeclaration error

let c = 10;
let c = 20; // Error: Identifier 'c' has already been declared

4. Use let to avoid global pollution Using var increases the risk of affecting the global scope, whereas let helps reduce that risk. Example: Avoiding conflicts between global and local variables

let d = 50; // Global variable
function test() {
  let d = 30; // Local variable
  console.log(d); // Output: 30
}
test();
console.log(d); // Output: 50

7. FAQ Section (Frequently Asked Questions)

In this section, we summarize common questions and answers related to JavaScript let. Practical concerns and solutions to common issues are explained with concrete examples.

Q1: Why should I use let?

A:
let is recommended for the following reasons.

1. Block scope: Because let restricts variable scope to a block, it prevents unintended overwriting of variables.
2. Prevention of redeclaration: Redeclaration within the same scope is not allowed, reducing the risk of bugs.
3. Safety with hoisting: let throws an error inside the Temporal Dead Zone (TDZ), making it easier to detect mistakes where variables are accessed before declaration.

Q2: What problems occur when using var?

A:
Although var maintains compatibility with older code, it has the following issues.

1. Scope is too broad: Because it only has function scope, variables declared inside blocks may unintentionally be accessible outside.

if (true) {
  var x = 10;
}
console.log(x); // Output: 10

2. Redeclaration is allowed: This can result in accidental overwriting of variables.

var y = 20;
var y = 30; // Overwriting occurs

3. Hoisting behavior: Variables declared with var are initialized as undefined, allowing access before initialization.

console.log(z); // Output: undefined
var z = 50;

Q3: How should I choose between let and const?

A:
The basic rule is as follows.

• const: Use when the value should not change or when treating it as a constant.
• let: Use when the value may change or needs to be updated dynamically.

Example:

const TAX_RATE = 0.1;
let price = 1000;
price = price * (1 + TAX_RATE); // Price calculation

Choosing the appropriate keyword based on the nature of the data makes your code more expressive and easier to understand.

Q4: What causes the ReferenceError when accessing let before initialization?

A:
Variables declared with let are hoisted, but they cannot be accessed within the “Temporal Dead Zone (TDZ).”

Example:

console.log(a); // Error: Cannot access 'a' before initialization
let a = 10;

Solution:
Declare and initialize variables together, and pay close attention to code order.

8. Conclusion

In this article, we thoroughly explained let in JavaScript variable declarations. We covered basic usage, differences from var and const, practical examples, and answers to frequently asked questions.

Below is a concise summary of the key points discussed.

8.1 Key Characteristics of let

1. Has block scope:

• let is only valid within a block ({}).
• This prevents unintended variable overwriting.

1. Allows reassignment:

• Suitable for loops and conditional logic where values change dynamically.

1. Does not allow redeclaration:

• Improves code safety by preventing duplicate declarations.

1. Hoisting behavior:

• Declarations are hoisted, but accessing variables before initialization causes an error due to the TDZ.

8.2 Comparison with Other Declaration Methods

8.3 Where let Is Most Useful

let is especially effective in the following scenarios.

• Conditional statements and loops: Used when values change dynamically.

for (let i = 0; i < 5; i++) {
  console.log(i);
}

• Local variables inside functions: Ideal for storing temporary values.

function calculateTotal(price) {
  let discount = 0.1;
  return price * (1 - discount);
}

• Dynamic state management: Useful when values change based on user input or application state.

let userInput = prompt("Please enter your name:");
console.log(`Hello, ${userInput}!`);

8.4 Best Practices and Precautions

1. Avoid accessing variables before declaration: Declare variables early to prevent hoisting-related errors.
2. Prefer const, and use let only when reassignment is necessary: This improves code clarity and safety.
3. Be mindful of scope management: Always consider variable scope to avoid unintended access or conflicts.

8.5 Final Summary

let is a flexible and safe choice for variable declaration in modern JavaScript programming.

• Use var only for legacy code; prefer let or const in new projects.
• Use let for changing values and const for fixed values to improve readability and reliability.

8.6 Next Steps

Apply what you have learned by experimenting with real code. You may also find the following topics helpful as next learning steps.

1. JavaScript data types and type conversion – Deepen your understanding of data management.
2. Functions and scope in depth – Master advanced scope control and function design.
3. Overview of ES6 and later features – Explore modern JavaScript capabilities.