ES6

Introudction

JavaScript is largely a standards-driven language. ES5 is that version of JS that is most widely supported. ES6 is the next version of JavaScript that was just recently approved that comes with a ton of new ways to write JS. ES7 is a future standard of JS that some are already implementing in these higher level languages.

If you’d like to develop with “plain” ES6 and ES7, you can use Babel, the “compiler for writing next generation JavaScript.”

If you’d like to use Ionic and Angular, we recommend TypeScript which will provide similar features as babel, with extra type checking if you choose to use it. If you’re interested in type checking and new OO features, or want to contribute to Angular 2.

Variable

In ES6, we have a new way of specifying variables: let
Before ES6, we only had var which would create a variable scoped to the nearest function.

This was problematic because variables would leak into the rest of the function, especially when used with for loops.

Take this ES5 example:

for(var i in thing) {
}

After the loop, i is still available!

With let, that is no longer an issue. Let creates a variable that is only available in the nearest block.

This is perfect for loops and closures:

for(let i in thing) {
 // i is available
}

// i is NOT available
In general, use let whenever possible

Class

ES6 Classes will feel very natural for those with experience writing Object-Oriented code in languages like Java.
Here’s a simple example:

class Beer {
  sell(location) {
  }
}

class SpottedCow extends Beer {
  constructor() {
    super();
    this.deliciousness = 50;
    this.locations = 'Wisconsin';
    this.name = 'Spotted Cow';
  }
  sell(location) {
    if(location !== 'Wisconsin') {
      console.log("Error");
    }
  }
}

class MillerLite extends Beer {
  constructor() {
    super();
    this.deliciousness = 10;
    this.locations = 'anywhere';
    this.name = 'Miller Lite';
  }
  sell(location) {
    if(location !== 'Miller Lite') {
      console.log("Error");
    }
    // Enh, we'll sell anywhere
    return true;
  }
}

let beer = new SpottedCow();

console.log('I am drinking a delicious ', beer.name, ' that is available ', beer.locations);

beer.sell();

ES6 TEMPLATE STRINGS

ES6 adds the ability to write long inline strings without having to use concatenation or other odd tricks. All we need to do is use backticks at the start and end of the string:

let template = `
  
    
Rufferford's Travels
    
      A most gripping tale of one dog's quest
      for more flavors.
    
  
`;

You can also do string interpolation using ${expression} placeholders:

let x = 5;
let y = 10;
let template = `
  
The sum is ${ x + y }
`;

Arrow Functions

Arrow functions make it easy to write anonymous functions, and also bind to the current context.

class MyClass {
  constructor() {
    this.name = 'Max';

    setTimeout(() => {
      // This prints "Max" since arrow functions bind to our current "this" context.
      console.log(this.name);
    });
  }
}

This is like writing:

var _this = this;
setTimeout(function() {
  console.log(_this.name);
});

But much cleaner.

Promise

Promises make it easier to write asynchronous code compared to using callbacks, and many libraries and Web APIs return promises for async operations, like fetch():

loadUsers() {
  fetch('/api/users').then((response) => {
    return response.json();
  }).then((data) => {
    this.users = data;
  }).catch((ex) => {
    console.error('Error fetching users', ex);
  });
}

We can also create our own promises using the Promise constructor, though we should rarely need to do this as it is almost always better to use a promise from an API like fetch() if possible:

computeAnswerToLifeTheUniverseAndEverything() {
  return new Promise((resolve, reject) => {
    resolve(42);
  });
}

Promises look simple at first but are complex and powerful in practice. Take care to avoid common anti-patterns with their usage.