A Beginner's Guide to Variable Declarations in JavaScript: When to Use const, let, and var
Tags: javascript, webdev, codenewbie, tutorial
Published: 2023-01-04 06:45:46

If you're new to JavaScript, you might be unclear about the distinctions between let, var, and const. Each of these methods of declaring variables in JavaScript have some clear distinctions that you should be aware of.

In this short article I make it as clear as possible.

> Before we move on, remember you can build your websites, landing pages, APIs, and more, **with** or **without** coding on [DoTenX](https://dotenx.com) for **free**. Make sure to check it out and even nominate your work to be showcased.*DoTenX is* ***open-source*** *and you can find the repository here:* [*github.com/dotenx/dotenx*](http://github.com/dotenx/dotenx)[.](http://github.com/dotenx/dotenx.*)

---

Let's start with `const`. As the name suggests, `const` should be used for constants, meaning variables whose values cannot change or be reassigned.

```javascript
const langugage = "Javascript";
language = "Python"; // This will throw an error as you cannot reassign a constant.
```

Use `const` for your constants that you don't change their values, like mathematical constants, configurations, environment variables, and the like.

Now, let's take a look at `var`. For a long time, this was the only way you would declare a variable and it's still widely used.

```javascript
var size = "100px";
console.log(size) // Outputs 100px
...
size = "200px";
console.log(size) // Outputs 200px
```

`let` is another way to declare variables that can be reassigned.

```javascript
let size = "100px";
console.log(size) // Outputs 100px
...
size = "200px";
console.log(size) // Outputs 200px
```

As you can see the difference between `const` and `var`/`let` is very simple and clear. If the variable should be reassigned you must use `var` or `let` otherwise it's better to use `const`. However, there are differences between `var` and `let` too.

The first key difference between these two comes from the fact that variables declared with `var` are function-socped, meaning they are accessible within the function they were declared in, as well as any nested functions. On the other hand, `let` variables are block-scoped, which means that they are only accessible within the block they were declared in (e.g., within an `if` statement or a `for` loop).

```javascript
function useVar() {
  if (true) {
    var x = 10;
  }
  console.log(x); // Outputs 10
}

function useLet() {
  if (true) {
    let x = 10;
  }
  console.log(x); // Throws a reference error, because x is not defined outside of the if block.
}
```

As you see, this might be very clear that the scope of the variable should be limited to the block it's defined in but `var` doesn't follow this behaviour which makes it rather confusing and error-prone.

Another key difference between `var` and `let` comes from the fact that variables declared with `var` are hosted to the top of their scope but it's not the case if you use `let`. In simple terms, this means that you can't access a `let` variable before it has been declared.

```javascript
console.log(x); // Outputs undefined
var x = 10;

console.log(y); // Throws a reference error, because y is not defined
let y = 10;
```

Again, the behaviour of `let` is more sensible and that's why you should almost always use `let` instead of `var`