Switching To ES6 (Part 1: let and const)
A pain-free guide to making the leap.
Like writing a review of the iPhone 6 in 2017, this post is already dated. ES6 has been out for a couple years now and new features are continuously being added. However, still like iPhones, there are many people who are content with the older model and who don’t see much sense in switching. Especially since there are still rumors swirling around about browser support issues.
Having finally made the switch myself, I can tell you that grass is indeed greener on the other side — much greener. Many of the features that developers have been begging for for years have arrived and there has been much rejoicing. JavaScript is finally starting to look like a legitimate object-oriented language.
Furthermore, all modern browsers support at least 90% of ES6’s features.
This guide will have several parts and each part will focus on a new feature of ES6. It is meant for anyone wanting to learn more about ES6 — whether you’re one of my LaunchSchool mates who just learned ES5 recently, or you’ve been using ES5 for years, there’s a lot to like and learn about.
This first post will focus on one of the biggest changes to JavaScript — the addition of let and const.
Quick and Pain-Free Guide to ES6
1. “var” is dead! Long live “let” and “const”!
Technically, var is still alive. However, with let and const now in the picture, we have little use for var. Our global namespace will forever be thankful for that.
“But what’s the big deal?” one may ask. “Why the need for the change?”
If you’re familiar with other programming languages, you’ve probably recognized var’s quicks. The biggest of these quirks is that it is not block scoped — any variables declared in a block can be accessed in the global scope. This can be an issue when your application scales and your global name space starts to get crowded.
let and const are block scoped variables, meaning that they can only be accessed in the scope in which they are initialized (as well as any nested scopes within that).
Example:
'use strict';for (let i = 0; i < 5; i++) { // block scope
logResulti();
}function logResulti() {
i = 3;
console.log(i);
}// Result: Error: uninitialized variable "i" in logResultifor (var j = 0; j < 5; j++) {
logResultj();
}function logResultj() {
j = 3;
console.log(j);
}// Result: infinite loop
In the above example, var was able to pollute the global namespace even when it was initialized in the scope of the “for” loop. let, on the other hand, caused an error to be thrown.
Difference Between “let” and “const”
While you may have guessed it already, the difference between let and const is that the latter is a constant (fixed reference) and can only be assigned once.
const x = 5;
x++; // Error
x = "Reassignment attempt"; // ErrorThis is handy because it provides a safe guard against accidental reassignment and will throw an error at runtime.
A word of caution: const is not completely fixed. The object or value it is referencing will remain constant but not the values inside it. In the case of a data storage objects — like an array — the internal values can be added/change/removed.
Say Bye Bye to Hoisting
That’s right, let and const do not hoist like var. Although, if you have been declaring your variables at the top of the scope (as you should be), this shouldn’t be an issue. And if you haven’t, you should really start.
When to use “let” vs “const”
My advice would be to always use const for variable assignment, except for when you know the value will change and you won’t be able to assign it to a new variable(loops/iterations/etc). It makes the intent of your code clearer and provides the safe guards I mentioned above.
The last thing you want is to have a critical piece of data be reassigned to a string later in code base by an intern who didn’t read your documentation.
Stay tuned for the next installment where I talk about the new string interpolation feature (my personal favorite).
While browser support for ES6 is very high, it is still not 100%. If you are worried about backwards compatibility for your application, check out this article on how to easily convert ES6 into ES5.
