Difference Between Let vs Const in TypeScript

When declaring variables in TypeScript, you have three variables: let, const, and var. Understanding these variables is crucial for writing clean, maintainable, and error-free TypeScript code.

In this tutorial, we’ll focus on the difference between let vs const in TypeScript, and when to use each one.

Understand the let Variable in TypeScript

The let the keyword is used to declare variables that can be reassigned later in the code. It is block-scoped, meaning that a variable declared with let is only accessible within the nearest enclosing block, such as an if statement or a for loop.

Here’s an example:

let count = 0;
if (true) {
  let count = 1;
  console.log(count); // Output: 1
}
console.log(count); // Output: 0

In this example, we declare a variable count with an initial value of 0. Inside the if block, we declare another variable with the same name and assign it a value of 1. The console.log inside the block outputs 1, while the console.log outside the block outputs 0. This demonstrates the block-scoping behavior of let.

Understand the const Variable in TypeScript

The const keyword is used to declare variables that cannot be reassigned after their initial assignment. Like let, const is also block-scoped. Once a const variable is assigned a value, it cannot be changed throughout the program’s execution.

Here’s an example:

const PI = 3.14159;
PI = 3.14; // Error: Cannot assign to 'PI' because it is a constant.

In this example, we declare a constant variable PI with a value of 3.14159. Any attempt to reassign the value of PI will result in a compile-time error.

It’s important to note that const does not make the variable immutable. If the variable is an object or an array, its properties or elements can still be modified.

const person = { name: 'John', age: 30 };
person.age = 31; // This is allowed
person = { name: 'Jane', age: 25 }; // Error: Cannot assign to 'person' because it is a constant.

Here is the output of the above TypeScript code, where we tried to assign a value to a const variable.

When to Use let and const

As a general rule, you should always use const as your default choice and only use let when you need to be able to change the value of a variable (which should be almost never). This helps prevent accidental reassignments and makes your code more predictable and easier to reason about.

Use let when:

• The variable needs to be reassigned later in the code.
• The variable is used in a loop, and its value needs to be updated in each iteration.

Use const when:

• The variable does not need to be reassigned.
• The variable holds a value that should remain constant throughout the program’s execution.

Here’s an example that demonstrates the use of both let and const:

const API_URL = 'https://jsonplaceholder.typicode.com/users'; // Real, public test API

let userData = null;

fetch(API_URL)
  .then(response => response.json())
  .then(data => {
    userData = data;
    console.log(userData);
  })
  .catch(error => console.error('Fetch error:', error));

In this example, we use const to declare the API_URL variable because it remains constant throughout the program. We use let to declare the userData variable because its value is initially set to null and then reassigned when the API response is received.

Summary

Conclusion

Understanding the differences between let and const in TypeScript is essential for writing clean, maintainable, and error-free code. As a rule of thumb, always use const unless you specifically need to reassign the variable’s value later in the code. This practice will help you avoid accidental reassignments and make your code more predictable and easier to understand.

By following the guidelines outlined in this tutorial, you’ll be able to effectively use let and const in your TypeScript projects, leading to more robust and maintainable code.

You may like to read:

• How to Use for…of Loops in TypeScript?
• TypeScript forEach Loop with Index
• How to Break Out of a forEach Loop in TypeScript?
• How to Break Out of Loops in TypeScript?

Bijay Kumar

I am Bijay Kumar, a Microsoft MVP in SharePoint. Apart from SharePoint, I started working on Python, Machine learning, and artificial intelligence for the last 5 years. During this time I got expertise in various Python libraries also like Tkinter, Pandas, NumPy, Turtle, Django, Matplotlib, Tensorflow, Scipy, Scikit-Learn, etc… for various clients in the United States, Canada, the United Kingdom, Australia, New Zealand, etc. Check out my profile.

enjoysharepoint.com/