Template Strings

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

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

If you have ever tried to stick a variable inside a string in JavaScript, you'll know it requires concatenation. Look at all those plus signs and quotes.

With template strings, you can include your variables right inside your string. Just use backticks and you've made a template string.

Template Strings

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

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

Template strings also support multi-line strings.

Previously you may have used string concatenation or the Array join method to make multi-line strings. Now you can just use template strings.

Fat Arrows

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

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

JavaScript loves callbacks. Fat arrow functions allow you to make one-off callback functions with a much simpler syntax.

In this example, we've lost the parenthesis, the curly braces, the return statement, and the word function. This is so much shorter.

Fat Arrows & this

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

let getValue = () => this.value;

The this variable inside a fat arrow function refers to the same this as outside of it.

No more need to make self or that variables and no need to worry about function binding.

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;

Grabbing a sequence of elements out of an array used to be awkward in JavaScript.

With array destructuring, it's really easy.

This syntax works on anything you can iterate over.

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;

I just showed you array destructuring. We have a new object destructuring syntax now too.

This new syntax allows you to assign multiple variables to the values of multiple attributes of an object.

Object Restructuring

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

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

I just showed you array destructuring. We have a new object destructuring syntax now too.

This new syntax allows you to assign multiple variables to the values of multiple attributes of an object.

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}"`));
}

The rest operator is kind of like Ruby's splat operator.

When defining a function, we can use the rest operator (notated by three dots) to capture the rest of our function arguments.

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);

The spread operator is also like the splat operator.

When calling a function, we can use the spread operator to place an array of items into separate arguments in a function call.

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;

You can combine the spread operator with iterable unpacking to capture remaining values in an array.

For example here the variable remaining would be the array [2, 3, 4].

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];

You can also use the spread operator to unpack one array inside of another array. This allows us to combine arrays easily.

So in this example combined would be the array [1, 2, 3, 4].

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')
    });
  },
  // ...
});

Say something here.

Example 1: After

import Ember from 'ember';

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

Say something here.

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));
  },
}

Say something here.

Example 2: After

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

Say something here.

Example 3: Before

import Ember from 'ember';

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

Say something here.

Example 3: After

import Ember from 'ember';

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

Say something here.

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});
},

Say something here.

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});
},

Say something here.