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!
Top comments (0)