const and let (instead of var)

• const: immutable
• let: mutable
• both are blocked-scope (only available within its scope)

Arrow functions

// ES5
function foo(bar) {
  return 'hello';
}

// ES6
const foo = bar => 'hello';

• Looks cleaner and more readable
• Can be used with map, filter, reduce neatly

Template Literals

// ES5
function foo(bar, barr){
  return 'Hello' + bar + '! How about ' + barr + '?';
}

// ES6
const foo = (bar, barr) => 'Hello ${bar}! How about ${barr}';

Default parameters

const foo = (bar, barr = 0) => {
  return 'Hello ${bar}! You ate ${barr} apples today!'
} 

The above function won’t return undefined even if we forget to pass in the value for barr

Array and object destructuring

// ES5
var profile = {
  firstName: 'bar', 
  lastName: 'foo', 
  age: 28
}

var firstName = profile.firstName;
var lastName = profile.lastName;
var age = profile.age;

// ES6
const profile = {
  firstName: 'bar', 
  lastName: 'foo', 
  age: 28
}

let {firstName, lastName, age} = profile;

• As we can see, we don’t have to individually assign variables
• The same rule applies for arrays
• If the assigned variables have different names to the object keys, then we can do:

  let {firstName, lastName: surname, age} = profile;
  

Import and export

• ES6 allows for the use of import and export to enable us to create separate and reusable components (more contents to come)

Promises

• Promise: an object representing the eventual completion or failure of an asynchronous operation.

• How to create a promise:

    const examplePromise = ((resolve, reject) => {
      if (someCondition) {
        resolve(someValue);
      }
      else {
        reject(someError);
      }
    })
  

  • Takes two callback functions (usually called resolve and reject) that are triggered under different conditions
  • When a promise is resolved, the resolve handler will get triggered on then
  • When rejected, the reject handler will get triggered on catch

• How to consume a returned promise:

    ReturnedPromise.then(onSuccess, onFailure) 
   ReturnedPromise.then(onSuccess).catch(onFailure) // same as above
  

• Chaining:

    doSomething().then(callback).then(callback2);
  

  • Always returns results in .then, otherwise callbacks won’t catch the result of a previous promise
  • It’s possible to chain after a failure

• Error Propagation:

  • A promise chain stops if there’s an exception, and looks down the chain for catch handlers instead.

      doSomething()
        .then(result1 => blah1(result1))
        .then(result2 => blah2(result2))
        .then(result3 => blah3(result3))
        .catch(onFailure);
    

Spread syntax

• Allows an iterable such as:
  • An array or string: to be expanded in places where 0 or more arguments (for function calls) or elements (for array literals) are expected
  • An object: to be expanded in places where 0 or more key-value pairs are expected
• Spread in function calls:
  • Don’t have to use Function.prototype.apply when wanting to use elements of an array as arguments to a function
  • Pass in as arguments to constructor when calling new
• Spread in array literals:

  • Example:

      var foo = ['b', 'c'];
      var bar = ['a', ...foo, 'd'];
      // ['a', 'b', 'c', 'd']
    

      // Array concatenation
      var arr1 = [0, 1, 2];
      var arr2 = [3, 4, 5];
      arr1 = [...arr1, ...arr2];
    

  • Copy an array:

      var arr = [1, 2, 3];
      var arr2 = [...arr];
      console.log(arr2);
      // [1, 2, 3]
    

    However, the references to 1, 2, 3 remain the same…

• Spread in object literals:

  • Shallow-cloning (like Object.assign)

      let obj1 = {1, 2, 3};
      let obj2 = {...obj1};
    

  • For deep-cloning (for objects that contain nested objects)

      let deepClone = JSON.parse(JSON.stringify(obj));
    

• Rest parameter:
  • Allows us to represent an indefinite number of arguments as an array

  • E.g.

      const sum = (...args) => {
        return args.reduce((prev, curr) => {return prev + curr}); 
      }
    		
      console.log(sum(1,2,3));
      // 6