ES6 & Beyond Copy

Introduction

In this topic we will take a closer look at the term ES6. To be more specific, we will properly explain what it means and we will also investigate the implications of it in our code.

Learning Objectives

  • What is ECMAScript 6 || simply ES6.
  • ES6 Features.
  • What is Babel.

Study

ES6 is a version of JavaScript that was officially released in the summer of 2015. This version included many new features that their main purpose was to make writing JavaScript much easier and cleaner. We have seen these new features throughout this course.

Furthermore, throughout this course you might have seen articles talking about features in ES7 or ES8 or ES2015 or ES2017 etc. This might seem a little bit confusing. Right after the release of ES6, the committee that makes these decisions changed the naming scheme from ‘version numbers’ (ES5, ES6, ES7 etc.) to ‘release years’ (ES2015, ES2016, ES2017 etc.)

  • Go through this article which provides a nice clean explanation and timeline of the various ECMAScript releases.

  • Go through this document which outlines all the new features that showed up in ES6.

Since JavaScript is constantly updating and adding new features that causes some problems with the web-browsers. To be more specific, sometimes takes web-browsers a while to catch up and implement new features once they’ve been released. At the current time all modern browsers (Chrome, Firefox, Safari and Edge) support all of ES6, and most of ES7. However older browsers, such as various versions of Internet Explorer, they don’t. So if you write code that uses these new features, the code won’t run in browsers that do not support it.

This hasn’t been an issue for us since, we are almost definitely using a new browser that automatically updates itself when a new version is released. However if you are selling a product to customers you don’t know which browsers people use.

Babel is the solution to this problem. Babel is a tool that takes your modern JavaScript code and transpiles it to code that older browsers can understand. It can be used from the command line with a simple command, and can also easily be added to your webpack configuration. With the babel-loader.

This is something that you won’t have to worry about in your projects. Most all modern browsers support ES6 features. Having said that, since new features are announced and released constantly you can use Babel to try them out, before they are available in any browser!

Follow the instructions here to install the babel-loader and use it with webpack.

Back to Lesson