// Assume age is 55

if (age > 50) {
  let dogAge = age * 7;
  let sentence = 'You’re pretty old. In dog years you are ' + dogAge;
  console.log(sentence); // → You’re pretty old. In dog years you are 385
}

console.log(sentence); // → ReferenceError: sentence is not defined

let

const company = 'Micromata';

// 42 locs later
company = 'Polyas';  // → TypeError: 'company' has already been declared

const

// The old way
var name = 'Hansi';
var age = 5;
var sentence = 'My cat ' + name + 'is ' + age + 'years old.';

console.log(sentence); // → My cat Hansi is 5 years old.

Bisher

// The ES6 way
const name = 'Hansi';
const age = 5;
const sentence = `My cat ${name} is ${age} years old.`;

console.log(sentence); // → My cat Hansi is 5 years old.

`backticks`

const person = {
  name: 'Michael',
  job: 'developer',
  city: 'Kassel',
};

const markup = `
  <div class="person">
    <h2>
      ${person.name} – 
      <span class="job">${person.job}</span>
    </h2>
    <p class="city">${person.city}</p>
  </div>
`;

console.log(markup);

Multi line strings 

// Classic string concatenation
let age = 55;
const dogAge = age * 7;
const sentence = 'You are ' + dogAge + ' years in dog years.';

console.log(sentence); // → You’re pretty old. In dog years you are 385


// Using ES6 template literals
let age = 55;
const sentence = `You are ${age * 7} years in dog years.`;

console.log(sentence); // → You’re pretty old. In dog years you are 385

Expressions

const username = 'Kai';
const age = Math.floor(Math.random()*100);

function query(queryParts, ...params) {
  const query = mysql.prepare(queryParts.join('?'), params);
  return query.execute();
}

query`UPDATE users SET age = ${age} WHERE username = ${username}`;

// Generiert:
// query:   'UPDATE users SET age = ? WHERE username = ?'
// payload: [42, 'Kai']

Tagged template literals

// Functions in ES5
var names = ['Hans', 'Emma'];

var fullNames = names.map(function(name){
  return `${name} Eichenfeld`; 
});

console.log(fullNames); // ["Hans Eichenfeld", "Emma Eichenfeld"]

Introduction

// Arrow functions in ES6
var fullNames = names.map((name) => {
  return `${name} Eichenfeld`; 
});

Single arguments

// Lose `return` keyword and curly braces if you prefer
var fullNames = names.map(name => `${name} Eichenfeld`);

Implicit return

const numbered = names.map((name, index) => `${name} is No. ${index + 1}`);

Multiple arguments

// ES5 binding of `this`
card.addEventListeneI('click', function() {
  // Add closing class to start closing animation
  this.classList.add('closing');
  
  // Add closed class after 500 milliseconds   
  setTimeout(function(){
    this.classList.add('closed'); // Cannot read property 'add' of undefined(…)
    console.log(this); // Window {external: Object, chrome: Object …}
  }, 500);

});

What’s `this`?

// Lexical `this` with ES6 arrow functions
card.addEventListeneI('click', function() {
  // Add closing class to start closing animation
  this.classList.add('closing');
  
  // Add closed class after 500 milliseconds   
  setTimeout(() => {
    this.classList.add('closed'); // Works \o/
  }, 500);

});

Lexical scoping `this`

// Just for fun

const hedgehog = new Promise((resolve) => setTimeout(resolve, 500, 'hedgehog'));
const bunny    = new Promise((resolve) => setTimeout(resolve, 25, 'bunny ftw'));
const competitors = [hedgehog, bunny];

Promise.race(competitors)
    .then((winner) => console.log(winner));

Promise.all(competitors)
    .then((list) => console.log(`All ${list.length} competitors have arrived`));


// Production usecase

const bigData = fetch('http://wikipedia.com').then(response => response.blob());
const timeout = new Promise((resolve, reject) => {
    setTimeout(reject, 3000, new Error('Action took too long'));
});

Promise.race([bigData, timeout])
    .then(somehowConsume)
    .catch((reason) => console.error(reason));

Konkret

Promise.resolve('start')
    .then((step) => new Promise((resolve) => setTimeout(resolve, 500, 1)) )
    .then((step) => 2)
    .then((step) => {
        throw new Error(3);
    })
    .then((step) => 'Will not step in')
    .catch(() => 'In the place to be')
    .then((message) => console.log(message));

Einmal Promise, immer Promise

function calculateBill (price, tax = 0.19, tip = 0.1) {
  return price + (price * tax) + (price * tip);
}

// Use the defaults
console.log(calculateBill(100)); // 129

// Specify custom values
console.log(calculateBill(100, 0.13, 0.15)); // 128

// Specify one of them 
console.log(calculateBill(100, undefined, 0.15)); // 134

Default values

// Invocation 
selectEntries({ start: 0, end: -1 });

Passing object literals

Making that optional

// ES5: Add line A 
function selectEntries(options) {
  options = options || {}; // (A)
  var start = options.start || 0;
  var end = options.end || -1;
  var step = options.step || 1;
  // […]
}

let [start, middle, end] = [1, 2, 3];
console.log({start, middle, end}); // → {start: 1, middle: 2, end: 3}


