If you’re new to TypeScript, you might have noticed that there are three different keywords that you can use to declare variables: var, let, and const. While they might seem interchangeable at first, there are some important differences between them that you should be aware of. In this article, we’ll explore what each of these keywords means, how they differ from one another, and when you should use them in your code.

var

Let’s start with var. This is the oldest and most widely known way to declare variables in JavaScript, and it’s still valid in TypeScript. When you use var to declare a variable, the variable is function-scoped. This means that it’s only accessible within the function where it was declared, and any functions nested within that function.

function myFunction() {
    var myVariable = '😊';
    if (true) {
        var myVariable = '😒';
        console.log(myVariable); // logs 😒
    }
    console.log(myVariable); // logs 😒
}

Here, we’ve declared a variable called myVariable twice: once inside the function, and once inside the if statement.

However, because var is function-scoped, both of these variables refer to the same thing. This means that when we log myVariable inside the if statement, we get 😒, but when we log it outside the if statement, we also get 😒.

This behaviour can lead to some unexpected bugs, especially if you’re not careful about how you declare your variables. For this reason, it’s generally recommended to use let or const instead. A lot of linters, such as ESLint will include rules to automatically switch your variables to let.

let

let was introduced in ES6 as a replacement for var. Like var, let is used to declare variables, but it’s block-scoped instead of function-scoped. This means that a variable declared with let is only accessible within the block where it was declared, including any nested blocks.

Let’s update our previous example:

function myFunction() {
    let myVariable = '😊';
    if (true) {
        let myVariable = '😒';
        console.log(myVariable); // logs 😒
    }
    console.log(myVariable); // logs 😊
}

myFunction();

Here, we’ve used let to declare both variables. This changes our code, so now both console.logs print what we expect. This is because let is block-scoped, so the two variables are completely separate from one another.

Another difference is that let won’t let you redeclare variables in the same scope, whereas var will:

var foo = 'foo';
var foo = 'bar';

let bar = 'foo';
let bar = 'bar'; //TS2451: Cannot redeclare block-scoped variable 'bar'

This behaviour makes let a safer and more predictable way to declare variables, especially in larger codebases. It also helps prevent accidental variable overwriting, which can be a common source of bugs in Typescript.

const

Finally, there’s const. Like let, const is block-scoped, but there’s one big difference: once you’ve assigned a value to a const variable, you can’t reassign it. This means that const variables are read-only. If you try to change the value of a variable assigned with const, you’ll get an error.

const myVar = 'foo';
myVar = 'bar'; //TS2588: Cannot assign to 'foo' because it is a constant.

This might seem like a limitation, but it can actually be a helpful way to prevent accidental changes to your code. If you have a variable that should never change, declaring it as const can help ensure that it stays that way.

If you’re working with a react app for example, you might be using the useState hook. In that case, you never want to directly modify the variable and setter function returned from useState.

In TypeScript, another benefit of const is that when you use it to create a variable, TypeScript assigns it a stricter type.

const var1 = 'foo'; //type is 'foo'
let var2 = 'bar'; // type is string

Here, since TypeScript trusts that the variable won’t change type, it will give the variable the type of ‘foo’, instead of string.

Conclusion

Thanks for reading! If you’re not sure when to go for which one, as a general rule of thumb, you should always prefer let over var. It can also be useful to define variables using const until you need to change them. It’s easier to start off with const and switch to let when you need to, rather than to have a variable defined using let, and deal with any errors that pop up from switching it to const.

Hopefully, with the help of this article, you now know when to use each option. If you liked this article, or if you have any questions, feel free to leave a comment!

👋 Hey, I'm Omari Thompson-Edwards

Hey, I'm Omari! I'm a full-stack developer from the UK. I'm currently looking for graduate and freelance software engineering roles, so if you liked this article, reach out on Twitter at @marile0n