What is the difference between let and var?

Published June 28, 2021, Modified June 28, 2021

Scope

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:

1const myFunction = () => {
2 var x = "this is declared inside myFunction"
3 console.log(x)
4}
5
6myFunction()
7//this is declared inside myFunction
8
9console.log(x)
10//error: Uncaught ReferenceError: x is not defined
11

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:

1if (true) {
2 var x = "this is inside a block"
3}
4
5console.log(x)
6//this is inside a block (is it?)
7

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:

1const myOtherFunction = () => {
2 if (true) {
3 var x = "this is inside a block"
4 }
5
6 console.log(x)
7}
8
9myOtherFunction()
10//this is inside a block
11
12console.log(x)
13//error: Uncaught ReferenceError: x is not defined
14

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:

1if (true) {
2 let x = "this is inside a block"
3 console.log(x)
4 //this is inside a block (now it is)
5}
6
7console.log(x)
8//error: Uncaught ReferenceError: x is not defined
9

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.

author image

Hi, I'm Leo Cuéllar. I'm a Software Engineer, technical interviewer, and technical writer. I'm also the founder of Devcore. I enjoy writing about front-end and job interview topics.

🌌 Join the Devcore

Subscribe and receive a weekly email with the most popular articles about modern front-end web development, the latest interview questions and the most relevant job opportunities.

No spam. Unsubscribe anytime.