es6.md

ECMAScript 6

A transpiler takes ES6 source code and generates ES5 code that can run in every browser - e.g. Traceur or Babeljs.

Modules (import and export)

Export

Export statement is used to export functions, objects or primitives from a given file.

export { name1, name2 };
export { variable1 as name1, variable2 as name2 };
export let name1, name2;
export let name1 = ..., name2 = ...

There are two different types of export:

a) Named exports:

export { myFunction };           // exports a function declared earlier
export const foo = Math.sqrt(2); // exports a constant

b) Default exports (only one per script):

export default function() {}
export default function name() {}
export { name1 as default, name2 };

Re-exporting means adding another module’s exports to those of the current module.

export * from 'other-module-name';
export { name1, name2 } from 'other-module-name';

Import

The import statement is used to import functions, objects or primitives that have been exported from an external module, another script.

import nameForDefault from 'module-name';
import * as name from 'module-name';
import { name } from 'module-name';
import { name as anotherName } from 'module-name';
import { name1, name2 } from 'module-name';

Class

Class definition

class Shape {
    constructor (id, x, y) {
        this.id = id
        this.move(x, y)
    }
    move (x, y) {
        this.x = x
        this.y = y
    }
}

Class inheritance, base class access

class Shape {
    ...
    toString() {
        return `Shape(${this.id})`;
    }
}

class Rectangle extends Shape {
    constructor (id, x, y, width, height) {
        super(id, x, y)
        ...
    }
    toString() {
        return "Rectangle > " + super.toString();
    }
}

Using extends with built-in objects

class myDate extends Date {
    constructor() {
        super();
    }

    getFormattedDate() {
        const months = ['Jan', 'Feb', 'Mar', etc.];
        return this.getDate() + "-" + months[this.getMonth()] + "-" + this.getFullYear();
    }
}

Static members

class Circle extends Shape {
    ...
    static defaultCircle() {
        return new Circle('default', 0, 0, 100)
    }
}

const defCircle = Circle.defaultCircle();

Template literals

By using back-tick you can use variables with strings.

`${variable} and lorem ipsum.`

Or even write multi line text.

`Lorem ipsum
and another line.`

let

In pretty much any other languages, a variable is declared where the declaration is done. But in JS, there is a concept, called hoisting, which actually declares a variable at the top of the function, even if you declared it later. See more

By using let the variable name is now restricted to its block.

function getPonyFullName(pony) {
  if (pony.isChampion) {
    let name = 'Champion ' + pony.name;
    return name;
  }
  // name is not accessible here
  return pony.name;
}

Constants

When you declare a variable with const, it has to be initialized and you can’t assign another value later.

const PONIES_IN_RACE = 6;

Creating objects

Example:

function createPony() {
    let name = 'Rainbow Dash';
    let color = 'blue';
    return { name: name, color: color };
}

can be simplified to

function createPony() {
    let name = 'Rainbow Dash';
    let color = 'blue';
    return { name, color };
}

Destructuring assignment

There is a shortcut for assigning variables from objects or arrays.

const { something, somethingElse } = object;

Will produce the same as:

const something = object.something;
const somethingElse = object.somethingElse;

Spread operator

The spread syntax allows an expression to be expanded.

function myFunction(x, y, z) {}

let args = [0, 1, 2];
myFunction(...args);

Or

let parts = ['shoulders', 'knees'];
let lyrics = ['head', ...parts, 'and', 'toes']; // ["head", "shoulders", "knees", "and", "toes"]

You can also use it for shallow copy of object

const shallowSomeObject = {...someObject};
shallowSomeObject.newProperty = 'some string';

Default parameters and values

const link = function(color = 'red', url = 'http://some-url.com') {
    ...
}

Promises

The Promise object is used for deferred (postponed) and asynchronous computations. A Promise represents an operation that hasn't completed yet, but is expected in the future.

A Promise is in one of these states:

• pending: initial state, not fulfilled or rejected.
• fulfilled: meaning that the operation completed successfully.
• rejected: meaning that the operation failed.

a) Example

let promise = new Promise(function(resolve, reject) {

    // do something
    if (true) {
        resolve('It worked!');
    }
    else {
        reject('An error.'));
    }
});

Here's how you use that promise:

promise
    .then(function(result) {
        console.log(result); // It worked!
    })
    .catch(function(err) {
        console.log(err); // An error.
    });

b) Another example:

function msgAfterTimeout(msg, time) {
    return new Promise((resolve, reject) => {
        setTimeout(() => resolve(msg), time)
    })
}

msgAfterTimeout("Breakfast is served.", 500).then(result => console.log(result));

Arrow functions

The new arrow function syntax is the fat arrow operator (⇒). It is useful for callbacks and anonymous functions.

In ES5:

getUser(login)
    .then(function(user) {
        return getRights(user);
    })
    .then(function(rights) {
        return updateMenu(rights);
    })

Using fat arrow operator in ES6:

getUser(login)
    .then(user => getRights(user))
    .then(rights => updateMenu(rights))

No need to write user ⇒ return getRights(user). But if we did have a block, we would need the explicit return:

getUser(login)
    .then(user => {
        console.log(user);
        return getRights(user);
    })
    .then(rights => updateMenu(rights))