TypeScript variable declaration and scoping: let, const, and var

TypeScript Basic: Exercise-2 with Solution

Write a TypeScript program that declares variables using let, const, and var. Then, describe how each declaration type behaves with respect to scoping and mutability.

Sample Solution:

TypeScript Code:

// Using let (Block-scoped, mutable)
let myVariable1: number = 5;
if (true) {
    let myVariable1: number = 10; // This is a different variable within the block scope.
}
console.log(myVariable1); // Output: 5 (the outer variable)

// Using const (Block-scoped, immutable)
const myVariable2: string = "Hello";

//myVariable2 = "World"; // Error: Cannot reassign a const variable

// Using var (Function-scoped, mutable)
function exampleFunction() {
    var myVariable3: boolean = true;
    if (myVariable3) {
        var myVariable3: boolean = false; // This redeclares the same variable within the function scope.
    }
    console.log(myVariable3); // Output: false (the inner variable)
}
exampleFunction();

Explanations:

In the exercise above -

• Using let (Block-scoped, mutable):
• 'let' is used to declare a variable named 'myVariable1' and assigns it the value 5.
• Within an if block, a new variable named 'myVariable1' is declared and assigned the value 10. This is a different variable that exists only within the block scope, and it does not affect the outer variable.
• After the if block, the outer 'myVariable1' is logged to the console, and it retains its original value of 5.
• Output: 5 (the outer variable)
• Using const (Block-scoped, immutable):
• const is used to declare a variable named 'myVariable2' and assigns it the value "Hello".
• An attempt to reassign 'myVariable2' with "World" (as shown in the commented-out line) will result in an error because const variables cannot be reassigned once assigned an initial value.
• Using var (Function-scoped, mutable):
• A function named "exampleFunction()" is defined.
• Inside the function, a variable named 'myVariable3' is declared using var and assigned the value 'true'. Note that var is function-scoped.
• Within an if block, a new variable named 'myVariable3' is declared and assigned the value 'false'. This redeclares the same variable within the function scope, and it shadows the outer variable.
• The inner 'myVariable3' is logged to the console, and it contains the value 'false' because it was redeclared and assigned within the if block.
• Output: 'false' (the inner variable).

Output:

5
false

TypeScript Editor:

See the Pen TypeScript by w3resource (@w3resource) on CodePen.




Previous:Declare, assign and print variables.
Next: TypeScript variable types and basic operations.