ES6

ECMAScript 2015

ECMAScript?

ECMAScript is the specification

JavaScript is the only notable implementation

ES6 = ES2015

ES7 = ES2016

ES8 = ES2017

Latest Versions

How does a feature get into ES?

TC39 Committee

• Meets 6 times a month
• Discuss and move proposals between various "stages"
• Each proposal has a champion (representative)

STAGE 0

• Strawman stage - it exists
• Conversation starters

STAGE 1

• Proposal stage - committee's going to look at it
• Formal reasoning for addition
• High level API with examples
• Working demo, polyfills to older versions

STAGE 2

• Draft stage - committee expects it to make it into a future ES version
• Syntax formalized, experiential mode of implementation

STAGE 3

• Candidate stage - implementation done, feedback collection
• API and semantics are documented
• Implementation is completely compliant with the spec

STAGE 4

• Finished stage - Ready to ship
• Feature will appear in the next ES version

STAGE Information

• https://github.com/tc39/ecma262

ES6

• arrows
• classes
• enhanced object literals
• template strings
• destructuring
• default + rest + spread
• let + const
• iterators + for..of
• generators
• tail calls

• unicode
• modules
• module loaders
• map + set + weakmap + weakset
• proxies
• symbols
• subclassable built-ins
• promises
• math + number + string + array + object APIs
• binary and octal literals
• reflect api

MODULES

var oldModule = (function() {
    'use strict';
    
    // private
    var something = 'something';
   
    // private
    function somethingLogger() {
        // wait, do I have jquery available here?      
        console.log(something);
    }
     
    return {
        // public
        saySomething: function() {
            somethingLogger();
        }
    };
}());

ES6 MODULES

// my-library.js
export function square(x) {
    return x * x;
}

export function addTwo(x) {
    return x + 2;
}

// app.js
import { square, addTwo } from 'my-library';

console.log(square(12)); // 144
console.log(addTwo(2)); // 4

Classes

export class FootballSimulator {
   constructor (homeTeam, awayTeam) {
       this.homeTeam = homeTeam;
       this.awayTeam = awayTeam;
   }
   
   predictWinner() {
       if (this.homeTeam === 'Packers') return this.homeTeam;
       if (this.awayTeam === 'Packers') return this.awayTeam;
       return this.homeTeam; // some other logic
   }
}


game1 = new FootballSimulator('Packers', 'Bears');

console.log(game1.predictWinner()); // Packers

game2 = new FootballSimulator('Vikings', 'Packers');

console.log(game2.predictWinner()); // Packers

How do I start using this?

BABEL

ES2017

ES5

transpiles to

TypeScript

ES2017
(latest spec)

ES3

compiles to

TypeScript

ES =< 2018

Stage 3 Proposals

Stage 3 Proposals

• Function.prototype.toString revision ​
• global
• Rest/Spread Properties
• Asynchronous Iteration
• import()
• RegExp improvements
• Promise.prototype.finally
• BigInt
• Class Fields
• Optional catch binding

Async iterators

async function example() {
  const arrayOfFetchPromises = [
    fetch('1.txt'),
    fetch('2.txt'),
    fetch('3.txt')
  ];

  // Async iterator:
  for await (const item of arrayOfFetchPromises) {
    console.log(item);
  }
}

Rest (object spread)

var arr1 = [1, 2, 3];
var arr2 = [4, 5, 6];
let res = [...arr1, ...arr2];
// res is [1, 2, 3, 4, 5, 6]


let pizza = { orderId: 1, size: 'large' };
let toppingSelection = { orderId: 1, toppings: 'sausage, mushrooms' };

let mergedObj = { ...toppingSelection, ...pizza };
// mergedObj is { orderId: 1, size: 'large', toppings: 'sausage, mushrooms ' }





let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
console.log(x); // 1
console.log(y); // 2
console.log(z); // { a: 3, b: 4 }

Stage 2 Proposals

• function.sent metaproperty
• String.prototype.{trimStart,trimEnd}
• Class and Property Decorator
• Unified class features ​
• Intl.Segmenter and Int.RelativeTimeFormat
• import.meta 
• Numeric separators
• export * as ns from "mod"; statements
• Private methods and accessors

Class Features

class Counter extends HTMLElement {
  #x = 0;

  clicked() {
    this.#x++;
    window.requestAnimationFrame(this.render.bind(this));
  }

  constructor() {
    super();
    this.onclick = this.clicked.bind(this);
  }

  connectedCallback() { this.render(); }

  render() {
    this.textContent = this.#x.toString();
  }
}
window.customElements.define('num-counter', Counter);

Class Features - Decorators

function party(target) {
  target.coolLights = true;
  target.conversations = 'awkward';
}

@party()
class DanceParty() { }

console.log(DanceParty.conversations); // awkward

Stage 1 Proposals

• Observable
• Error stack standardization
• Optional chaining

Optional Chaining

let street = user?.address?.street;



if (myForm.checkValidity?.() === false) {
    console.log('panic');
}