An Introduction to ES2015 with JavaScript by Joe Norman

An Introduction to ES2015 with JavaScript by Joe Norman

Intro

The world of JavaScript has changed dramatically over the last decade – with the explosion of web frameworks to the sheer popularity of its usage, we’ve seen the language come into a new standard. This standard has been defined as ECMAScript 2015 (otherwise known as ES6 / ES2015) and comes with a large set of fantastic new features; most of which have been implemented in most modern web browser engines (i.e Chrome’s V8 engine).

Features

As previously mentioned, there’s a great set of new features in ES6. To provide a brief overview of a few of my favourites:

Arrow functions

Otherwise known as ‘fat arrows’, the => symbol is a new syntax feature which allows for shorthand function definition. Some good examples include:

const firstNames = fullNames.filter(name => name.firstName);

This has been around in other languages (C#, Java 8) for some time, so it’s great to have this readily available in JavaScript.

Note: In JavaScript, the arrow functions have a different scoping mechanism in comparison to traditionally defined functions in that they share the same this as the outer/surrounding code; rather than defining their own.

Classes

Tired of not having your traditional class-based hierarchies in JavaScript? Well, rejoice! For we now have Classes in ES6 JavaScript. For example:

CODE

Destructuring

Grabbing values from complex objects in JavaScript can be cumbersome if you plan to reassign them, or use them outside of the original object scope – prior to ES6, this would have to be done individually, manually. Destructuring is a new way to do this with ease; that is, extracting multiple values from data:

code2

Template Strings

Template literals are a new way to create dynamic strings in JavaScript. If you’ve used Interpolation in Strings in other languages such as C# or Ruby, this syntax will be familiar to you:


code3

lexical scoping and constants

Rather than the traditional way of defining variables in JavaScript (i.e using var) we now have 2 now ways to define variables, dependent on their usage: let and const.

The let keyword allows us to define variables we plan to change with lexical scoping in mind – that is, block-scoping (opposed to the traditional function-level scope we receive with var).

The const keyword allows us to define variables in our code that we expect not to change and thus, cannot be changed or mutated. They’re immutable in this sense and provides some robust features to our code.

Maps

Along with the traditional data structures, we have already in JavaScript, we have a number of new awesome types we can use:  Maps.

At a first glance, the Map type looks to be identical to traditional Objects; however, upon further inspection, a number of differences can be spotted.

Firstly, Maps are traditionally iterable – a for loop can iterate through a map. Secondly, you can retrieve the size of a Map easily in comparison to traditional objects. For dynamic objects, maps are ideal when you need to keep track of objects at run-time.

Importing modules

Traditionally, importing content from other JavaScript files has been through the require interface that Node.js provides – but ES6 provides a different mechanism for loading in files:code4

Availability & Support

These are just a few of my favourite features included to JavaScript in ES6 (If I went into any more detail this post would be far too long). For more information (and a comprehensive look) check out https://github.com/lukehoban/es6features.

See this link for the current status of ES6 support in all modern browser engines.

© Ronald James Ltd. 09824756. Q16 Business Exchange, Quorum Business Park, Newcastle upon Tyne, Tyne and Wear, NE12 8BX, United Kingdom. Website by Outlines Design.