What is the difference between let and var?

To understand the answer to this question, it's better if we first understand the "scope" in JavaScript.

The scope can be defined as "The current context of execution," meaning that when a script is running, there is only so much stuff that can be referenced or used, based on what part of our code is running at any given time.

If a variable is not in the "current scope," then it will be unavailable for use.

For example, in general terms, if you declare a variable inside a function, then that variable will be unavailable outside that function. In fact, if you try to do it, it will generate a nasty reference error, as shown below:

const myFunction = () => {
    var x = "this is declared inside myFunction"
    console.log(x)
}

myFunction()
//this is declared inside myFunction

console.log(x)
//error: Uncaught ReferenceError: x is not defined

var

ES6 introduced a new type of scope called "block scope," which is the scope of if or for statements. Basically, anything between brackets is a block.

var variables exist since way before block scope was introduced, so they have no block scope. var declarations are either function-scoped or global-scoped, which were the only two scope types available before ES6.

This means that var declarations will see through blocks and take the scope of the parent element. For example:

if (true) {
    var x = "this is inside a block"
}

console.log(x)
//this is inside a block (is it?)

In the case above, the variable turned into a global variable since we used var to declare it, and the block itself wasn't inside a function.

Take this other example:

const myOtherFunction = () => {
    if (true) {
        var x = "this is inside a block"
    }

    console.log(x)
}

myOtherFunction()
//this is inside a block

console.log(x)
//error: Uncaught ReferenceError: x is not defined

So, as you can see, the variable saw through the block, as expected, but this time it took the scope of the wrapping function. When we tried to reference the variable outside the function, it gave us another error.

So that's basically how var works. Let's see what's the difference with let.

let

let was introduced in ES6 along with const as a new way to declare variables.

let works similarly to var, but this one is block-scoped.

Let's see it in action:

if (true) {
    let x = "this is inside a block"
    console.log(x)
    //this is inside a block (now it is)
}

console.log(x)
//error: Uncaught ReferenceError: x is not defined

Pretty straightforward, isn't it? This time the let declaration helped us keep it inside the block.

Wrapping Up

In general, you should avoid the declaration of global variables, and using var can lead to that without you even noticing.

Today you will find that let is used almost everywhere, and it does have its benefits 👌. It can particularly help you avoid bugs in your applications caused by the use of global variables.

This article was first published on devcore.io. go check it out!