If you’ve done any programming in JavaScript at all, you probably know what the ‘var’ keyword does. But how about the ‘const’ keyword? Maybe you’ve heard of it. Maybe you use it because you know it’s a new feature, but aren’t exactly sure why.
Just like the ‘var’ keyword, ‘const’ helps you define variables in JavaScript. However, ‘const’ is a newish feature and offers more fine-grained control over the behavior of your application’s variables. This new keyword is only one part of a much broader set of new additions to JavaScript that have become available to use with ES6.
In this article, I’m going to explain just what JavaScript ES6 can do and why you should get excited. In fact if you don’t already, you’ll be looking to learn JavaScript as quickly as possible in order to get your hands on it.
First we’re going to look at what ES6 is exactly, and then give some background to it. We’ll then talk about transpiling, as well as some of the other cool features that this standard brings to the table. Finally, we’ll share some key resources if you want to go and learn more about ES6, and where to go next.
If you’d like to skip ahead to one of the sections of the article directly, feel free to use the clickable menu:
- What exactly is ES6?
- A little history
- A note about transpiling
- Common post-ES5 JavaScript features you should know
- Where can I learn more about ES6?
- Wrap-up
1. What exactly is ES6?
Technically speaking, ES6 is a standard that was released in 2015. It tells companies that make browsers how exactly they should make JavaScript work in their respective browsers. “But,” you might ask, “JavaScript is JavaScript… Why would it work differently across browsers?”…
2. A little history
Back in the late 1990s, just like today, we had multiple companies making their own versions of browsers. When JavaScript was invented, each company had its own idea about how exactly JavaScript code should act in their respective browsers. Because this kind of inconsistency is unsustainable, ECMA International, a standards organization, came forward and basically unified all the JavaScript implementations across all browsers. ECMA said, “If you want to make a language that runs on your browser, you should make it behave according to our guidelines so that JavaScript code that a developer writes for one browser will work the same on other browsers.”
*Keep in mind, the set of specifications created by ECMA is called “ECMAScript”— and JavaScript is an implementation of it. This is why you may hear people refer to JavaScript as “ECMAScript”.
Over the years, ECMA has been tweaking its guidelines little by little—adding requirements for new features—meaning that companies that make JavaScript engines have to implement those features in order to keep up. Each time ECMA releases a new set of specifications, companies must change their JavaScript implementations—meaning they have to add the new features added by ECMA.
In June of 2015, ECMA released a major new set of specifications that we know as ES6. We also know it as ES2015—the year it was released. In this major release, there were many new requirements added with the intention of bringing JavaScript up to date with modern programming standards.
Since 2015, ECMA has been releasing a new version of its specifications every year. Each June for the past three years, new requirements have continued to be added. So while you’ll hear about ES6 the most (as it brought the biggest changes), there have since been three releases as of the writing of this article: ES2016, ES2017, and ES2018—each adding new requirements for JavaScript features. The current version is ECMAScript 2018 Language Specification. Take a look if you have the time and see just how much there is to JavaScript.
3. A note about transpiling
What happens if you write some ES6 code for an application and your users want to use it but they haven’t updated to the latest version of the browser that implements ES6? Let’s say your users still use IE8. IE8 does not implement ES6. Will your ES6 code work on their browser? No, it won’t. That’s why we have “transpilers”. In this case, a transpiler basically takes your ES6 code and converts it to pre-ES6 code (“ES5”). It then sends the transpiled JavaScript code so that older versions of browsers that only know ES5 can understand it.
A transpiler called Babel is the de facto standard for transpiling newer JavaScript code to ES5. As a developer, you probably won’t need to run Babel in order to run your own apps because you’re probably using the most up-to-date browsers available. However, if you want to distribute your application written in ES6 to the world, you’ll have to remember that not everyone uses the most up-to-date browsers. You’ll therefore need to use a transpiler to maximize the number of users that can access your application.
In most cases, if you’re using any kind of newer JavaScript framework like React or Angular, the transpiler, along with all the code needed to run it, will be included in the “starter code”. This means that you won’t have to worry about implementing the transpiler yourself because the developers that built the JavaScript frameworks and the starter code have already done the work for you. You can just start coding in ES6 without even having to think about transpiling. It’s very convenient.
So without further ado, let’s dive in to some actual ES6 code.
4. Common post-ES5 JavaScript features you should know
Here are some of the most common features of ES2015 as well as some others from ES2016 – ES2018.
Many features that we associate with newer JavaScript functionality nowadays came in with ES6. But there are lots of other features that came in with ES2016 and after. In this section, I’ll show you many common features that you’ll likely be seeing in existing code bases. Keep in mind that not all of these features came in with ES6, but with your transpiler, you’ll be able to use them all because it will convert them back to ES5.
Keyword “const”
Sometimes we want to make a variable that we don’t want to change (AKA a “constant”)—either by another developer or by ourselves. ES6 gives us access to ‘const’. When we create a constant, if we ever try to re-assign the value, we’ll get an error. Not only is this useful, but it is becoming more and more common to use ‘const’ in place of ‘var’ when we have a variable that we don’t want to change (again, we call it a “constant” because it is not “variable”!).
Below, you can see how to create and change variables using the ‘var’ keyword:
Next, we try the same action using ‘const’:
In the above example, we see that we can create a constant “catName” but cannot re-assign a value to it. If we try, we get an error. This behavior is what we want! Now no one (including us) can change the value! There’s much more to ‘const’ than the example above. You can follow the link at the bottom of this article to learn more about ‘const’.
Template literals
Template literals also help speed up development. They are strings that we define with backticks (`) instead of quotes or double quotes (‘ , “). They allow us to use embedded expressions with %{} so we don’t have to concatenate strings and expressions together. They also help us display html in a format closer to what we actually write in the code. For example, when we start a new line in a template literal, we see the same effect in the html.
In ES5, we have to concatenate (join together) strings with ‘+’. When we want to concatenate strings with variables, we again have to end the string, add ‘+’, and start the string again. And to break onto a new line, we need to add ‘n’ inside our strings to indicate a new line. Take a look at the old way below and notice how many times we have to break up the string:
But in ES6, we use “template literals”. We don’t need to break our strings apart to concatenate variables inside the strings, nor do we need ‘n’! If we simply wrap our messages in backticks, all this is taken care of automatically. Below, you see that we simply wrap our variables in ‘${}’ and leave it inside the string. Easy!
Arrow functions
Arrow functions help us write more concise function expressions (among other things). Let’s first take a look at two ways to create functions before ES6:
The first example above (sayHello1) is called a function statement, and the second (sayHello2) is called a function expression. The difference between these two is outside the scope of this article. Just know that they both create functions that can be called by attaching parentheses to their “names”.
In the next example you’ll see the use of the “fat arrow” added in ES6. These shortened versions are called “arrow functions” and are basically a quicker way to write function expressions.
Note, in ‘sayHello3’, we remove the “function” keyword before the parentheses. Then we add the ‘fat arrow’ after the parentheses and can then define the body of the function as normal.
Note, in ‘sayHello4’, because there’s only one single argument, we can remove the surrounding parentheses. And because the return statement is the only line in the block of code, we don’t need the return keyword and can simply write `Hello ${name}` all on the same line without any parentheses! This really helps make things go quicker once you get used to the syntax!
Iterators
‘For of’ iterators help us iterate over arrays (among other things). Instead of the old way (a basic ‘for’ loop), we use ‘for of’. This ensures we iterate over every element in the array and we don’t have to worry about off-by-one errors that can come from being sloppy with a conventional ‘for’ loop.
As you probably know, JavaScript gives us ‘for’ loops to loop through arrays. Here are a couple ways to iterate over arrays:
And here’s the new and improved ES6 version:
Notice you use the keyword ‘let’ to represent the element name as you iterate over the array. The block of code will be run for every element in the array. You can act on each element by manipulating the variable you define after the ‘let’ keyword above it. In the above example, we just printed the value, but you can do whatever you could do with the original ‘for’ loop!
Default parameters
Default parameters allow us to specify the value of a parameter in the off-chance the function caller does not pass in a value.
If you want to make some parameters optional for your functions (meaning the caller can pass a value or not), but your block still depends on the variable being defined, you’d set a “default variable”. Here’s how you’d do it in ES5:
ES6 gives us an easier way to do it right inside the parentheses when we set our parameters:
Internationalization features
JavaScript can now format and display currency, time, and numbers for many different countries. Here’s an example of how you could take a number and format it in different currencies.
I’m including this as a bonus feature to show you the fun things you can do nowadays with JavaScript. Here’s an example of how you can take a normal number and tell JavaScript to format it based on options you’d pass in when you define the format:
There is no way to do this cool stuff in ES5. The above just shows some fun (and useful) stuff we now have access to thanks to ES6!
5. Where can I learn more about ES6?
There are many places you can go to learn more about ES6 and the newer specifications.
If you feel like reading through the actual documentation of ECMAScript, you can find it in the ES6 (ES2015) document on their website This is where you would also look for the specification for ES2018 as well.
The ES6 features website has a nice list of many new features contrasted with the old way of doing things. If you want a place to just play around with the new features without the overhead of setting up a new project on your computer, you can easily start up a throw-away project on Codepen.
Finally, here are the links to the MDN pages of the features mentioned above. You can learn a lot more about them in these pages:
- Keyword ‘const’
- Arrow Functions
- Template Literals
- Iterator ‘for of’
- Default Parameters
- Internationalization (i18n)
6. Wrap-up
If you want to learn more about coding in general, there’s a whole host of articles available. Here is just a selection: