Modules

import/export

Current method 1: window-banging

<script type="text/javascript" src="utils.js">

(function() {
    this.utils = {

        square: function(x) {
            return x * x;
        },

        diag: function(x, y) {
            return sqrt(square(x) + square(y));
        },

        pi: 3.14159
    };

})(window)

(function() {
    
    var result = window.utils.square(5) * window.utils.pi;

})(window)

<script type="text/javascript" src="utils.js"></script>
<script type="text/javascript" src="main.js"></script>

utils.js

main.js

index.html

Current method 2: commonJS/RequireJS

<script type="text/javascript" src="utils.js">

module.exports = {

    square: function(x) {
        return x * x;
    },

    diag: function(x, y) {
        return sqrt(square(x) + square(y));
    },

    pi: 3.14159
};

var utils = require('./utils.js');
    
var result = utils.square(5) * utils.pi;

utils.js

main.js

Requires preprocessor - Browserify, etc

export function square(x) {
    return x * x;
};

export function diag(x, y) {
    return sqrt(square(x) + square(y));
};

export var pi = 3.14159;

import { square, diag, pi } from 'utils';

var result = square(5) * pi;

utils.js

main.js

import * as utils from 'utils';

var result = utils.square(5) * utils.pi;

or

ES6 modules

Classes

OOP

class Human {
  
  constructor(name) {
    this.name = name;
  }
  greet() {
    console.log('Hi, ' + this.name + '!');
  }

}

Classes

class Human {
  
  constructor(name) {
    this.name = name;
  }
  greet() {
    console.log('Hi, ' + this.name + '!');
  }

}

Classes

var person = new Human('Anzor');
person.greet();
> Hi, Anzor!

class Developer extends Human {
  
  constructor(name) {
    super(name);
    this.greet();
  }
  set codesIn(language) {
    this.language = language;
    console.log(this.name + ' loves ' + this.language);
  }
  
}

Classes: Inheritance

class Developer extends Human {
  
  constructor(name) {
    super(name);
    this.greet();
  }
  set codesIn(language) {
    this.language = language;
    console.log(this.name + ' loves ' + this.language);
  }
  
}

Classes: Inheritance

var dev = new Developer('Anzor');
> Hi, Anzor!

class Developer extends Human {
  
  constructor(name) {
    super(name);
    this.greet();
  }
  set codesIn(language) {
    this.language = language;
    console.log(this.name + ' loves ' + this.language);
  }
  
}

Classes: Inheritance

var dev = new Developer('Anzor');
> Hi, Anzor!

var dev = new Developer('Anzor');
> Hi, Anzor!

dev.codesIn = 'JavaScript';
> Anzor loves JavaScript

Arrow functions

=>

var odds = evens.map(v => v + 1);

var odds = evens.map(function (v) {
  return v + 1;
});

Expression bodies

var nums = evens.map((v, i) => v + i);

var nums = evens.map(function (v, i) {
  return v + i;
});

ES6

< ES6

var user = {
  name: 'Mike',
  greet: function() {
    setInterval(function() {
      console.log('Hi, ' + this.name + '!');
    }, 1000);
  }
};

JS now: 'this'

var user = {
  name: 'Mike',
  greet: function() {
    setInterval(function() {
      console.log('Hi, ' + this.name + '!');
    }, 1000);
  }
};

JS now: 'this'

user.greet();

> Hi,!
> Hi,!
> Hi,!
> Hi,!

var user = {
  name: 'Mike',
  greet: function() {
    setInterval(()=> {
      console.log('Hi, ' + this.name + '!');
    }, 1000);
  }
};

ES6 and arrow functions: 'this'

var user = {
  name: 'Mike',
  greet: function() {
    setInterval(()=> {
      console.log('Hi, ' + this.name + '!');
    }, 1000);
  }
};

ES6 and arrow functions: 'this'

> user.greet();
> Hi, Mike!
> Hi, Mike!
> Hi, Mike!

Function parameters

default + rest + spread

function greet(name = "user") {
  console.log('Hi, ' + name + '!');
}

Defaults

greet('Jim');
> Hi, Jim!

greet();
> Hi, user!

function fn(x, ...y) {
  // y is an Array
  return x * y.length;
}

Rest

fn(5, 5, 6, 7);
> 15

fn(...[1,2,3]);

Spread

fn(1,2,3);

gets resolved to

Variables

let, const

Function scope

function fn () {
  var x = 0;
  if (true) {
    var x = 1; 
  }
  console.log(x); // x = 1
}

fn();
> 0

ES6 Block scoping

function fn () {
  let x = 0;
  if (true) {
    let x = 1; // only inside this `if`
  }
  console.log(x);
}

fn();
> 0

let is the new var

ES6 Block scoping

function fn () {
  let i = 'Hi!';
  for (let i = 0; i < 10; i++) {
      console.log(i); // i = 0...9
  }
  console.log(i); // i = 'Hi!';
}

let is the new var

Constants

const pi = 3.14159;

pi = 2;
> Error

Templates/strings

Templates in strings

var name = "Sarah";

var message = `Hi, ${name}, how's it going?`;

Multi-line strings

var name = `A
            word
            on
            each 
            line`;

Promises

Asynchronous hell

getProducts(productId, function(categoryId) {

    getCategories(categoryId, function(subcategoryId) {
        
        getSubcategories(subcategoryId, function(orderId) {
            
            getOrders(orderId, function(result) {
                console.log(result);
                // done
            }, function(){
                // error
            });

        }, function() {
            // error
        });

    }, function() {
        // error
    });

}, function() {
    // error
});

Promises to the rescue

getProducts(productId)
    .then(function(categoryId) {
        return getCategories(categoryId);
    })
    .then(function(subcategoryId) {
        return getSubcategories(subcategoryId);
    })
    .then(function(orderId) {
        return getOrders(orderId);
    })
    .then(function(result) {
        console.log(result); //done
    })
    .catch(function(e) {
        //error
    });

Promises today

Q - https://github.com/kriskowal/q

$q

ES6 Promises

new Promise(fn)
  .then(fn)
  .catch(fn)

Promise.all(/*...*/)
Promise.race(/*...*/)
Promise.reject(/*...*/)
Promise.resolve(/*...*/)

Browser support

Native

65% (v48+)

74% (v44+)

84% (v13+)

54% (v9+)

Browser support

Transpiled (BabelJS)

v23+

v21+

v9+

v6+

Links

• Compatibility table 
  • http://kangax.github.io/compat-table/es6/
• Babel
  • https://babeljs.io/docs/learn-es2015/
• ES6 cheatsheet
  • http://ricostacruz.com/cheatsheets/es6.html