Let, Const and Var
We are now going to take a look at the different ways of declaring variables in JavaScript. We have always used the let
keyword to declare variables; however, there are also const
and var
. The keywords let
, and const
were introduced in ES6, and so they are modern JavaScript, while the var
keyword is the old way of declaring variables.
We are now going to learn how they are different and which one to use in which situations.
LET
We use the let
keyword to declare variables that can change later; basically during the execution of our program, that's exactly what we've been doing.
let year = 2021
year = 2022
It's perfectly okay to declare a variable with let
at one point in the program and then later assign a new value to it. In technical terms we call this reassigning a value to a variable or also say that we mutate the year
variable in this case. It was 2021
and now it is 2022
.
Mutate is a term you will constantly hear in ther JavaScript world. When we need to mutate a variable, that's the perfect use case for using let
and that also count when we want to declare empty variables .i.e.
let city = 'Paris'
city = 'Madrid'
Declaring empty variables is usually done in practice when we want to declare all variables at the top of a file but only assign actual values to them later in the program, for example, based on some condition.
CONST
We use the const
keyword to declare variables that are not supposed to change at any point in the future. The value in a const
variable cannot be changed. Consider the below code snippet :
const yearOfBirth = 1980
yearOfBirth = 1991
If you try this, you will have a Type Error
saying Assignment to a constant variable
. That's exactly what the const
keyword does. It creates a variable that we cannot reassign; or, in technical terms, an immutable variable.
The fact that variables created with const are immutable also means that we cannot declare empty const
variables.
// Doing this is not legal!
const city;
Executing the above code will give us a syntax error saying Missing Initializer
. This error means that when using const
, we need to provide an initial value.
Having these two ways of declaring variables, you certainly ask yourself should I use let
or const
when declaring a new variable ? Well, as a best practice for clean code, it is usually recommended to use const
by default and let
only when you are really sure that the variable needs to change at some point in the future. The is because it is a good practice to have as little variable mutations as possible because changing variables introduces a potential to create bugs.
To make it simple, by default, always use const
and let
when you're sure the value of the variable needs to change at some point in your code.
VAR
Declaring variables in JavaScript using the var
keyword should be completely avoided. I'm showing this to you so that you know how it works and for legacy reasons, because you will probably see it in old code bases or old tutorials that you find online.
At first sight, var
works actually pretty much the same as let
.
var job = 'Software Enginner'
job = 'Teacher'
If you load this, you will notice that you won't get any errors, meaning it's allowed to mutate this job
variable when using var
. Although it looks like var
and let
are very similar, they are actually pretty different below the surface. There are many differences between let
, const
, and var
, which we will see later because it has to do with an important topic known as scoping which isn't useful right now. What matters is that you should never use var
.
To finish, people might point out that we don't even have to declare variables at all because it's not mandatory. Try the below code snippet.
email = 'sometestemail'
console.log(email)
On page reload, you will notice that JavaScript will happily execute the script even without declaring the variable. We didn't use let
nor const
nor var
in this case, but it still worked.
This is a pretty terrible idea because this doesn't create a variable in the current so-called scope. Instead, JavaScript will create a property on the global object. Don't worry about all these new terms. You will understand what all of this means later. What matters is that you should always properly declare your variables and never declare a variable as we did above.