ECMAScript6

Block Scope

if(true) {
    let i = 1;
}

for(let i = 0; i < 10; i++) {
    // Do something really important with i
}

console.log(i); //Reference Error
                    

Constants

const AWESOME_CONSTANT = 10;

AWESOME_CONSTANT = 50;//AWESOME_CONSTANT is read-only
                    

Destructuring

//Matching
let [first, second] = [1, 2, 3, 4];
console.log(first + " and " + second); // 1 and 2

//With rest param (later)
let [first, ...rest] = [1, 2, 3, 4];
console.log(rest); // 2,3,4

//swapping
[first, second] = [second, first];
console.log(first + " and " + second); // 2 and 1
                    

Object Literal

let firstName = "Spongebob";
let lastName = "Squarepants";

console.log({
    firstName,
    lastName,
    getName() {
        return firstName + " " + lastName;
    }
});
                    

Object.is

NaN === NaN; //false

Object.is(NaN, NaN); // true
                    

Object.assign

jQuery.extend functionality

let a = {name: "JavaScript"};
let b = {name: "ECMAScript", isOnTrack: true};

Object.assign(a, b);
/*
    {
        "name": "ECMAScript",
        "isOnTrack": true
    }
*/
                    

Template Strings

let obj = {
    name: "ECMA Script 6",
    is: "almost finished!"
};

console.log(`${obj.name} is 
${obj.is}`);
/*
    ECMA Script 6 is almost finished!
*/
                    

Useful String Utils

let test = "Der Bestatter";

console.log(test.startsWith("Der"));

console.log(test.contains("er B"));

console.log(test.endsWith("atter"));
                    

Useful Number Utils

Number.isInteger(5); //true

Number.isSafeInteger(Math.pow(2, 53)); //false

Number.isNaN(NaN); //true
                    

Arrow Functions

The ES 5 Version with binding this manually

var reorgBuilder = {
    name: "Awesome new Reorg",
    
    createNewReorg: function createNewReorg() {
        return function() {
            console.log(this.name + 
                " will be finished in: 5 months!"
            );
        }.bind(this);
    }
};

var newReorg = reorgBuilder.createNewReorg();
newReorg();
                    

ES 6 Arrow Function and this binding

let reorgBuilder = {
    name: "Awesome new Reorg",
    
    createNewReorg() {
        return () => console.log(this.name + 
            " will be finished in: 5 months!");
    }
};

let newReorg = reorgBuilder.createNewReorg();
newReorg();
                    

Default Params

ES 5 Way

function log(msg) {
    var msg = msg || "Aaaah!";
    console.log(msg);
}
                    

Default Params

ES 6 Way

function log(msg = "Aaaah!") {
    console.log(msg);
}

log(); // Aaaah!
                    

Spread & Rest

var langs = ["C#", "Java", "JavaScript"];

function processLanguages(first, ...rest) {
	console.log(first);
  
	if(rest.length > 0) {
		processLanguages(...rest);
	}
}

processLanguages(...langs);
                    

Named Parameters

let person = { lastName: "Müller" };

function logPerson({ firstName = "Manfred", lastName}) {
    console.log(`Hallo ${firstName} ${lastName}`);
}

logPerson(person); // Hallo Manfred Müller
                    

findIndex(callback[, thisArg])

let array = [
    { name: "Luc Conrad", actor: "Mike Müller" },
    { name: "Anna-Maria Giovanoli", actor: "Barbara Terpoorten" },
    { name: "Fabio Testi", actor: "Reto Stalder" }
];

console.log(
    array.findIndex(
      (element) => element.actor === "Reto Stalder"
    )
);
// 2
                    

find(callback[, thisArg])

let array = [
    { name: "Luc Conrad", actor: "Mike Müller" },
    { name: "Anna-Maria Giovanoli", actor: "Barbara Terpoorten" },
    { name: "Fabio Testi", actor: "Reto Stalder" }
];

console.log(
    array.find(
      (element) => element.actor === "Reto Stalder"
    )
);
// { name: "Fabio Testi", actor: "Reto Stalder" }
                    

fill(value[, start = 0[, end = this.length]])

let array = [1, 2, 3].fill(4);
console.log(array); // 4, 4, 4

array.fill(1, -1, array.length);
console.log(array); // 4, 4, 1
                    

from(arrayLike[, mapFn[, thisArg]])

// ES 5
function noParams() {
    var params = Array.prototype.slice.call(arguments, 0);
    /* Awesome Function stuff */
}

// ES 6
function noParams() {
    var params = Array.from(arguments);
    /* Awesome Function stuff */
}
                    

function*

• functions
• Can be exited and re-entered
• return an iterator
• iterator.next() returns {value:"...", done:true/false}
• next runs function until next yield-Statement
• value: value which the yield statement returns

Generators

function* idMaker(){
    var index = 0;
    while(true)
        yield index++;
}

var generator = idMaker();

console.log(generator.next().value); // 0
console.log(generator.next().value); // 1
console.log(generator.next().value); // 2
                    

Generators

function* fibonacci(i) {
  let a = 0, b = 1;

  while(a < i) {
    yield a;
    [a, b] = [b, a + b];
  }
}

for(let value of fibonacci(1000)) {
  console.log(value);
}
                    

Proxies

• Custom Behaviour for fundamental operations
• property lookup, assignment, enumeration, function invocation, etc

Proxies

var handler = {
    get: function(target, name){
        return name in target?
            target[name] :
            37;
    }
};

var p = new Proxy({}, handler);
p.a = 1;

console.log(p.a); // 1
console.log(p.c); // 37
                    

Symbols

Symbols are always unique

console.log(Symbol() === Symbol()); // false

console.log(Symbol()); // e.g. __$170629571$32$__
                    

WAT?

let map = new Map();

map.set(Symbol(), "Where am I?");
                    

Class

class Car {
  constructor(name) {
    this.name = name;
  }
  
  getName() {
    return this.name;
  }
}

let car = new Car("Elfriede");
console.log(car.getName()); // Elfriede
                    

Child Class

class SpecialCar extends Car {
  constructor(name) {
    super("normal name");
    this.specialName = name;
  }
  
  getSpecialName() {
    return this.specialName;
  }
}

let car = new SpecialCar("Elfriede");
console.log(car.getSpecialName()); // Elfriede
                    

Modules

Exporting

var local = "I'm local";

export default function myAwesomeModuleFunction() {
    /* some awesome function stuff */
}

export var public = "I'm public!";
                    

Modules

Importing

import * as awesomeModule from "lib/myModule";
awesomeModule.myAwesomeModuleFunction();

import as awesomeModule from "lib/myModule";
awesomeModule();

import public as publicVar from "lib/myModule";
console.log(public}; // I'm public!