Typescript Let vs Var vs Const

We define variables in Typescript using let, var or const. In this article let us explore each of them and find out the difference between let vs var vs const. Knowing the difference between them is makes it easier to decide what to use where and when.

Using Let, Var & Const

The following example shows how to declare a variable using the above keywords. You can learn more about the variable declaration from Typescript variables tutorial.

There are four ways you can declare a variable. They are

• both type and initial value
• without type, but with an initial value
• only the type
• Without Type/Initial Value

Use var and let to define any variable, with or without type or initial value.

We use the const keyword initialize a constant whose value does not change. Hence we must initialize it with a value. You can not use it to declare a variable where there is no initial value.

Difference between Let vs Var vs Const

Variable Scope

The scope or visibility of the variable is the major difference between these keywords.

var is function scoped

The variables declared using var inside the function are available only within that function. If we declare them outside the function, then they are available everywhere i.e. they are a global variable.

If we define them inside a code block, they are still scoped to the enclosing function.

For Example, in the following code. variable localVar is declared inside the if block, but you can refer to it anywhere inside the function in which it is defined. That includes nested functions or other code blocks. But you cannot refer to it outside the function.

let & const is block scoped

The variables declared using let or const are block-scoped. They are scoped to the block in which they are declared i.e. inside the if/try/catch/while/for or any code block (enclosed in curly parentheses).

This means that we can only use it in the code block where we declare them. Outside the code block, they are invisible

If they are outside the code block, but within the function body then they become function scoped.

If they are outside the function and code block, then they are available globally or become a global variable.

For Example, change the variable type of localVar to let. You will Typescript immediately throws an error in all instances where they are outside the if block.

var variables can be redefined or updated

We can update or redefine a var variable.

For Example, here we are declaring MaxTry variable twice. The compiler does not complain, because the data type is the same.

And in this example, We even change the data type. The compiler complains but the code runs without any error.

The let or const variables cannot be redeclared or updated within the same scope.

Change the var to let in the above example. The code will not run and result in an error.

Var can be accessed before they are declared

We can access the var variable, even before we declare them. This is called variable hoisting

Because variable declarations (and declarations in general) are processed before any code is executed, declaring a variable anywhere in the code is equivalent to declaring it at the top

For example, create Typescript file example.ts. Also, create the tsconfig.json using the tsc --init command. Open the tsconfg.json file and set the target as "target": "es6" and also ensure that "strict": true. This is because the let works only in es6 or later versions.

Now open the following code, paste the following code. We have testVar , which we use before we initialize it.

The compiler will give you a warning. But if you run the code, you will see the output, but no errors are thrown.

Now, change the var to let. Compile and run the code. The code throws an error

Const cannot be reassigned

We must declare a const variable with an initial value. The value cannot be reassigned again.

let, var & const. Which one to choose?

Now, we know the difference between let, var & const. So the question is which one will you choose.

Const is always the first choice, if the value of the variable does not change once initialized. This will prevent some programmers from accidentally modifying the value, which can happen if you use var or let

let is the choice of all other variables. Because let & const are block-scoped. You do not have to worry about variables declared in for loop or if the statement is being overwritten outside the block. block scope helps us to identify bugs and makes our code easier to read.

Avoid var. The var can be redefined, can be reassigned, and does not support block scope. This makes the code harder to read & debug.

Summary

We learned the difference between var, let & const keyword. We use these keywords to declare the variables in typescript. It is better to use the const & let to define the variable rather than var.