What is the difference between let and var?
Tags: javascript, let, var, es6
Published: 2021-07-08 23:06:20

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:

```js
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:

```js
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:

```js
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:

```js
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](https://devcore.io/en/javascript/what-is-the-difference-between-let-and-var/). go check it out!