A Beginner's Guide to Variable Declarations in JavaScript: When to Use const, let, and var

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 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.

---

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

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.

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.

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).

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.

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