Arrows Functions

function() {
  var self = this;
  $xhr = $.ajax({ ... })
  $xhr.then(function(){
    self.otherFunc();
  });
}

Old and busted

function() {
  var $xhr = $.ajax({ ... })
  $xhr.then((response) => {
    this.otherFunc(response);
  });
}

New hotness

• Implicit return for an expression
• Optional block for an expression
• Optional parens for a single argument
• Lexical this

[1,2,3].reduce((x, y) => x + y, 0); // 6

Simple reduce

String methods

String.prototype.startsWith

String.prototype.startsWith = function(s) {
  return this.indexOf(s) === 0;
};

String.prototype.endsWith

String.prototype.endsWith = function(s) {
  var t = String(s);
  var index = this.lastIndexOf(t);
  return index >= 0 && index === this.length - t.length;
};

String.prototype.contains

String.prototype.contains = function(s) {
  return this.indexOf(s) !== -1;
};

String.prototype.toArray

String.prototype.toArray = function() {
  return this.split('');
};

String.prototype.repeat

String.prototype.repeat = function(n) {
  var n = n || 1;
  return Array(n + 1).join(this);
}

String.fromCodePoint

String.fromCodePoint(0x41); // -> 'A'

String.prototype.codePointAt

Returns the code point for a given index of a string

Array methods

Array.from

Array.from = function(arrayLike) {
  return Array.prototype.slice.call(arrayLike);
}

Array.of

Array.of = function() {
  return Array.prototype.slice.call(arguments);
};

Array.prototype.find

Returns the first element that matches a predicate

Analogous to _.find

Array.prototype.findIndex

Returns the first index that matches a predicate or -1

Array.prototype.fill

Fill an array with a value based on a starting and ending index

. . .

Rest Parameters

Old and busted

New hotness

args is a real JS Array and not an Array-like object

arguments object is not available along side rest parameters

. . .

Spread Operator

Used to spread an array into positional arguments

function f(x, y, z) {
  return x + y + z;
}
// Pass each elem of array as argument
f(...[1,2,3]) == 6

Destructuring

{ a, b } = { a: 'a', b: 'b', c: 'c', d: 'd'}

Can be deeply nested

Defines variables in current scope

Doesn't throw, can return undefined

[a] = []; // a == undefined

var a = 1;
var b = 3;

[a, b] = [b, a];

Simple swap operation with no temp variables

Map and Sets

Map

var m = new Map();
m.set('hello', 42);
m.get('hello'); // 42

Allows any type of object as a key

Set

var s = new Set();
s.add('hello').add('world');
s.has('hello') == true; // true
s.size == 2; // true
s.delete('world');
s.size == 1; // true
s.clear;

Sets have unique elements

WeakMap

var s = { foo: 'bar' }
var wm = new WeakMap();
wm.set(s, { extra: 42 });
wm.get(s); // { extra: 42 }

Object-only keyed maps with weakly held references

If the external references fall out of scope, they fall out of the map

WeakSet

var ws = new WeakSet();
ws.add({ hello: 42 });
ws.size == undefined; // true

No external references mean it cannot be held in the set

Modules

// lib/math.js
export function sum(x, y) {
  return x + y;
}
export var pi = 3.141593;

A simple module that exports a function and a variable

export default

Sets the default import value

// hello.js
export default function() { console.log('hello') }

import hello from 'hello.js'
hello() // hello

export * from 'math';

Used to easily export everything from another library and provide extensions or overrides

Module loaders

System.import('lib/math').then(function(m) {
  alert("2π = " + m.sum(m.pi, m.pi));
});

Built-in async module loader, with promises

Proxies

Traps and runtime Meta-operations on objects

• get
• set
• has
• deleteProperty
• apply
• construct
• getOwnPropertyDescriptor
• defineProperty
• getPrototypeOf
• setPrototypeOf
• enumerate
• ownKeys
• preventExtensions
• isExtensible

var target = {};
var handler = {
  get: function (receiver, name) {
    return `Hello, ${name}!`;
  }
};

var p = new Proxy(target, handler);
p.world === 'Hello, world!';