June 19, 2020 5 min read

Introduction to Modern JavaScript Features

ECMAScript 6 or ES6 is the second major revision to JavaScript and has begun to in my opinion define the standard for implementing quality code. In this article I'll go over a few major changes and benefits that ES6 not only brings to JavaScript but features I use on a daily basis.

What is ES6?

ECMAScript 2015 is the sixth edition of ECMAScript language. Web browser support for the full language is not yet complete, though major portions are supported. Major web browsers support some features of ES6. However, in order to run ES6 code in all browsers you’ll have to use a transpiler for JavaScript to convert ES6 code into ES5, which is better supported within most popular browsers.

What is a transpiler?

A source-to-source compiler, transcompiler or transpiler is a type of compiler that takes the source code of a program written in one programming language as its input and produces the equivalent source code in another programming language.

List of ES6 Transpilers
Type Description
Babel To transpile ES6 into ES5 for static builds.
Babelify To incorporate babel into your Gulp, Grunt, or npm run build process.
Traceur Compiler ES6 features > ES5. Includes classes, generators, promises, destructuring patterns, default parameters & more.
es6ify Traceur compiler wrapped as a Browserify v2 transform.

I've used Babel on a lot of my projects mainly because I discovered it while learning React. It also seems to be at the time of this writing one of the more popular choices for converting modern JavaScript. In fact, if you've created a React application and used the handy "create-react-app" to get a boilerplate application going then you have used it too. It's one of the packages included.

Useful Features

  • Default Parameters
  • Template Literals
  • Multi-line Strings
  • Destructuring Assignment
  • Enhanced Object Literals
  • Arrow Functions
  • Promises
  • Block-Scoped Constructs Let and Const
  • Classes
  • Modules