Coding Newbie

Javascript VAR and LET

VAR and LET: All You Must Know About JavaScript Variables

When I started learning JavaScript, I used VAR keyword for variable declaration. It was a standard declaration, which everyone used. Suddenly, the new word LET came to the scene. And as being the new trend, it was widely accepted. Now we had two options to declare a variable in JavaScript language: VAR and LET.

But what is actually let, and how different is it from var?

Before continuing further, if you need get yourself familiar with JavaScript first, please read the article about the language itself “What is JavaScript? Complete Beginners Guide”.

What are VAR and LET?

Both VAR and LET are variable declarations. LET is a new solution introduced in 2015 with ES (ECMAScript) 6, which is simply said a JavaScript standard.

The motivation behind introducing LET is changing the scope of the variable. And scoping is the main difference between VAR and LET.

Scope: Main Difference between VAR and LET

What is a scope?

The scope actually represents the level, the area at which is the variable available to use. We have global and local scope.

VAR has a function level scoping, which is more of a global scoping character. On the other hand, LET has a block scoping, a local scope level.

More precisely, if we declare a variable with VAR anywhere inside the function, no matter where we call it, the variable will be available. However, if we declare it with LET, it will only be available inside the block where declared (simply put, only within the curly braces).

A few examples below should make it more clear.

function start() {
    var x = 10; // we store both variables inside same scope
    let y = 5;
    console.log(x); //and both console.log commands are part of same function scope
    console.log(y);
}

start();
console.log var and let same scope
The end result is we get results from both console.log commands.

In this case, both VAR and LET are a part of the same scope – inside the function. However, VAR and LET behave differently when called outside of scope. Take a look at the example bellow.

function start() {
    { // variables declared inside object scope, that is a part of function
        var x = 10;
        let y = 5;
    }
    // but calling variables within a function, outside object scope
    console.log(x);
    console.log(y);
}

start();

Result of this code will be:

javascript var let different scope

What happened here? We defined both VAR and LET inside object, nested in a function. However, VAR has a function scope. And although declared inside the object, we can call VAR defined variable within a function that object belongs to.

On the other side, LET has a block scope. That means, when we use LET, the declared variable exists only inside that block. It can be an object, a function, or a global environment. LET variables of higher scope are available for use in lower scope objects. For example, if we declare a global LET variable, we can use it anywhere, as all other environments (functions, arrays, objects, etc) are the lower scope object compared to a global scope.

Why use LET ?

You may ask now, why would we even use LET? Isn’t it better to continue to use VAR, and avoid all the conundrum?

Well, actually no. All the potential problems this function scope of VAR can cause is the very first thing that led to implementation of LET variables. Let’s see some examples first.

javascript var let example

What is happening here? Why is LET variable showing error instead of undefined, and why is that actually good?

If we use VAR, undefined is the result for the first console.log(x). This is because of the hoisting property that VAR possesses. Hmm, what is hoisting now?

Hoisting is a JavaScript mechanism where the variable declaration is moved to the top, before the code execution.

So, because of hoisting property of var, when we write:

console.log(x);
var x = 10;
console.log(x);

JavaScript is actually behaving like this:

var x;
console.log(x);
var x = 10;
console.log(x);

So hoisting is declaring the empty variable x at the top, although we have defined it later in the code. As it is an empty variable, the result is undefined.

LET however, does not possess this property. So, if we do not define the variable before calling it with console.log, it will return the error.

What if we declare an empty variable with LET before calling it? Will the code work then?

javascript calling let  variable

As we see, it will not work. LET returns an error, because it does not allow us to define the same variable multiple times. We can declare variable only once.

Is it easier to use VAR then?

After looking at the examples, you would probably say “But VAR did not break the code, isn’t it a better option?

Here is the thing… The fact that LET is not allowing you to use the variable before it is declared and for multiple times, makes the entire code less error prone.

It is a nice mechanism to keep the code clean, and force you to keep variables within their scope. Also, it prevents you from defining the same variable at multiple places within the same scope, which can often be confusing. Not only that, but writing a code with a length of several hundreds rows is demanding in itself, so this kind of error is easy to make. With LET not allowing redeclaration of variables, it is not possible to make that mistake.

In the end, another question arises: Why impose a new variable declaration, why didn’t they just change the behavior of VAR declaration?

Simply said, that would break… everything. At least, everything made before ES6. If you change the behavior of VAR, you could possibly break all the code that has been written over time.

Having that in mind, much better solution was to invent a new declaration, with a block scope rule.

VAR and LET: Which one to use?

Well, LET is actually a new standard, and new properties coming with it are quite helpful.

In addition, the block scope of LET makes us rethink the role of variables. With defining them only inside needed scope, the entire code is much more organized and effective. Yes, sometimes we will need global scope variables. And that is ok. But variables should have the smallest scope needed

There is no need to rework your code written with VAR declarations. It will still work. However, from now one, LET is a way to go.

Conclusion

VAR and LET are quite similar, but do behave differently.

Both VAR and LET represent variable declarations, but LET is a newer variable type. LET was first introduced in 2015 with ES (ECMAScript) 6, which is a newer JavaScript standard.

LET variables are mostly used today, due to their block scope property, which is extremely useful when writing your code, as it makes the code less error prone and more efficient.

With ES6 came not only new variable declarations. We got a completely new declaration called CONST . If you wish to learn more about CONST, read it here.

%d bloggers like this: