Living in harmony - a brief into to ES6

Living in harmony
A brief intro to ES6
Maryland.JS Meetup
08/27/2014

JONESY ROCKIN’
THE HIGH SOCKS!

ECMA-what?
A (very) brief history…

JAVASCRIPT CREATED
ORIGINALLY NAMED MOCHA, THEN LIVESCRIPT
NETSCAPE NAVIGATOR 2.0
SUPPORT FOR JAVASCRIPT
1995
1996
SPEC WORK BEGINS
ECMA-262 & ECMASCRIPT BORN
1ST EDITION1997
2ND EDITION1998
3RD EDITION
THE FOUNDATION OF MODERN JAVASCRIPT
1999
5TH EDITION
BACKWARDS-COMPAT, STRICT MODE, JSON
2009
6TH EDITION (HARMONY)
FEATURE FREEZE 08/2014, PUBLISH 06/2015
NOW
7TH EDITION
VERY EARLY STAGES, DISCUSSIONS
…
1996

Block-level scoping
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let
function demoLet() {
{
var a = 2;
let b = 2;
}
console.log(a); // 2
console.log(b); // ReferenceError
}

for…of
let arr = ["one", "two", "three"];
for(let i in arr) {
// logs keys: 0, 1, 2
console.log(i);
}
for(let i of arr) {
// logs values: ”one", "two", "three"
console.log(i);
}
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of

Arrow function
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/arrow_functions
function demoArrowFunction2() {
var squared = x => x * x;
console.log(squared(7)); // 49
}

Arrow function
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/arrow_functions
function demoArrowFunction1() {
function Item() {
this.y = 2;
setTimeout(function() {
console.log(this.y); // undefined
}, 500);
setTimeout(() => {
console.log(this.y); // 2
}, 1000);
}
var item = new Item();
}

Default parameters
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/default_parameters
function demoDefaultParams() {
function personalInfo(age, firstName = "John") {
// ooh string templates too!
return `${firstName} ${lastName} is ${age}`;
}
console.log(personalInfo(34, "Rich")); // Rich is 34
console.log(personalInfo(100)); // John is 100
}

Spread operator
function demoSpread() {
// array literals
var fruits = ["apples", "oranges"];
var shoppingList = ["bananas", ...fruits];
console.log(shoppingList); // ["bananas", "apples", "oranges"]
// function arguments
function trySpread(one, two) {
console.log(one, two); // ["apples", "oranges"]
}
trySpread(...fruits);
}
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator

Destructuring
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
function demoDestructure() {
// object destructuring
let someObj = {
x: 20,
y: 30
};
let {x, y} = someObj;
console.log(x); // 20
console.log(y); // 30
}

Destructuring assignment
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
function demoDestructure() {
// array desctructuring
function f() {
return [1, 2, 3];
}
let [first,,third] = f(); // ignore 2nd element
console.log(first); // 1
console.log(third); // 3
}

Comprehensions
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Array_comprehensions
function demoComprehensions() {
var letters = ["A", "B", "C"];
var numbers = [1, 2, 3];
// similar to letters.map
var lowerCased = [for (letter of letters) letter.toLowerCase()];
console.log(lowerCased); // ["a", "b", "c"]
// similar to letters.filter
var filtered = [for (letter of letters) if (letter !== "A") letter];
console.log(filtered); // ["B", "C"]
// multiple arrays
var combined = [for (l of letters) for (n of numbers) l + n];
console.log(combined); // ["A1", "A2", "A3", "B1", ...]
}

Template strings
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/template_strings
function demoTemplateStrings() {
var x = 1;
var y = 1;
console.log(`x + y = ${x + y}`); // x + y = 2
}

Collections: Set
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set
function demoSet() {
var arrayWithDupes = [1, 1, 2, 3, 3];
var deDuped = new Set(arrayWithDupes);
console.log(deDuped); // [1, 2, 3]
console.log(deDuped.has(8)); // false
}

Collections: Map
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map
function demoMap() {
var myMap = new Map();
var someObj = {};
myMap.set(50, "int");
myMap.set("test", "string");
myMap.set(someObj, "{}");
console.log(myMap.get(50)); // "int"
console.log(myMap.get("test")); // "string"
console.log(myMap.get(someObj)); // "{}"
}

Generators
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function*
function demoGenerators() {
function* fibonacci() {
var fn1 = 1, fn2 = 1;
while(1) {
var current = fn2;
fn2 = fn1;
fn1 = fn1 + current;
yield current;
}
}
var sequence = fibonacci();
console.log(sequence.next().value); // 1
}

Classes
class Vehicle {
constructor(name) {
this.name = name;
this.hasWings = false;
}
canFly() {
return this.hasWings;
}
}
}
http://people.mozilla.org/~jorendorff/es6-draft.html#sec-class-definitions

Classes
class Car extends Vehicle {
constructor(name, make, model) {
super(name);
this.hasWings = false;
this.make = make;
this.model = model;
}
}
var myCar = new Car("A-Team Van", "GMC", "Vandura");
console.log(myCar.canFly()); // false
console.log(myCar.make); // "GMC"

Classes
class Plane extends Vehicle {
constructor(name) {
super(name);
this.hasWings = true;
}
}
var myPlane = new Plane("The Wright Flyer");
console.log(myPlane.canFly()); // true

Modules
// lib/math.js
export function sum(x, y) {
return x + y;
}
// app.js (using module)
module math from "lib/math";
console.log(math.sum(2, 3)); // 5
// app.js (using import)
import sum from "lib/math";
console.log(sum(2, 3)); // 5
http://people.mozilla.org/~jorendorff/es6-draft.html#sec-modules

…and all this jazz
• Promises
• New Array functions
• New Math functions
• New Number functions
• New Object functions
• WeakMap
• WeakSet
• Binary and octal literals
• Proxy
• Symbol
• Full Unicode
• …

Light reading
• ECMAScript 6 Draft Spec
• ECMAScript Discussion Archives
• ECMAScript 6 Resources For The Curious JavaScripter
• List of ES6 features
• ECMAScript 6 Support in Mozilla
For your viewing pleasure
• egghead.io ES6 videos
• ECMAScript 6 on YouTube

ECMAScript 6 compatibility table

This talk and code
https://github.com/richleland/es6-talk
Follow me
richleland on github/twitter

Living in harmony - a brief into to ES6

More Related Content

Similar to Living in harmony - a brief into to ES6

More from Richard Leland

Recently uploaded

Living in harmony - a brief into to ES6

Editor's Notes