Good old JavaScript

Ehm...

Classes

// Constructor
function Hello(name) {
  this.name = name;
}

// Object public method
Hello.prototype.hello = function hello() {
  return 'Hello ' + this.name + '!';
};

// Static method
Hello.sayHelloAll = function () {
  return 'Hello everyone!';
};

Hoisting

function foo() {
    var x = 5;


    console.log(x); // 5

    if (true) {
        // in a block
        var x = 10; // overwrites
    }

    console.log(x); // 10
    console.log(y); // undefined

    var y = 100;
}

Value of this

var obj = {
    val: 5,

    superMethod: function () {
        return this.val;
    }
};

console.log(obj.superMethod()); // 5


function logMethod(method) {
    this.val = 10;
    console.log(method()); // this points to logMethod object
}

logMethod(obj.superMethod); // 10

Classes

class Shape {
    constructor(x, y) {
        this.x = x;
        this.y = y;
    }
    
    logInfo() {
        console.log('X: ' + this.x + ', Y: ' + this.y);
    }
}

With inheritance

class Shape {
    constructor(x, y) {
        this.x = x;
        this.y = y;
    }
    
    logInfo() {
        console.log('X: ' + this.x + ', Y: ' + this.y);
    }
}

class Circle extends Shape {
    constructor(x, y, radius) {
        super(x, y); // parent constructor
        this.radius = radius;
    }

    // override method
    logInfo() {
        console.log('X: ' + this.x + ', Y: ' + this.y + ', Radius: ' + this.radius);
    }
}

With static methods

class Shape {
    constructor(x, y) {
        this.x = x;
        this.y = y;
    }
    
    logInfo() {
        console.log('X: ' + this.x + ', Y: ' + this.y);
    }
}

class Circle extends Shape {
    constructor(x, y, radius) {
        super(x, y);
        this.radius = radius;
    }

    logInfo() {
        console.log('X: ' + this.x + ', Y: ' + this.y + ', Radius: ' + this.radius);
    }

    static hello() {
        console.log("Hello I'm a circle with a static method.");
    }
}

Arrow functions

var odds = evens.map(v => v + 1);
var nums = evens.map((v, i) => v + i);
var pairs = evens.map(v => ({even: v, odd: v + 1}));

document.addEventListener('click', (event) => {
    console.log(event.target);
});

Wow, I know it from C# and Java 8

Implicit this binding

var PageHandler = {

    id: "123456",

    init: function() {
        document.addEventListener("click", (event) => {
            this.doSomething(event.type); // this points to PageHandler
        });
    },

    doSomething: function(type) {
        console.log("Handling " + type  + " for " + this.id);
    }
};

Removes confusion around value of this

Template strings

var name = "Bob"
var time = "today";

console.log(`Hello ${name}, how are you ${time}?`);
// Hello Bob, how are you today?

Support multiline

var multiline = `Multiline
string`;

console.log(multiline); // Multiline
                        // string

var multiline = `Multiline string
                 with indentation`;

console.log(multiline); // Multiline string
                        //                  with indentation

Destructuring

var colors = [ "red", [ "green", "lightgreen" ], "blue" ];

// later

var [ firstColor, [ secondColor ] ] = colors;

console.log(firstColor);  // "red"
console.log(secondColor); // "green"

Arrays

Destructuring

var options = {
    repeat: true,
    save: false
};

// later

var { repeat: localRepeat, save: localSave } = options;

console.log(localRepeat); // true
console.log(localSave);   // false

Objects

Destructuring

var options = {
    repeat: true,
    save: false
};

// later

var { repeat, save } = options;

console.log(repeat); // true
console.log(save);   // false

Objects II

Better parameters options

function f(x, y = 12) {
  // y is 12 if not passed (or passed as undefined)
  return x + y;
}

console.log(f(3)); // 15

Default parameters

Better parameters options

function f(x, ...y) {
  // y is an Array
  return x * y.length;
}
console.log(f(3, 'hello', true)); // 6

Rest parameters

Better parameters options

function f(x, y, z) {
  return x + y + z;
}

// Pass each elem of array as argument
console.log(f(...[1,2,3])) // 6

Spread operator

Better parameters options

function division({ num, divisor }) {
    return num / divisor;
}

console.log(division({ num: 5 });              // Error
console.log(division({ num: 25, divisor: 5 }); // 5

Destructured parameters

We have compilers

Compile ES6 to ES5

Traceur

• by Google
• good ES6 support
• features beyond ES6
  • ES7
  • annotations
  • types
• build systems plugins
• IDE integration

Babel

• formely 6to5
• better ES6 support
• readable code
• build systems plugins
• IDE integration
• more options

What next?

ECMAScript 7?

Static types

• TypeScript by Microsoft
• Flow by Facebook
• AtScript by Google

Fragmentation again?

TypeScript - language of Angular 2

http://blogs.msdn.com/b/typescript/archive/2015/03/05/angular-2-0-built-on-typescript.aspx