let and const in TypeScript

The let keyword is used to declare a variable whose value can be changed later.

let age = 20;

age = 21;

console.log(age);

Here, the value of age changes from 20 to 21.

The basic syntax is:

let variableName = value;

Example:

let name = "Rahul";
let age = 22;

TypeScript allows you to specify the type of a variable explicitly.

let name: string = "Rahul";

let age: number = 22;

let isStudent: boolean = true;

The type annotation tells TypeScript what type of value the variable should contain.

A variable declared with let can be reassigned.

let city: string = "Patna";

city = "Aurangabad";

console.log(city);

The variable still has the type string.

If TypeScript infers that a let variable contains a string, you cannot later assign a number to it.

let name = "Rahul";

name = "Amit";

// This causes a TypeScript error
// name = 100;

The inferred type of name is string.

The const keyword is used to declare a variable that cannot be reassigned after it has been initialized.

const country = "India";

console.log(country);

The basic syntax is:

const variableName = value;

Example:

const pi = 3.14;

const name = "Rahul";

A const variable must receive a value when it is declared.

const age = 20;

This is not valid:

// Invalid
// const age;

You cannot declare a normal const variable without an initial value.

A const variable cannot be assigned another value.

const age = 20;

// Error
// age = 25;

Once initialized, the variable cannot be reassigned.

You can also specify the type of a const variable.

const name: string = "Amit";

const age: number = 25;

const isActive: boolean = true;

Use let when a value needs to change.

let score: number = 50;

score = 60;

score = 80;

console.log(score);

The final value is 80.

Use const when the variable should not be reassigned.

const collegeName: string = "ABC College";

console.log(collegeName);

The reference stored in collegeName cannot be reassigned.

Both let and const are block scoped. A block is commonly represented by curly braces { }.

{
    let message = "Hello";

    console.log(message);
}

The variable exists inside its block.

if (true) {

    let message: string = "Welcome";

    console.log(message);

}

// message cannot be accessed here

The let variable belongs to the if block.

if (true) {

    const message: string = "Hello";

    console.log(message);

}

// message cannot be accessed here

The same block-scoping rule applies to const.

let is commonly used as a loop variable.

for (let i = 1; i <= 5; i++) {

    console.log(i);

}

The variable i belongs to the loop block.

A const variable can also be created inside a loop.

const students: string[] = [
    "Amit",
    "Rahul",
    "Priya"
];

for (const student of students) {

    console.log(student);

}

Each iteration creates a block-scoped student binding.

A let array variable can be reassigned to another array of the same type.

let numbers: number[] = [10, 20, 30];

numbers = [40, 50, 60];

console.log(numbers);

A const array cannot be reassigned to another array. However, its elements can normally be changed.

const numbers: number[] = [10, 20, 30];

numbers[0] = 100;

console.log(numbers);

The array reference remains the same.

A const object cannot be reassigned to another object, but its properties can normally be changed.

const student = {
    name: "Rahul",
    age: 20
};

student.age = 21;

console.log(student);

In applications, let can be useful when a value changes during program execution.

let userName: string = "Amit";

userName = "Rahul";

console.log(userName);

This pattern is useful when application state or a value changes.

In React and React Native code, const is commonly used for values and functions that are not reassigned.

const userName: string = "Rahul";

const message = "Welcome " + userName;

console.log(message);

let can be useful for temporary values inside functions or calculations in React Native applications.

function calculateTotal(
    price: number,
    quantity: number
) {

    let total: number;

    total = price * quantity;

    return total;
}

When you do not need to reassign a variable, const is usually a clear choice.

const name: string = "Amit";

console.log(name);

There is no need to use let when the variable will never be reassigned.

Use let when you know that the variable needs to be reassigned.

let count: number = 0;

count = count + 1;

count = count + 1;

console.log(count);

Here, count changes during program execution.

Use const when the variable will not be reassigned.

const appName: string = "Student App";

const version: number = 1;

console.log(appName);
console.log(version);

const studentName: string = "Rahul";

let marks: number = 70;

marks = 85;

const passed: boolean = marks >= 40;

console.log("Name:", studentName);
console.log("Marks:", marks);
console.log("Passed:", passed);

Here, studentName and passed are not reassigned, while marks changes.

Mistake 1: Trying to reassign a const variable.

const age = 20;

// Error
// age = 25;

Mistake 2: Declaring const without initialization.

// Error
// const name;

Mistake 3: Assigning an incompatible type.

let age: number = 20;

// Error
// age = "twenty";