JavaScript ES6 for Beginners #1: Var vs Let vs Const & the temporal dead zone
With the introduction of let
and const
in ES6, we can now better define our variables depending on our needs. Let’s have a look at the major differences between them.
With the introduction of let
and const
in ES6, we can now better define our variables depending on our needs. Let’s have a look at the major differences between them.
Var
var
are function scoped, which means that if we declare them inside a for
loop (which is a block scope) they will be available even outside of it.
for (var i = 0; i < 10; i++) {
var leak = "I am available outside of the loop";
}
console.log(leak);
// I am available outside of the loop
function myFunc(){
var functionScoped = "I am available inside this function";
console.log(functionScoped);
}
myFunc();
// I am available inside this function
console.log(functionScoped);
// ReferenceError: functionScoped is not defined
In the first example the value of the var
leaked out of the block-scope and could be accessed from outside, whereas in the second example var
was confined inside a function-scope and we could not access it from outside.
Let
let
(and const
) are block scoped, meaning that they will be available only inside of the block where they are declared and its sub-blocks.
// using `let`
let x = "global";
if (x === "global") {
let x = "block-scoped";
console.log(x);
// expected output: block-scoped
}
console.log(x);
// expected output: global
// using `var`
var y = "global";
if (y === "global") {
var y= "block-scoped";
console.log(y);
// expected output: block-scoped
}
console.log(y);
// expected output: block-scoped
As you can see, when we assigned a new value to our let
inside our block-scope, it did not change its value in the global scope, whereas when did the same with our var
it leaked outside of the block-scope and also changed it in the global scope.
Const
Similarly to let
, const
are block-scoped, but they differ in the fact that their value can’t change through re-assignment or can’t be redeclared.
const constant = 'I am a constant';
constant = " I can't be reassigned";
// Uncaught TypeError: Assignment to constant variable
Important This does not mean that const are immutable.
The content of a const
is an Object
const person = {
name: 'Alberto',
age: 25,
}
person.age = 26;
// in this case no error will be raised, we are not re-assigning the variable but just one of its properties.
The temporal dead zone
According to MDN:
In ECMAScript 2015, let bindings are not subject to Variable Hoisting, which means that let declarations do not move to the top of the current execution context. Referencing the variable in the block before the initialization results in a ReferenceError (contrary to a variable declared with var, which will just have the undefined value). The variable is in a “temporal dead zone” from the start of the block until the initialization is processed.
Let’s look at an example:
console.log(i);
var i = "I am a variable";
// expected output: undefined
console.log(j);
let j = "I am a let";
// expected output: ReferenceError: can't access lexical declaration `j' before initialization
var
can be accessed before they are defined, but we can’t access their value.
let
and const
can’t be accessed before we define them.
This happens because var
are subject to hoisting, which means that they are processed before any code is executed. Declaring a var
anywhere is equivalent to declaring it at the top. This is why we can still access the var
but we can’t yet see its content, hence the undefined
result.
When to use Var
, Let
and Const
There is no rule stating where to use each of them and people have different opinions. Here I am going to present to you two opinions from popular developers in the JavaScript community.
The first opinion comes from Mathias Bynes:
- use
const
by default - use
let
only if rebinding is needed. var
should never be used in ES6.
The second opinion comes from Kyle Simpson:
- Use
var
for top-level variables that are shared across many (especially larger) scopes. - Use
let
for localized variables in smaller scopes. - Refactor
let
toconst
only after some code has to be written, and you’re reasonably sure that you’ve got a case where there shouldn’t be variable reassignment.
Which opinion to follow is entirely up to you. As always, do your own research and figure out which one you think is the best.
This was the first part of my ES6 for beginners course, check out the rest of them here.
You can also read this articles on medium, on my profile.
Thank you for reading.
Leave a Comment