ES6: New variable declarations – let & const
6min read
Before ES6 (ECMASCRIPT 2015) came out the only way to declare a new variable was via the keyword var.
ES6 introduced two new ways for developers to declare them: let & const. Both help to prevent potential bugs by giving the declared variables block scope instead of function scope and also change the way in which we can re-declare und re-assign them.
In order to understand why these changes are helpful we need to understand the problems with variables declared via var first.
Problems with “var”
Variables declared with var can be re-declared and re-assigned within the same execution context as many times as wanted. This “losely” approach of var gives developers a lot of flexibility but also increase the chance of unwanted bugs. Using identical variable names within the same execution context is usually not intended.
Let & Const
Const
It is not possible to either re-declare a variable or re-assign its value within the same scope once it is declared via const.
Note: Mutation is still possible with const
Let
The variable can’t be re-declared but it can be re-assigned.
Block scope vs function scope
Earlier I mentioned that const & let are block scoped while var is function scoped. Block scope means “everything within curly brackets has its own scope” while function scope means “everything within a function has its own scope”.
With function scope (var) a new declared variable with the same name simply overwrites the old one…
…while with block scope (let, const) each new declared variable has only access to the block it is declared in.
However re-assigning it is of course still posible (as long as it is declared via let).
In Block scoped declared variables can not be accessed from outside the block
Only from within the block itself.
Quiz
Do you think you understood the difference between var, let and const? Test your knowledge with a small quiz.
First question:
What is the output of the following code:
Click to show result
Result:
outer loop: 1
inner loop: 1
inner loop: 2
inner loop: 3
Is this what you expected? Or did you expect it to loop in total 12 times (3 times outer loop and 3×3 times inner loop)? Since we declared both variables via var the variables have a function scope. Both variables are named identical so that i from the inner loop simply overwrites the i from the outer loop. When i from the inner loop has finished looping three times (as per its condition), the condition for the outer loop i <= 3 is false as the value of i within the function scope is already 3.
Second question:
Lets assume we want to make the loop from the first question run 3 times outer loop and 3×3 times inner loop (in total 12 times). How would we need to modify the existing code using var (function scope) in order for it to work?
Click to show result
We can fix the loop by assigning a different var for the inner loop and outer loop. While the outer loop remains var i the inner loop gets a unique var j.
for (var i = 1; i <= 3; i++) {
console.log('outer loop: ', i);
for (var j = 1; j <= 3; j++) {
console.log('inner loop: ', j);
}
}
Result:
outer loop: 1
inner loop: 1
inner loop: 2
inner loop: 3
outer loop: 2
inner loop: 1
inner loop: 2
inner loop: 3
outer loop: 3
inner loop: 1
inner loop: 2
inner loop: 3
Since both vars are unique the loop condition is only satisfied after it ran 3 times outer loop and 3x3 times inner loop.
Third question:
What would be the output of the following loop in which we used let instead of var?
Click to show result
Fourth question:
What would be the output of the following loop in which we used const instead?
Click to show result
Leave a Reply
Want to join the discussion?Feel free to contribute!