TypeScript let vs var: Key Differences with Examples

When working with TypeScript, one of the fundamental aspects to understand is variable declaration. The two primary keywords used for this purpose are let and var.

While they might seem similar at first glance, they have significant differences that can impact the behavior of your code.

This tutorial aims to provide a detailed comparison between TypeScript let vs var, complete with examples to illustrate their differences and best practices for their usage.

Table of Contents

What is var in TypeScript?

The var keyword is one of the oldest ways to declare variables in JavaScript, and by extension, TypeScript.

It has been around since the inception of JavaScript and is a function-scoped variable. This means that a variable declared with var is accessible within the function it is declared in, or globally if declared outside any function.

Example of var in TypeScript

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

In the example above, x is accessible outside the if block because var does not have block scope. Instead, it is hoisted to the function scope.

Check out: Difference Between Undefined and Null In TypeScript

What is let in TypeScript?

The let keyword was introduced in ECMAScript 6 (ES6) and is also available in TypeScript. Unlike var, let is block-scoped, meaning the variable is only accessible within the block it is declared in.

Example of let in TypeScript

function letExample() {
    if (true) {
        let y = 20;
    }
    console.log(y); // Error: y is not defined
}
letExample();

In this example, attempting to access y outside the if block results in an error because let confines the variable to the block scope.

Check out: Use TypeScript Enums with Functions

Key Differences Between var and let in TypeScript

Scope:

Function Scope (var): Variables declared with var are function-scoped. If declared outside any function, they become global variables.
Block Scope (let): Variables declared with let are block-scoped. They are only accessible within the block in which they are declared.

Hoisting:

Both ‘var’ and ‘let’ are hoisted, but there is a crucial difference in how they are initialized.

var Hoisting: Variables declared with var are hoisted to the top of their function scope and are initialized with undefined.
let Hoisting: Variables declared with let are hoisted to the top of their block scope but are not initialized. Accessing them before declaration results in a ReferenceError.

Example of Hoisting in TypeScript

function hoistingExample() {
    console.log(a); // Outputs: undefined
    var a = 10;

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

Re-declaration

var: Allows re-declaration within the same scope.
let: Does not allow re-declaration within the same scope.

Check out: Avoid Duplicate Enum Values in TypeScript

Example of Redecclaration in TypeScript

var c = 30;
var c = 40; // No error

let d = 50;
let d = 60; // Error: Identifier 'd' has already been declared

Temporal Dead Zone (TDZ) in TypeScript

The Temporal Dead Zone is the time between entering the scope of a variable and its actual declaration. During this period, the variable cannot be accessed.

var: Does not have a Temporal Dead Zone.
let: Has a Temporal Dead Zone.

Example of Temporal Dead Zone

function tdzExample() {
    console.log(e); // Outputs: undefined
    var e = 70;

    console.log(f); // Error: Cannot access 'f' before initialization
    let f = 80;
}
tdzExample();

Best Practices

Use let by Default: Given its block-scoping and avoidance of hoisting issues, let is generally the safer choice for variable declarations.
Avoid var: Due to its function-scoping and potential for hoisting-related bugs, var should be avoided in modern TypeScript code.

Summary in Tabular Format

Feature	var	let
Scope	Function-scoped	Block-scoped
Hoisting	Hoisted and initialized with undefined	Hoisted but not initialized
Re-declaration	Allowed within the same scope	Not allowed within the same scope
Temporal Dead Zone	No	Yes
Best Practice	Avoid	Use by default

Conclusion

Understanding the differences between ‘var’ and ‘let’ is crucial for writing robust and error-free TypeScript code. While var has historical significance, its function-scoping and hoisting behavior can lead to unexpected bugs.

On the other hand, let provides block-scoping and avoids many of the pitfalls associated with var, making it the preferred choice for variable declarations in modern TypeScript development.

By following the best practices outlined in this guide, you can ensure that your TypeScript code is both efficient and maintainable.

TypeScript let vs var Difference