# 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](https://blog.multignite.com/scope-in-javascript-typescript) 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:

```javascript
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`:

```javascript
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`:

```javascript
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:

```javascript
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.