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