function makeIterator(obj) {
  let nextIndex = 0;
  const keys = Object.keys(obj);
  return {
    [Symbol.iterator]() {
      return {
        next: () => {
          if (nextIndex >= keys.length) return {done: true};
          const key = keys[nextIndex++];
          return {value: {key, value: obj[key]}, done: false};
      };
    }
  };
}

let [, secondTupel] = makeIterator({
  x: 100,
  y: 200,
  z: 300,
});

console.log(secondTupel); // → {key: "y", value: 200}

Arrays und Iteratoren

let person = {name: 'Kai', age: 30};

/**
 * Object destructuring
 */
let {name} = person;
console.log(name); // → Kai

/**
 * Object destructuring with mapped properties
 */
const {name: boss} = person;
console.log(boss); // → Kai

/**
 * Object destructuring in function parameters
 */
function drawRectangle({x: left = 0, y: top = 0, width = 100, height = width} = {}) {
  console.log('Somehow draw', {left, top, width, height});
}

// → "Somehow draw", {left: 0, top: 75, width: 100, height: 100}
drawRectangle({y: 75});

Objekte

Mehr unter: http://www.2ality.com/2015/01/es6-destructuring.html

/**
 * No brainer
 */
function join(...strings) {
    return strings.join(' ');
}

console.log(join('With', 'great', 'power')); // → "With great power"


/**
 * Semi brainer
 */
let [a, b, ...rest] = [1, 2, 3, 4, 5];

console.log({a, b, rest}); // → {a: 1, b: 2, rest: [3, 4, 5]}


/**
 * Brain cancer
 */
let [start, ...tail] = (function *() {for (let i = 0; i <= 100; i++) yield i})();

// → {start: 0, tail: [1, 2, 3, 4, 5, 6, 7, 8, 9, […], 100]}
console.log({start, tail});

Brain massage

let set = new Set([4, 5, 6, 5, 4]);
let biggerSet = [...set, 7 ,8, 9];
console.log(biggerSet); // -> [4, 5, 6, 7, 8, 9]

let alphabet = 'abcdefghijklmnopqrstuvwxyz';
let hugeSet = [0, 1, 2, 3].concat(biggerSet, ...alphabet);
console.log(hugeSet); // -> [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, "a", "b", "c", […],  "z"];

obj.method(...args) === obj.method.apply(obj, args);

...spread als Inverse zu ...rest

// ES5
function Person(name) {
  this.name = name;
}

Person.prototype.describe = function () {
  return 'Person called '+this.name;
};

var person = new Person("Michael");
console.log(person.describe());   // "Person called Michael"

Constructor functions

// ES5
function Employee(name, title) {
  Person.call(this, name); // super(name)
  this.title = title;
}
Employee.prototype = Object.create(Person.prototype);
Employee.prototype.constructor = Employee;
Employee.prototype.describe = function () {
  return Person.prototype.describe.call(this) // super.describe()
         + ' (' + this.title + ')';
};

Inheritance – Derived Classes

// We have some data
const name = 'Hansi';
const breed = 'Highlander';
const age = 5;

Property value shorthands

// ES5 way to define methods
var modal = {
  open: function(content) {
    // open
  },
  close: function() {
    // close
  }
}

Method definitions

/**
 * Object.assign(target, source_1, source_2, ···)
 * Merges the sources into the target
 */
const obj = { foo: 123 };
Object.assign(obj, { bar: true });

console.log(JSON.stringify(obj)); // {"foo":123,"bar":true}

Object.assign()

Object.assign()

// Another use case is adding methods to objects
Object.assign(SomeClass.prototype, {
  someMethod(arg1, arg2) {
    // […]
  },
  anotherMethod() {
    // […]
  }
});

Object.assign()

// Use case: cloning objects
const myObject = {
  foo: 123,
  bar: true
}

function clone(original) {
  return Object.assign({}, original);
}

const myOtherObject = clone(myObject);
delete myObject.foo;

console.log(JSON.stringify(myObject)); // {"bar":true}
console.log(JSON.stringify(myOtherObject)); // {"foo":123,"bar":true}

Object.is()

// Will make JavaScript less weird

NaN === NaN; // false
Object.is(Nan, NaN); // true

0 === -0; // true
Object.is(0, -0); // false

Modules in ES5 mit Hausmitteln

// moduleBar.js

// Namespace 
var myNamespace = window.myNamespace || {};

// Module (Revealing Module Pattern)
myNamespace.moduleFoo = (function ($) {
  'use strict';

  var _anotherPrivateMethod = function (message) {
    console.info(message);
  };

  document.addEventListener('DOMContentLoaded', function () {
    _anotherPrivateMethod('Hi Private.');
    myNamespace.moduleFoo.yourPublicMethod('Hi public.');
  });
  
})();

// lib.js
export const sqrt = Math.sqrt;
export function square(x) {
    return x * x;
}
export function diag(x, y) {
    return sqrt(square(x) + square(y));
}

//foo.js
import { square, diag } from 'lib';
console.log(square(11)); // 121
console.log(diag(4, 3)); // 5

Multiple exports

//myFunc.js
export default function () { […] } // no semicolon!

// main1.js
import myFunc from 'myFunc';

myFunc();

Single exports