presented by alex voerman
ECMAScript 2015
ES6 = ES2015
ES7 = ES2016
ES8 = ES2017
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();
}
};
}());
// 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
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
let hasWaterfalls = ['rivers', 'lakes', 'waterfalls'].includes('waterfalls');
console.log(hasWaterfalls); // true
let exp = 12 ** 2;
console.log(exp); // 144
ES2017
ES5
transpiles to
ES2017
(latest spec)
ES3
compiles to
Â
Â
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);
}
}
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 }
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);
function party(target) {
target.coolLights = true;
target.conversations = 'awkward';
}
@party()
class DanceParty() { }
console.log(DanceParty.conversations); // awkward
let street = user?.address?.street;
if (myForm.checkValidity?.() === false) {
console.log('panic');
}