JavaScript Variables: var and let and const
Tags: javascript
Published: 2020-03-06 17:39:54

---
title: JavaScript Variables: var and let and const
published: true
date: 2020-03-06 07:00:00 UTC
tags: javascript
canonical_url: https://www.prestonlamb.com/blog/javascript-variables-var-and-let-and-const
---

## [tldr;](#tldr)

There are three ways to create variables in a JavaScript application: using `var`, using `let`, or using `const`. This will not be a post trying to convince you which one you should use, or arguing about what is best. It’s just good to know about the differences and what it means when you use the different options. But hopefully by the end of all this you’ll be comfortable with the three options and can make a decision for your team that will suit your needs. To get the most out of this post, it is best if you understand variable scope, which we covered in [this post](/blog/javascript-variables-scope-and-hoisting) previously.

## [Variables using `var`](#variables-using-var)

When you declare a variable with `var`, the variable will be function scoped. If you try and use the variable before it’s declared in that function, it will have an `undefined` value due to hoisting. These may be desired effects for your app, but my recommendation is to not use `var` for variable declarations.

## [Variables using `let`](#variables-using-let)

When you declare a variable with `let`, the variable will be block scoped. If you try to use the variable before it’s declared in that block, or outside that block, a `ReferenceError` will be thrown. This is nice because the occasions should be rare that you use a variable before declaring it. These variables are also re-assignable. Let’s look at an example:

```js
function playGame() {
	let gameName = 'Super Mario Brothers';

	gameName = 'Mario Kart 8';

	console.log(gameName); // Mario Kart 8
}

playGame();
```

In the above example, we declare the `gameName` variable and initialize its value to `Super Mario Brothers`. But right below it, we reassign the value to a different string, `Mario Kart 8`. This is completely valid for variables declared with `let`. My recommendation is to use `let` any time you need to reassign the value of a variable. Examples of when you might need to do this would be when in a `for` loop, for example.

## [Variables using `const`](#variables-using-const)

When you declare a variable with `const`, the variable will be block scoped. If you try to use the variable before it’s declared in that block, or outside that block, a `ReferenceError` will be thrown. This is nice because the occasions should be rare that you use a variable before declaring it. The difference between `const` and `let`, though, is that variables declared with `const` can not have their values reassigned. So our above example would produce a `TypeError` for trying to assign a value to a constant variable. Let’s look at an example of ways that you can change parts of a `const` variable:

```js
const game = {
	title: 'Zelda: Breath of the Wild',
};

game.title = `Zelda: Link's Awakening`;

console.log(game.title); // Zelda: Link's Awakening
```

Even though `game` was declared using `const`, we can still change the value of an attribute on the object. The same is true with arrays. You can `push` onto an array declared with `const`. What you _can’t_ do is the following:

```js
const game = {
	title: 'Zelda: Breath of the Wild',
};

game = {
	title: `Zelda: Link's Awakening`,
}; // TypeError: Assignment to constant variable
```

In the second example, the error occurs because we are changing the value of the `game` variable itself, not just one of its attributes’ values.

## [Conclusion](#conclusion)

So which of the three options should you use? Well, I’ll let you and your team decide. I personally like to use `const` all the time, unless in the case where I know I’ll need to reassign the value of a variable. In those cases I use `let`. I think it helps your future self and other developers know that you didn’t intend for that value to change, and the application will produce an error if you do try to change it. But if you would rather use `let`, then go ahead and do what works best for you and your team.