Useful ES6 Features

April 21, 2016

1. Arrow function/Fat Arrow function - shorthand using => syntax.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//*************** Before ES6 *********************//
var fullName = function(firstName, lastName){
  return firstName + lastName;
};

//*************** In ES6(using =>) ***************//
var fullName2 = (firstName, lastName) => {
  return firstName + lastName;
};

var fullName3 = (firstName, lastName) => firstName + lastName;

console.log(fullName("Bart ", "Simpson"));    //"Bart Simpson"
console.log(fullName2("Marge ", "Simpson"));  //"Marge Simpson"
console.log(fullName3("Maggie ", "Simpson")); //"Maggie Simpson"

The arrow syntax also omit the need for var that = this assignment or .bind(this).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
//*************** Before ES6 *********************//
var  customer = {
  name: "Jane Doe",

  handleMessage: function (message, handler) {
    handler(message);
  },

  greet: function () {
    var that = this;
    this.handleMessage("Hello, ", function(message){
      console.log(message + that.name);
    });
  }
};

customer.greet(); // "Hello, Jane Doe"

// Another option is to use .bind()
var  customer = {
  name: "Jane Doe",

  handleMessage: function (message, handler) {
    handler(message);
  },

  greet: function () {
    this.handleMessage("Hello, ", function(message){
      console.log(message + this.name); 
    }.bind(this));
  }
};

customer.greet(); // "Hello, Jane Doe"

Now, there is a simple way using the arrow function.

1
2
3
4
5
6
7
8
9
10
11
12
//*************** In ES6(using =>) ***************//
var  customer = {
  name: "Jane Doe",

  handleMessage: (message, handler) => handler(message),

  greet: function () {
    this.handleMessage("Hello, ", (message) => console.log(message + this.name));
  }
};

customer.greet(); // "Hello, Jane Doe"

2. Template Strings

1
2
3
4
5
6
7
8
9
10
11
//*************** Before ES6 *********************//
var salutation = "Hello";
var greeting = salutation + ", World";

console.log(greeting); // "Hello, World"

//*************** In ES6(using ${}) ***************//
var salutation = "Hello";
var greeting = `${salutation}, World`;

console.log(greeting); // "Hello, World"

You can also do computation inside ${} such as the example below:

1
2
3
var  x = 1;
var  y = 2;
console.log(`${x} + ${y} = ${x+y}`); // 1 + 2 = 3

Another cool thing is multi-line string. Using backticks you can easily create a multi-line string.

1
2
3
4
5
6
7
8
9
10
11
12
var weatherNote = 'The weather\n\t'
    + 'today is\n\t'
    + 'sunny';

console.log(weatherNote);

//*************** In ES6(using ``) ***************//
var weatherNote = `The weather
    today is
    sunny`;

console.log(weatherNote);

3. let - allows block scoping to be created.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//*************** Before ES6 *********************//
var x = 100;
if (x) {
  var x = 2;
}

console.log(x); // 2
//*************** In ES6(using let) ***************//
var x = 100;
if (x) {
  let x = 2;
}

console.log(x); // 100

4. const - assign constant variables that should not be re-assign

1
2
3
4
5
6
7
8
9
//*************** Before ES6 *********************//
var API_BASE_URL = "www.asdf.com";
API_BASE_URL = "qwer"; // still able to re-assign API_BASE_URL to another value
console.log(API_BASE_URL); // "qwer"

//************** In ES6(using const) *************//
const API_BASE_URL = "www.asdf.com";
API_BASE_URL = "qwer";
console.log(API_BASE_URL); // Will trigger an error saying attempting to override 'API_BASE_URL' which is a constant.

5. Spread Operator - the 3 dots ...

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//*************** Before ES6 *********************//
var fruits = ["strawberry", "orange", "apple"];
var moreFruits = ["pear", "grape"];
var allFruits = ["pineapple", fruits, "watermelon", moreFruits];

console.log(allFruits);
//allFruits returns ["pineapple", ["strawberry", "orange", "apple"], "watermelon", ["pear", "grape"]]

//*************** In ES6(using ...) ***************//
var fruits = ["strawberry", "orange", "apple"];
var moreFruits = ["pear", "grape"];
var allFruits = ["pineapple", ...fruits, "watermelon", ...moreFruits];

console.log(allFruits);
//allFruits returns ["pineapple", "strawberry", "orange", "apple", "watermelon", "pear", "grape"]

6. Default function parameters

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//*************** Before ES6 ****************************************//
var multiplication = function(x, y){
  return x*y;
}

console.log(multiplication()); // NaN
console.log(multiplication(1, 2)); // 2

//*************** In ES6(default function parameters) ***************//
var multiplication = function(x=0, y=0){
  return x*y;
};

console.log(multiplication()); // 0
console.log(multiplication(1, 2)); // 2

7. Repeat

1
2
3
4
//*************** In ES6(.repeat()) ***************//
var cat = "meow".repeat(5);

console.log(cat); // "meowmeowmeow"

Below are some references that you can take a look to learn more about ES6.

References:

  1. Egghead
  2. lukehoban/es6features
  3. Top 10 ES6 Features Every Busy JavaScript Developer Must Know
  4. MDN
Read More

Ember CLI with CoffeeScript

Ember CLI with CoffeeScript Continue reading

AngularJS - E2E Testing with Protractor

Published on June 13, 2014

AngularJS Services - factory, service, provider

Published on May 22, 2014