ES6

Polymer 2

Bob Bijvoet

Technical Lead D20

Lars den Bakker

Front-end Dev D20

We're covering...

ES6 (ECMAscript 2015)

Why?

What is it?

New useful features

Live coding

Polymer 2 component

Why?

D20 in Polymer 2

Available in the tooling

Great support!

All evergreen browsers

https://kangax.github.io/compat-table/es6/

Better developer experience

What?

Sixth Edition of JS

New useful features

http://exploringjs.com/es6/index.html

Not covering:

import/export of ESmodules

Generators

etc.

New variable types

function varFunction() {
  var x = 1;
  if (true) {
    var x = 2; // actually the same variable
    console.log(x);  // 2
  }
  console.log(x);  // 2
}

block scoped variables

let & const

function letFunction() {
  let x = 1;
  if (true) {
    let x = 2; // a new variable
    console.log(x);  // 2
  }
  console.log(x);  // 1
}

function readCookie(name) {
  var nameEQ = name + '=';
  var cookies = document.cookie.split(';');
  var trimmedCookie;
  var i;
  var cookie;
    
  for (i = 0; i < cookies.length; i += 1) {
    cookie = cookies[i];
    trimmedCookie = cookie.replace(/^\s*/, '');
    if (trimmedCookie.indexOf(name) === 0) {
      return trimmedCookie.substring(nameEQ.length);
    }
  }
  return null;
}

Evil linter

function readCookie(name) {
  const nameEQ = name + '=';
  const cookies = document.cookie.split(';');
    
  for (let i = 0; i < cookies.length; i += 1) {
    const cookie = cookies[i];
    const trimmedCookie = cookie.replace(/^\s*/, '');
    if (trimmedCookie.indexOf(name) === 0) {
      return trimmedCookie.substring(nameEQ.length);
    }
  }
  return null;
}

Evil linter

New variable types

Always use const

Sometimes use let

Never use var

Template Literals

String with`Backticks`

let name = 'Natascha';
`Hi, ${name}`;

>"Hi, Natascha"

`${name} has ${name.length} letters, not ${name.length - 1}`

>"Natascha has 8 letters, not 7"

`<button>
    Let's go!
</button>`

Variables and expressions in strings

Multiline support

Spread operator

const a = [1, 2, 3];

const b = [...a]; // [1, 2, 3]

spread operator

const a = [1, 2, 3];

const b = [4, 5, 6];

const c = [...a, ...b]; // [1, 2, 3, 4, 5, 6]

const a = [1, 2, 3];

function b(x, y, z) {
  console.log(x, y, z);
}

b(a); // prints [1, 2, 3] undefined undefined
b(...a); // prints 1, 2, 3

spread operator

const a = { a: 1, b: 2 };
const b = { c: 3, d: 3 };

const c = {...a, ...b}; // { a: 1, b: 2, c: 3, d: 4 }

Object spread proposal

Rest operator

function myFunction(a, b) {
  var restArgs = Array.prototype.slice.call(arguments, f.length);
  console.log(a, b, restArgs);
  // do something with the arguments
}

myFunction(1, 2, 3, 4, 5); // logs 1, 2, [3, 4, 5]

The old way

function myFunction(param1, param2, ...restArgs) {
  console.log(param1, param2, restArgs); 
}

myFunction(1, 2, 3, 4, 5, 6); // logs 1, 2, [3, 4, 5]

Rest operator

ES6 way

Arrow functions (1)

Shorthand for anonymous functions

let numbers = [3, 14, 70, 136];

numbers.map(function(value){
    return value / 2;  
});









> [1.5, 7, 35, 68]


numbers.map((value) => {
    return value / 2
});

numbers.map(value => value / 2);

Super short

Arrow functions (2)

Consistent this scope

No new this

function count() {
  this.counter = 0;

  setInterval(() => {
    this.counter++;
  }, 100);
}

//No more, that = this;

//No more bind(this);

Classes

class MyBaseClass {

  constructor() {
    console.log('MyBaseClass instantiated');
  }

  myMethod() {
    console.log('myMethod called');
  }

}

class MyClass extends MyBaseClass {

  constructor() {
    super.constructor();
    console.log('MyClass called');
  }

  myMethod() {
    console.log('myMethod in MyClass called');
  }

}

const myClass = new MyClass();

Classes

Meh.

Please, no AbstractStringBuilderFactoryServiceProvider

Use functions... or mixins

Composition over inheritance

Mixins

const MyMixin = (superClass) => class extends superClass {
  // implementation
}

class MyBaseClass {
 // implementation
}

class MyClass extends MyMxin(MyBaseClass) {
 // implementation
}

class MyComponent extends mix(Polymer.Element).with(Mixin1, Mixin2) {

}

Default function parameters

When no value or undefined is passed

function multiply(a, b = 1) {
  return a * b;
}

multiply(5, 2); // 10
multiply(5, 1); // 5
multiply(5);    // 5

Built-in methods

Object.assign

Array.from

Array.prototype.find

Array.prototype.findIndex

String.prototype.includes

String.prototype.startsWith

String.prototype.repeat

Object.assign

const obj1 = { a: 1 };
const obj2 = { b: 2 };

Object.assign(obj1, obj2);

console.log(obj1) // { a: 1, b: 2}

Object.assign

const myObj = { a: 1, b: 2 };

const newObj = Object.assign({}, myObj);

console.log(newObj); // { a: 1, b: 2};
console.log(myObj === newObj); // false

Object.assign

const myObj = { a: 1, b: 2 };
const myObj2 = { c: 3, d: 4 };

const newObj = Object.assign({}, myObj, myObj2);

console.log(newObj); // { a: 1, b: 2, c: 3, d: 4};

Object.assign

class MyClass {
  someMethod(params) {
    this.a = params.a;
    this.b = params.b;
    this.c = params.c;
    this.d = params.d;
  }
}

class MyClass {
  someMethod(params) {
    Object.assign(this, params);
  }
}

How to start?

Set up linting for your project

We recommend: Use air bnb preset

If mixing es5 and es6 in project:

/* eslint-env es6 */

Linter will teach you es6!