In JavaScript there are three different ways to declare a variable: var, let and const. Each of these forms has different characteristics that can be useful, but sometimes the way to use them can cause some confusion and be undecided about which one to use, so In this article you will learn when to use each one and the differences between them!.

Using var to declare a variable

In JavaScript we use the reserved word var to declare a variable that can be muted, this means that the content of this variable can change, and as JavaScript is a non-typed language we can re-declare our variable with a totally different data type without getting an error. Link to example.

var foo = 'Hello!';
foo = 42;
foo = true;
foo = ['Hello', 'World'];
foo = {
  Hello: 'Mom'
};

But this does not stop here, because when using var we are declaring a global variable that can be accessed anywhere in our document. Link to example.

for (var index = 0; index < 10; index++) {}

console.log(index); // 10

For reasons like this it is not recommended to use var and to use instead var. const or let.

Using let to declare a variable

In JavaScript we use the reserved word let to declare variables which can be muted with a totally different type than the previous one (as with the reserved word var ).

But unlike var, let does not have a scope within the whole document but has a scope at block level.

What does block level mean? what this means is that it can only be accessed within the block in which it was declared ( { inside the braces is a block } ) and outside that block it will not exist. and outside that block this variable will not exist. Let’s make this clear with several examples!

First example

Here we have the same first example shown with var and that by replacing it with let our program will continue to work as expected. Link to example.

let foo = 'Hello!';
foo = 42;
foo = true;
foo = ['Hello', 'World'];
foo = {
  Hello: 'Mom'
};

Second example

Will it work the same with the second example given with the use of var? Link to example.

for (let index = 0; index < 10; index++) {}

console.log(index); // ReferenceError: index is not defined

In this case when using let and calling the variable outside the block that was declared we will not be able to access it since this variable does not exist outside this block. we could add one more line to this example to make it look better Link to example

for (let index = 0; index < 10; index++) {
  console.log(index); // 0 1 2 3 4 5 6 7 8 9
}

console.log(index); // ReferenceError: index is not defined

Here we can observe that we can access perfectly to the variable inside our block but outside this one it throws us an error indicating us that the variable that we have wanted to call does not exist.

Third example

So far we have understood that using let to declare a variable within a block we can only access it within that block, but what would happen if we declare our variable using let that is declared above that block? Would it print its content or would we get an error saying that it has not been found? Link to example

let fullname = 'John Doe';

function salute() {
  console.log(fullname); // John Doe
}

salute();

As we have been able to see the answer would be YES it would print the content of this, since being in a higher level than the block where we want to call this has a greater scope and can be accessed by all the blocks that are in a level inferior to the declaration of this.

Using const to declare a variable

In JavaScript we use the reserved word const to declare a variable that can NOT be mutated, unlike the previous two and that is why this is a constant.

Because of this, when we try to change the value of this one, we will get an error indicating that NOT it is possible to change the value to a constant. Link to example

const foo = 'Hello!';
foo = 42; // TypeError: Assignment to constant variable.
foo = true; // TypeError: Assignment to constant variable.
foo = ['Hello', 'World']; // TypeError: Assignment to constant variable.
foo = {
  Hello: 'Mom' // TypeError: Assignment to constant variable.
};

The scope of const is exactly the same as let, that is why it will be at block level and not at global level unlike var. Link to example

const myNumbers = [1, 2, 3, 4, 5];

for (const number of myNumbers) {
  console.log(number);
}

console.log(number); // ReferenceError: number is not defined

Conclusions

We have seen that using var we can declare global variables which can be mutated, then we have seen that the use of let to declare a variable can also be mutated as with var but the scope of this is at block level and finally we have found that declaring a variable with const this can not be mutated and the scope of this will be the same as that of the reserved word let, ie it will be at block level.

To conclude this article we must remark that currently the use of var is discouraged and use instead let or const, because its use can give problems as those already explained in the article.