Template Strings

var pageNumber = "( " + getCount() + " / " + pageTotal + " )";
              

let pageNumber = `( ${getCount()} / ${pageTotal} )`;
              

Template Strings

var poem = [
  "JavaScript = fun",
  "Uncaught ReferenceError",
  "fun is not defined"
].join("\n");

              

let poem = `JavaScript = fun
Uncaught ReferenceError
help is not defined`;

              

Fat Arrows

promise.then(function (data) {
  return data.response;
}).display();
            

promise.then(data => data.response).display();
            

Fat Arrows & this

var self = this;
var getValue = function () {
  return self.value;
});
            

let getValue = () => this.value;
            

Fat Arrows

events.sort(function (e1, e2) {
  var d1 = new Date(e1.startDate);
  var d2 = new Date(e2.startDate);
  return d1 - d2;
});
              

events.sort((e1, e2) => {
  let d1 = new Date(e1.startDate);
  let d2 = new Date(e2.startDate);
  return d1 - d2;
});
              

Destructuring Arrays

var numbers = [1, 4, 2, 3];
var x = numbers[0];
var y = numbers[1];
var z = numbers[2];
              

let numbers = [1, 4, 2, 3];
let [x, y, z] = numbers;
              

Object Destructuring

var emoji = {category: "people", char: "😁", name: "smile"};
var char = emoji.char;
var name = emoji.name;
var category = emoji.category;
              

let emoji = {category: "people", char: "😁", name: "smile"};
let {name, category, char} = emoji;
              

Object Restructuring

function makeEmoji(name, char, category) {
  return {name: name, char: char, category: category};
}
              

function makeEmoji(name, char, category) {
  return {name, char, category};
}
              

Rest

function say(phrase, ...folks) {
  folks.forEach(function (folk) {
    console.log(folk + ' said "' + phrase + '"');
  });
}
            

function say(phrase, ...folks) {
  folks.forEach(folk => console.log(`${folk} said "${phrase}"`));
}
            

Spread

var people = ["Bigelow", "Quil", "Trady Blix", "Lara"]
shout.apply(undefined, "hello world", people)
            

let people = ["Bigelow", "Quil", "Trady Blix", "Lara"];
shout("hello world", ...people);
            

Capture Remaining Values

var numbers = [1, 2, 3, 4];
var first = numbers[0];
var remaining = numbers.slice(1);
            

var numbers = [1, 2, 3, 4];
var [first, ...remaining] = numbers;
            

Combine Arrays

var first = [1, 2];
var second = [3, 4];
var combined = [].concat(first, second);
            

var first = [1, 2];
var second = [3, 4];
var combined = [...first, ...second];
            

Example 1: Before

import Ember from 'ember';

export default Ember.Component.extend({
  // ...
  dragEnter: function dragEnter() {
    Ember.run(function () {
      this.incrementProperty('hoverCounter')
    });
  },
  dragLeave: function dragEnter() {
    Ember.run(function () {
      this.decrementProperty('hoverCounter')
    });
  },
  // ...
});
              

Example 1: After

import Ember from 'ember';

export default Ember.Component.extend({
  // ...
  dragEnter() {
    Ember.run(() => this.incrementProperty('hoverCounter'));
  },
  dragLeave() {
    Ember.run(() => this.decrementProperty('hoverCounter'));
  },
  // ...
});
              

Example 2: Before

actions: {
  addFile: function addFile (data) {
    var file = data.file;
    var name = data.fileName;
    var password = data.password;
    var uploader = Uploader.create();
    uploader.upload(name, file).then(function () {
      this.sendAction('fileUploadedAction', {
      file: file,
      password: password,
    });
    }.bind(this));
  },
}
              

Example 2: After

actions: {
  addFile({file, fileName, password}) {
    let uploader = Uploader.create();
    uploader.upload(fileName, file).then(() => {
      this.sendAction('fileUploadedAction', {file, password});
    });
  },
}
              

Example 3: Before

import Ember from 'ember';

export default Ember.Component.extend({
  // ...
  flashCopyMessage: function(copied, char) {
    var flashMessages = Ember.get(this, 'flashMessages');
    var charHTML = '' + char + '';
    flashMessages.clearMessages();
    if (copied) {
      flashMessages.success('Copied ' + charHTML);
    } else {
      flashMessages.danger("Couldn't copy " + charHTML);
    }
  },
});
              

Example 3: After

import Ember from 'ember';

export default Ember.Component.extend({
  // ...
  flashCopyMessage(copied, char) {
    const flashMessages = Ember.get(this, 'flashMessages');
    const charHTML = `${char}`;
    flashMessages.clearMessages();
    if (copied) {
      flashMessages.success(`Copied ${charHTML}`);
    } else {
      flashMessages.danger(`Couldn't copy ${charHTML}`);
    }
  },
});
              

Example 4: Before

encryptFile: function () {
  var promise = new Ember.RSVP.Promise(function (resolve, reject) {
    var key = this.get('key');
    readFile(this.get('file')).then(function (file) {
      file.data = encrypt(key, file.data);
      this.sendAction('encryptedAction', {file: file, key: key});
      resolve(file);
    }).catch(function (event) {
      reject('An error occurred reading the file.');
    });
  });
  return DS.PromiseObject.create({promise: promise});
},
            

Example 4: After

encryptFile() {
  let promise = new Ember.RSVP.Promise((resolve, reject) => {
    let key = this.get('key');
    readFile(this.get('file')).then(file => {
      file.data = encrypt(key, file.data);
      this.sendAction('encryptedAction', {file, key});
      resolve(file);
    }).catch(event => {
      reject('An error occurred reading the file.');
    });
  });
  return DS.PromiseObject.create({promise});
},