First of all, let's define what is a variable. Simply put, a variable is something that holds a value. It has an identifier (or a name) which can contain letters, digits, and special symbols. In order for us to "declare" a variable we can use three methods: let, var, and const.
As a general rule, if you do not want the value of your variable to change throughout the entirety of your code, declare it using const (the value will remain constant, get it?). This will ensure that it cannot be redeclared and cannot be reassigned. Let's see that in action:
const snack = "ice-cream"
Here we declared our variable (snack) and assigned a value to it (ice-cream). If we want to retrieve the value of our variable, we can simple run snack and get ice-cream in return:
What happens if we try to re-assign the value? Let's see:
Hmmmm it doesn't like that. Perhaps we can just re-declare the value?
Nope, that does not work either!
What if we would like a bit more flexibility here, and want to be able to re-assign the value of a variable? Here we would use the variable let:
Mind you, we still will not be able to re-declare the value of let, but we can re-assign it. In the same situation, const is throwing us an error.
And most flexible of all, var, can be both re-declared and re-assigned it's value:
So, to sum it up, var variables can be re-assigned value and re-declared; let variables can be re-assigned value but not re-declared; const variables can neither be re-assigned value nor re-declared.
But these are not the only differences; they also differ in scope, or essentially in their availability for use in various parts of code. Here we will cover two types of scope: global and local.
If a variable is declared outside of any function it is a global variable. Global variables can be accessed from within any function:
Variables declared inside any function are called local variables. Local variables cannot be accessed outside the function:
An important thing to note is that in JavaScript, a variable can also be used without declaring it, meaning we will not use var, let, or const to declare it. If a variable is used without declaring it, that variable automatically becomes a global variable:
We should also mention something that’s called a block scope. A block is, generally speaking, anything within curly brackets; it could be for or while loops, if statement, etc. Block scoping means declaring a variable inside those curly brackets. It is within the concept of a block scope that we can see different behaviors of our three variables.
When it comes to a var variable, it is globally scoped if we declare it outside of the function, and locally (or functionally) scoped if we declare it within the function. It is not block scoped! This means if we declare a variable using var inside a block of code, we can just as easily access it outside of that block of code, on a function level:
As we can see, we have no issue printing out the value of a variable “snack” (which was defined inside a block of code) both within the block and outside of it. That, along with the fact that we can both re-assign and re-declare it’s value, can potentially create complications and errors in our code, which is why const and let are typically preferred over var.
You see, unlike var, both const and let actually respect the block scope; if we declare a variable using these two inside a block of code, we will not be able to access it from the outside of the curly brackets, not on a function level, and not on a global level. This can open up a lot more possibilities for our code! Let’s see how const behaves in the very same situation we just saw above:
As we can see, only the console.log inside the block of code worked. We can observe the same behavior with let:
To sum up, the main differences when it comes to scope are: let and const variables are block scoped, var are NOT (only globally or functionally scoped). These differences, along with the differences in their ability to be re-declared and re-assigned, open up very different possibilities with each of these variables when we code.
Thank you for reading!
Top comments (0)