JavaScript Function Arguments ES6 Style!

TC39 (Ecma Technical Committee 39), the committee that evolves JavaScript, released the ECMAScript 6 (ES6) spec in June of 2015. It contains a ton of new features, including Arrows, Tail Calls, Object Literals, and Destructuring Assignments. One area that received a lot of updates was function arguments. These were enhanced with default values, rest parameters, and the spread operator. In today’s tutorial, I’ll go over each of these features and present examples that illustrate usage.

Using ES6 Syntax

Since 2015, browser vendors’ adoption of ES6 has been somewhat spotty. Hence, most browsers only support some ES6 features: the new Microsoft Edge browser has over eighty percent ES6 support, and FF/Chrome are around 50-60%. Ideally, you would want to test for specific features and employ some sort of shiv if a feature is not supported. Unfortunately, Modernizr-style feature testing for syntax doesn’t work because the ES6 syntax fails JS compilation in pre-ES6 compliant browsers before it runs, so try…catch blocks are useless.

For that reason, your best bet is to use a transpilation tool. These are a special kind of preprocessor — the likes of which include CoffeeScript (JavaScript), Sass (CSS), and HAML (HTML) — that compiles ES6 code into ES5 code, so that it will run on non- or semi- compliant browsers. The three most popular ones right now are Traceur, Babel, and TypeScript. I personally recommend Babel because supports the greatest number of ES6 features. Moreover, it also supports JSX by React, which is a powerful UI framework, and enjoys a vibrant and growing community of development and support.

Using Babel