const - JS | lectureJavaScript Fundamentals 1

Let, Const and Var

JavaScript Fundamentals 1

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.

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

script.js
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 :

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

script.js
// 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.

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

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