TypeScript - let & const

---

---

TypeScript has the same rules as JavaScript to declare variables. Initially, only the 'var' keyword was used to declare the variable, but in the ES6 version of JavaScript 'let' and 'const' keywords are introduced to declare a variable. So, you can also use them in TypeScript.

In this lesson, you will learn to declare a variable using the 'let' and 'const' keywords and how those variables are different from the variables declared using the 'var' keyword.

Declaring a variable using the let keyword

When we declare the variable using the 'let' keyword in TypeScript, the scoping rule and hoisting rule remain the same as in JavaScript.

Syntax

The syntax to declare a variable using the 'let' keyword in TypeScript is as follows

let var_name: var_type = value;

• In the above syntax, 'let' is a keyword.

• 'var_name' is a valid identifier for a variable name.

• 'var_type' is a type of the variable.

• 'value' is a value to store in the variable.

Example

In the code below, we have defined the 'car_name' variable of string type which contains the Brezza value. The 'car_price' variable contains the 1000000 number value.

// Define a variable in TypeScript
let car_name: string = "Brezza";
let car_price: number = 1000000;
console.log(car_name);
console.log(car_price);

On compiling, it will generate the following JavaScript code.

// Define a variable in TypeScript
let car_name = "Brezza";
let car_price = 1000000;
console.log(car_name);
console.log(car_price);

Output

The output of the above example code is as follows

Brezza
1000000

Variable Scope

The variables declared using the 'let' keyword have the block scope. It means you can't access the variable outside the block unlike the variable declared using the 'var' keyword.

Let's learn it via the example below.

In the code below, the 'bool' variable contains a true value so the code of the 'if' statement will always execute. In the 'if' block, we have declared the 'result' variable which can be accessed inside the 'if' block only. If you try to access it outside the 'if' block, the TypeScript compiler will throw an error.

let bool: boolean = true;
if (bool) {
    let result: number = 10;
    console.log(result); // It can have accessed only in this block
}
// console.log(result); Can't access variable outside of the block.

Let variables cannot be re-declared

You can't re-declare the variables that are declared using the 'let' keyword.

Let's look at the example below.

In the code below, you can observe that if we try to re-declare the same variable, the TypeScript compiler throws an error.

let animal: string = "cat";
// let animal: string = "dog"; 
// Error: Cannot redeclare block-scoped variable 'animal'
console.log(animal); // Output: cat

On compiling, it will generate the following JavaScript code.

let animal = "cat";
// let animal: string = "dog"; 
// Error: Cannot redeclare block-scoped variable 'animal'
console.log(animal); // Output: cat

The output of the above example code is as follows

cat

Variables with the same name in different blocks

The variables declared using the 'let' keyword have a block scope. So, variables with the same name but if they are in different blocks, are considered as different variables.

Let's look at the examples below.

In the code below, we have declared the 'num' variable in 'if' and 'else' both blocks and initialized them with different values.

let bool: boolean = false;
// If the boolean is true, the variable num will be 1, otherwise it will be 2
if (bool) {
    let num: number = 1;
    console.log(num);
} else {
    let num: number = 2;
    console.log(num);
}

On compiling, it will generrate the following JavaScript code.

let bool = false;
// If the boolean is true, the variable num will be 1, otherwise it will be 2
if (bool) {
    let num = 1;
    console.log(num);
}
else {
    let num = 2;
    console.log(num);
}

The output of the above example code is as follows

2

Declaring a variable using a 'const' keyword

The 'const' keyword has the same syntax as 'var' and 'let' to declare variables. It is used to declare the constant variables. Furthermore, you need to initialize the 'const' variables while defining them, and you can't change them later.

Syntax

The syntax to declare a variable using the 'const' keyword in TypeScript is as follows

const var_name: var_type = value;

In the above syntax, 'const' is a keyword.

Example

In the code below, we have defined the 'lang' and 'PI' variables using the 'const' keywords, which contain the 'TypeScript' and '3.14' values, respectively.

// Define a constant variable in TypeScript
const lang: string = 'TypeScript';
const PI: number = 3.14;
console.log(`Language: ${lang}`);
console.log(`Value of PI: ${PI}`);

On compiling, it will generate the following JavaScript code.

// Define a constant variable in TypeScript
const lang = 'TypeScript';
const PI = 3.14;
console.log(`Language: ${lang}`);
console.log(`Value of PI: ${PI}`);

The output of the above example code is as follows

Language: TypeScript
Value of PI: 3.14

The variables are declared using the 'const' keyword has the same rule for scoping and re-declaration as the variable declared using the 'let' keyword.

In the code below, you can observe that if you try to re-declare the 'const' variable in the same scope or try to change its value after declaring it, it throws an error.

if (true) {
    const PI: number = 3.14;
    console.log(PI);
    // const PI: number = 3.14; Error: Cannot redeclare block-scoped variable 'PI'.
    // PI = 3.15; Error: Cannot assign to 'PI' because it is a constant.
}

On compiling, it will generate the following JavaScript code.

if (true) {
    const PI = 3.14;
    console.log(PI);
    // const PI: number = 3.14; Error: Cannot redeclare block-scoped variable 'PI'.
    // PI = 3.15; Error: Cannot assign to 'PI' because it is a constant.
}

The output of the above example code is as follows

3.14 

You learned to use the 'let' and 'const' statements to declare variables. It is always a good idea to declare a variable using the 'let' keyword due to its block scoping features, which avoids the overriding of values of variables declared in the different scopes.