After completing this unit, you’ll be able to:
- List the different versions of ECMAScript.
- Explain how to locate and interpret results from the ECMAScript Compatibility table.
OK, that was the bad news. The good news is that browsers are finally catching up, and many of the ES6 features that were once available only with the use of a transpiler such as Babel or Traceur are now good to go in the latest versions of major browsers, such as Google Chrome.
Wow. There is a lot of information on this page. Don’t worry. We help you make sense of it. By default, this page shows you the compatibility table for ES6 features. You can see this in the top bar.
Notice how the 6 is highlighted? This means that you are seeing what’s compatible for ES6. If you wanted to see what was compatible for ES5, you would select the 5. To see what is compatible for ES2016 and above, select 2016+. You get it.
Back to what’s compatible for ES6. Notice how most of the tests are highlighted green? This means they are supported in the current browser, which in this case is the latest version of Google Chrome. If you are using a different browser or version, then you might see something different.
The most important thing to observe here is that right above the Current browser column is a percentage. In this case it is 98%, which indicates how many of the ES6 features are covered in the current browser. Don’t worry about the missing 2%.
If you scroll to the right and look at the percentages associated with many of the other major desktop and mobile browsers, you see other very high percentages. That’s why now is the perfect time to start learning more about the features ES6 offers.
The easiest way to run the sample code included in the rest of this module is to use what is called a Code Playground. If you’d rather use your favorite IDE, that’s OK too. You can just skip this section and move on to the next unit.
CodePen is a popular and easy-to-use development playground. To take it for a test drive, create a pen that simply prints “Hello World” to the console log.
- In your Google Chrome browser, navigate to https://codepen.io/.
- Click Create then New Pen.
- Add the following code to the JS window pane (on the far right).
var message = 'Hello World'; console.log(message); // Shows "Hello World" in console
- Open up the console log by clicking the Console tab in the bottom-left utility menu. If you prefer using the Chrome Developer Tools to access the console log, access it by right-clicking within the browser and selecting Inspect. This shows you errors, while the built-in console that CodePen offers does not.
- Click Save to save and execute the code. If you see a popup that asks you to create a free account, you can either do so at this time or just click the Save as Anonymous link at the bottom to continue without signing up.
- You should see the words “Hello World” appear in the console window.
For the rest of the module, you can use CodePen to execute the code samples yourself. If you sign up for a free account, CodePen allows you to save your pens, access them later, or share them with friends. It takes just a few seconds to sign up.