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.

//both type and initial value

var width:number = 100;
let height:number = 200;
const key:string = 'abc123';

//without type, but with an initial value
var width = 100;
let height = 200;
const key = 'abc123';

//only the type
var width:number;
let height:number;
//const   does not support without initial value

//without Type/Initial Value
var width;
let height;
//const   does not support without 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.

function someFn() {   

  if (true) {        

    //defined locally
    //Its scope ends where curly braces ends
 
    var localVar=1000
    console.log(localVar)      //ok
  }

  console.log(localVar)        //ok

  function nested() {         
    console.log(localVar)      //ok
  }

}

console.log(localVar)      //error

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.

function someFn() {   

  if (true) {        

    //defined locally
    //Its scope ends where curly braces ends
 
    let localVar=1000
    console.log(localVar)      
  }

  console.log(localVar)        //error

  function nested() {         
    console.log(localVar)      //error
  }

}

console.log(localVar)      //error

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.

var MaxTry=10;
console.log(MaxTry);

var MaxTry=100;     //No Error here even if we are declaring it again
console.log(MaxTry);

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

var MaxTry=10;
console.log(MaxTry);

var MaxTry:string="Hello World";    //Typescript compiler complaints here
                                    //but code still runs without error 
console.log(MaxTry);

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.

console.log(testVar);
var testVar="hello";

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

undefined

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

ReferenceError: testVar is not defined

Const cannot be reassigned

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

const MaxTry=10 ;
MaxTry=5;            //Error 

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.