LifeinTECH

In June, ECMAScript 2015 (AKA ES6) was ratified. This release was the most significant update to JavaScript since its inception and delivers a broad range of new features that some would argue have been long overdue.

I had previously published a series of articles (part one, two and three) documenting my JavaScript learning journey, therefore with the release of ECMAScript 2015, it felt like the perfect time to post an update.

As stated in my previous articles, this is not intended to be a tutorial, instead a “cheat sheet” highlighting what I believe to be the most useful new features in ECMAScript 2015.

Declarations

There are two new types of declaration introduced in ECMAScript 2015.

The first is let, which can be used instead of var. let allows you to declare variables that are limited in scope to a specific block, statement, or expression. This is different to var, which defines a variable globally, or locally to an entire function regardless of the block scope.

The second is const, which creates a read-only reference to a value, meaning the variable identifier cannot be reassigned.

Although very simple, these new declarations offer a lot of value. In fact, by default I now use const and let instead of var.

Arrow Functions

An arrow function expression has a shorter syntax than a function expression, as well as implicit returns and does not rebind the value of this. Arrow functions are always anonymous (at least in ECMAScript 2015) and they cannot be used as constructors. Arrow functions are best suited for non-method functions.

An example of a traditional function expression (prior to ECMAScript 2015) can be found below:

var foo = function(value) {
  return value;
};

The same function using an arrow function expression can be found below:

var foo = value => value;

As you can see, the arrow function expression simplifies the syntax by using the “fat arrow” (=>) operator and includes an implicit return.

Destructuring

Destructuring is a convenient way to extract data from arrays, objects, maps and sets into their own variable, even multiple at a time.

The example below highlights the traditional way to extract data from an object and assign it to a variable.

const author = {  
  first: 'Matt',  
  last: 'Bull',  
  twitter: '@mswbull'  
};  
const first = author.first;  
const last = author.last;

As you can see, you end up with very repetitive code (const first, const last, etc.)

The same result using destructuring can be found below:

const { first, last } = author;

This new destructuring syntax (curly bracket on the left of the equals) creates a variable called first and last from the author object.

Hopefully you can already see the value of destructuring, however it becomes even more valuable when data is deeply nested. For example, what you might get returned from a JSON API:

const author = {  
  first: 'Matt',  
  last: 'Bull',  
    links: {  
      social: {  
      twitter: 'https://twitter.com/mswbull',  
      facebook: 'https://facebook.com/mswbull',  
      },  
    web: {  
      blog: 'https://lifeintech.com'  
    }  
  }  
};  
const twitter = author.links.social.twitter;  
const facebook = author.links.social.facebook;

As previously stated, this code can quickly become repetitive, as well as frustrating to maintain.

The same result using destructuring can be found below:

const { twitter, facebook } = author.links.social;
console.log(twitter, facebook);

Note that you can destructure author.links.social and not just author, which demonstrates the power of destructuring with nested data.

Template Strings

Strings in JavaScript have always been a pain point, especially when compared to languages such as Ruby.

Template Strings enable the use of back-ticks instead of single or double quotes for regular strings.

An example of Template Strings, which also contains a placeholder for string substitution (using the ${ } syntax) can be found below:

console.log(`Hi, my name is ${name}.`);

In this example, the string substitution syntax will input the variable name.

As all string substitutions are simply JavaScript expressions, you can substitute more than just variable names. The examples below highlight math, functions and method calls:

console.log(`Maths ${5 * (a + b)}.`); // Math  
console.log(`foo ${fn()} bar`); // Functions  
console.log(`${name.toUpperCase()}.`); // Methods

Finally, Template Strings dramatically simplify multiline strings. Simply include new lines where they are required. The example below highlights a string split across two lines:

console.log(`string text line one
string text line two`);

Although there are many new features included in ECMAScript 2015 (AKA ES6), I expect the new Declarations, Arrow Functions, Destructuring and Template Strings to be the most popular. However, I plan to follow-up with another article covering some of the more advance features, such as classes, promises, modules, etc. Stay tuned!