Difference between let vs var vs const in Typescript

In TypeScript (and JavaScript), let, var, and const are used for variable declaration. Each has different characteristics that affect scope, hoisting, reassignment, and immutability. Here’s a comparison:

1. let

• Scope: Block-scoped (confined to {} block where it is declared).
• Hoisting: Variables declared with let are hoisted, but they are not initialized, causing a Temporal Dead Zone (TDZ) until the declaration is encountered.
• Reassignment: Can be reassigned.

let count = 10;
count = 20; // Allowed

2. var

• Scope: Function-scoped (accessible within the function where declared, ignoring block scope).
• Hoisting: var is hoisted and initialized to undefined.
• Reassignment: Can be reassigned and re-declared within the same scope.

var name = 'Alice';
var name = 'Bob'; // Allowed

3. const

• Scope: Block-scoped (like let).
• Hoisting: Variables declared with const are hoisted but not initialized, also causing a Temporal Dead Zone.
• Reassignment: Cannot be reassigned after the initial assignment.
• Immutability: The binding of const is immutable, but the content of objects and arrays is mutable.

const PI = 3.14;
// PI = 3.1416; // Error: Cannot assign to 'PI'

const numbers = [1, 2, 3];
numbers.push(4); // Allowed, array contents are mutable

1. Scope

var

• Function-scoped: Variables declared with var are scoped to the nearest function block.
• var declarations do not respect block scope (i.e., if, for, or while blocks).

function varExample() {
  if (true) {
    var x = 10;
  }
  console.log(x); // 10 (accessible outside the block)
}

let

• Block-scoped: Variables declared with let are confined to the nearest enclosing block (i.e., {}).

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

2. Hoisting

Both var and let declarations are hoisted, but they behave differently.

var

• Hoisted to the top of the function or global scope and initialized with undefined.

console.log(a); // undefined
var a = 5;

let

• Hoisted but not initialized. Accessing it before the declaration results in a ReferenceError.

// console.log(b); // ReferenceError
let b = 10;

3. Re-declaration

var

• Can be re-declared within the same scope.

var a = 1;
var a = 2; // No error

let

• Cannot be re-declared in the same scope.

let a = 1;
// let a = 2; // Error: Cannot redeclare block-scoped variable 'a'

Comparison Table

Feature	var	let	const
Scope	Function-scoped	Block-scoped	Block-scoped
Hoisting	Hoisted (initialized to undefined)	Hoisted (Temporal Dead Zone)	Hoisted (Temporal Dead Zone)
Reassignment	Allowed	Allowed	Not allowed
Re-declaration	Allowed	Not allowed	Not allowed
Immutability	No	No	Yes (binding is immutable, content may be mutable)

Best Practices

• Use const for values that do not change.
• Use let when you need to reassign values.
• Avoid using var to prevent issues related to function-scoping and hoisting.

In TypeScript, const and let are generally preferred for better readability and fewer unexpected behaviors.