Var, Let and Const in JavaScript and TypeScript - Simple & Code Examples
Table of contents
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.