JavaScript Variables

leissan

Leissan

Posted on April 15, 2022

JavaScript Variables

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:

Image description

What happens if we try to re-assign the value? Let's see:

const1

Hmmmm it doesn't like that. Perhaps we can just re-declare the value?

Image description

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:

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:

Image description

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:

global scope

Variables declared inside any function are called local variables. Local variables cannot be accessed outside the function:

local scope

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:

variable not declared
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:

Image description

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:

Image description

As we can see, only the console.log inside the block of code worked. We can observe the same behavior with let:

Image description

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!

💖 💪 🙅 🚩
leissan
Leissan

Posted on April 15, 2022

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related