28
loading...
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 definedES6 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 definedSo, 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 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 definedPretty straightforward, isn't it? This time the
let declaration helped us keep it inside the block.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!
28