Var, Let and Const in JavaScript and TypeScript - Simple & Code Examples

Var, Let and Const in JavaScript and TypeScript - Simple & Code Examples

JavaScript and TypeScript have three keywords to declare variables: var, let, and const. Although these keywords look similar, they have different scopes and behaviors. Let's dive into each one and explore the differences.

VAR

var is the oldest way to declare variables in JavaScript and it has function scope. However, if a variable declared with var is not inside a function, it has global scope, which makes it accessible everywhere in your code.

This can lead to issues because it can overwrite existing variables or cause unintended side effects.

Here's an example of a problem that can arise from var having global scope:

var x = 10;
function exampleVar() {
  x = 20;
}
exampleVar();
console.log(x); // 20

As you can see from the example, the x variable declared outside the function was overwritten by the x variable declared within the function. This can lead to unexpected results and make your code difficult to debug.

LET

let was introduced in ECMAScript 6 and it has a block scope. This means that variables declared with let are only accessible within the block they were declared in, including for loops and if statements. This helps prevent issues with variable scope and makes your code easier to maintain.

Here's an example of declaring a variable with let:

let y = 20;
if (y === 20) {
  let y = 30;
  console.log(y); // 30
}
console.log(y); // 20

As you can see from the example, the y variable declared within the if statement is only accessible within the if statement and does not affect the value of the y variable declared outside the if statement.

CONST

const was also introduced in ECMAScript 6 and it has a block scope just like let. However, the key difference is that variables declared with const are constant and cannot be re-assigned. This helps prevent accidental changes to variables and makes your code more predictable.

Here's an example of declaring a constant with const:

const z = 40;
z = 50;
console.log(z); // Uncaught TypeError: Assignment to constant variable.

As you can see from the example, trying to re-assign a constant declared with const will result in an error.

Arrays and Objects with CONST

Since arrays and objects are reference types in JavaScript and TypeScript, declaring them as const will not make them completely constant. Instead, it will make the reference constant, meaning that you cannot re-assign the reference, but you can still modify the array or object.

Here's an example of using const with an array:

const arr = [1, 2, 3];
arr.push(4);
console.log(arr); // [1, 2, 3, 4]
arr = [5, 6, 7]; // Uncaught TypeError: Assignment to constant variable.

TypeScript

It's worth noting that the concepts of var, let, and const also apply to variables in TypeScript. TypeScript extends JavaScript by adding optional type annotations, but the scoping rules are the same as in JavaScript. So, it is essential to understand the scoping rules of each keyword in JavaScript before moving on to TypeScript.


Understanding the differences between var, let, and const is crucial for writing clean and efficient code in JavaScript and TypeScript. The use of var in JavaScript should be avoided due to its global scope, which can lead to unintended consequences and make your code difficult to maintain.

The global scope of var means that any variable declared with var outside of a function is accessible throughout your entire codebase. This can lead to unexpected results, such as overwriting existing variables or causing side effects that are difficult to debug. Additionally, var also has function scope, which means that it can be re-declared and re-assigned within the same function, leading to further confusion and bugs.

On the other hand, let and const have block scope, which limits the accessibility of variables to the block they were declared in, including for loops and if statements. This makes it easier to manage the scope of your variables and helps prevent unintended changes to your code.

It is recommended to avoid using var in JavaScript and instead use let and const to declare variables. The block scope of let and const makes your code more predictable and maintainable, and reduces the risk of unintended consequences and bugs.