JavaScript

The differences between var, let and const

July 1, 2021

The differences between var, let and const

In this article we’ll see what the differences are in these three ways of declaring values, as well as use cases for var, let, and const.

differences between var, let and const capa

Previously we had only one way of declaring variables, and today it is still the best known, the famous one: var

But with the coming of ES6, we have new possibilities, some of you may have already heard, and the children’s names are let and const.

What is let?

As we already know it’s a way to define a variable, but the big difference for var is that we can limit the scope to a block.

Unlike var which is defined globally in function scope only, let can have a different value within each block

Understand block by everything between { }

It may seem confusing at first, but let’s take a few examples, first with var:

var name = 'João';

console.log('My name is: ', name ); // My name is João

function sayMyName() {
    var name = 'Pedro';
    console.log('My name is: ', name ); // My name is Pedro
}

sayMyName();

console.log(name); // João

Well, it should be obvious to you here, but as explained earlier the scope of var is limited by a function block.

That is, creating a variable with exactly the same name inside a function and assigning it to a value different from the one declared in the application’s global scope, does not change the value of the first.

So the limit of a variable is a function block, so let’s look at another case:

if(true) {
    var name = 'Kléber';
    console.log('My name is: ', name ); // My name is Kléber
}

console.log('My name is: ', name ); // My name is Kléber

for(i = 0; i < 3; i++) {
    var name = 'Vitor';
    console.log('My name is: ', name ); // My name is Vitor
}
console.log('My name is: ', name ); // My name is Vitor

Now differently we add elements like if and a for, which are not functions, the variable name is changed by all of them.

Understand that functions in JavaScript are block elements that have a scope separate from the application flow.

If, for, while, etc. are block elements but share the same scope, thus explaining why the variable name is changed.

So now let’s see case by case with let:

let myName = 'João';

console.log('My name is: ', myName ); // My name is João

function sayMyName() {
    let myName = 'Pedro';
    console.log('My name is: ', myName ); // My name is Pedro
}

sayMyName();

console.log(myName ); // João

In this part, it’s exactly the same as var because the function is a block element.

So let keeps the values for each block.

Now see the next one:

if(true) {
    let myName = 'Kléber';
    console.log('My name is: ', name ); // My name is Kléber
}

console.log('My name is: ', name ); // My name is João

for(i = 0; i < 3; i++) {
    let myName = 'Vitor';
    console.log('My name is: ', name ); // My name is Vitor
}

console.log('My name is: ', name ); // My name is João

Within the if and for blocks, the variable myName is changed, but notice that outside it the value is the same as the beginning of the first example.

Here we see the real difference of let, which separates each variable value by block elements, that is, everything between { }

And finally we can declare let inside a loop without also interfering with the global context, see:

let j = 0;

for(let j = 10; j > 0; j--) {
    console.log('j is now :' + j);
}

The first j has nothing to do with the second, which was created as an index counter, to help the end of the for.

What is const?

When we declare a value with const it cannot be changed throughout the code

Other languages you’ve used probably had a way to declare a constant, and JavaScript has the same concept as these others, the value is immutable.

Furthermore, the name is unique, that is, it can only be declared once, if you declare something with the same name, you will receive an error.

Uncaught SyntaxError: Identifier 'test' has already been declared

Another peculiarity of constants is that they must be started with some value, if not, again we receive an error (for obvious reasons :D), which is the following:

Uncaught SyntaxError: Missing initializer in const declaration 

Now knowing the correct way to declare, let’s see other particularities

They behave similarly to let, working inside the declared block, that is, between { } won’t affect the others outside the block, see:

const test = 1;

if(true) {
    const test = 2;
    console.log(test); // 2
}

console.log(test); // 1

So understanding how let works, you also know how const works

The big difference is that its value cannot be changed!

Will I never use var again in my life?

Here are some arguments for not using var in codes that use ES6, see:

  • No error is returned if you declare a variable with the same name, with let and const you get an error;
  • var has no block scope, meaning in larger code it is difficult to maintain;
  • I haven’t seen any cases that var is extremely necessary, we can always switch to let or const;

So now it’s up to you!

Conclusion

We saw that in ES6 we have two ways to declare values

First of all, let, which is the closest to the old var but with some differences like block scope, we can only declare once with the same name (in the same scope), which makes the code easier to maintain and organized

And then const, which are the well-known constants of other languages, which keep the value forever in its scope, and inherit the same as let scope, that is, block scope

And the latter must always be declared with some initial value and its name must be unique!

Also check out our Youtube channel with a lot of content about programming, by clicking here

Thanks for reading guys, until the next post. 😀

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x