AkJS Meetup - ES6++

ES-WAT ?
• “ECMAScript Language Speciﬁcation, Edition 6”
• ECMAScript is the ofﬁcial name of JavaScript due
to Sun’s (at the time) Java trademark.
• “TC-39” = ECMA Technical Committee 39.
Responsible for evolving JavaScript.

https://github.com/tc39/ecma262

ES6 aka ES2015
• block scoping
• destructuring
• default parameter values
• rest parameters
• spread
• modules
• standard modules
• object literals
• classes
• symbols
• proper tail calls
• iterators
• generators
• array comprehensions
• arrow functions
• weak map
• weak map
• maps and sets
• proxies
• reﬂection
• Number and Math
improvements
• regexp improvements
• String improvements
• Function improvements

ES7 aka ES2016
• async functions
• async generators
• exponentiation (**) operator
• typed objects
• class decorators
• object rest properties
• object spread properties
• bind (::) operator
• parallel JavaScript
• destructuring in
comprehensions
• generator comprehensions
• Object Observe
• Object.getOwnPropertyDescript
ors
• class properties
• Array includes
• Object.entries
• Object.values

• ES8 / ES2017
• Macros; e.g. Sweet.js http://sweetjs.org
• SIMD Parallel Instructions: http://
blog.aventine.se/2012/01/22/simd.html

Using Future JavaScript
Today
https://babeljs.io

Babel + CLI
$ npm install -g babel
compile single ﬁle:
babel src.es --out-file compiled.js
compile directory:
babel src --out-dir lib
watch for changes: add source maps:
—-watch --source-maps

Babel + Gulp
$ npm install —save-dev gulp-babel
gulpfile.js
var babel = require('gulp-babel');
gulp.task('default', function() {
return gulp.src('src/**/*.es')
.pipe(babel())
.pipe(gulp.dest('dist'));
});

• http://ﬂowtype.org
• OS X: brew install flow
• Other: Download the ZIP.

http://www.typescriptlang.org
Install:
$ npm install -g
typescript
Compile:
$ tsc src.ts
class Greeter {
constructor(public greeting: string) { }
greet() {
return "<h1>" + this.greeting + "</
h1>";
}
};
var greeter = new Greeter("Hello, world!");
var str = greeter.greet();
document.body.innerHTML = str;

More ES* Tools
https://github.com/addyosmani/es6-tools

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

Block Scope
var list = document.getElementById("list");
for (let i = 1; i <= 5; i++) {
var item = document.createElement("LI");
item.appendChild(document.createTextNode("Item " + i));
item.onclick = function (ev) {
console.log("Item " + i + " is clicked.");
};
list.appendChild(item);
}
Source: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let

Default Arguments
function singularAutoPlural(singular, plural = singular+"s",
rallyingCry = plural + " ATTACK!!!")
{
return [singular, plural, rallyingCry ];
}
//["Gecko","Geckos", "Geckos ATTACK!!!"]
singularAutoPlural(“Gecko”);
//["Fox","Foxes", "Foxes ATTACK!!!"]
singularAutoPlural("Fox","Foxes");
//["Deer", "Deer", "Deer ... change."]
singularAutoPlural("Deer", "Deer", "Deer peaceably and
respectfully petition the government for positive change.")
Source: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters

Rest Arguments
// Before rest parameters, the following could be
found:
function fn(a, b){
var args = Array.prototype.slice.call(arguments,
fn.length);
// ...
}
// to be equivalent of
function fn(a, b, ...args) {
}
Source: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters

Template Strings
// before template strings
console.log(“Non” +
“multilinen” +
“strings”);
// now the equivalent of
console.log(`In ES6,
you can have true
multiline strings`);

Template String Interpolation
// Interpolate expressions into a
// template string
var name = 'AkJS';
console.log(`Welcome to ${name}`);
// = “Welcome to AkJS”
console.log(`The year is
${new Date().getUTCFullYear()}`);
// = “The year is 2015”

Tagged Template Strings
function tag(strings, ...values) {
console.log(strings[0]); // = "Strings come "
console.log(strings[1]); // = “.n Expressions come "
console.log(values[0]); // = "first"
console.log(values[1]); // = “last"
console.log(strings.raw[0]);
// = “Strings come first.n Expressions come last”
return "The manipulated string";
}
var strs = "first";
var exprs = "last"
tag`Strings come ${strs}.n Expressions come ${exprs}`
// = "The manipulated string"

Tagged Template Strings
function SaferHTML(templateData, ...values) {
var s = templateData[0];
for (let i = 1; i < values.length; i++) {
let arg = String(values[i]);
// Escape special characters in the substitution.
s += arg.replace(/&/g, "&")
.replace(/</g, "<")
.replace(/>/g, ">");
// Don't escape special characters in the template.
s += templateData[i];
}
return s;
}
var message =
SaferHTML`<p>${message.sender} has sent you a message.</p>`;
Source: https://hacks.mozilla.org/2015/05/es6-in-depth-template-strings-2/

Modules
//------ lib.js ------
export const sqrt = Math.sqrt;
export function square(x) {
return x * x;
}
export function diag(x, y) {
return sqrt(square(x) + square(y));
}
//------ main.js ------
import { square, diag } from 'lib';
console.log(square(11)); // 121
console.log(diag(4, 3)); // 5
Source: http://www.2ality.com/2014/09/es6-modules-ﬁnal.html

Symbols
var sym1 = Symbol();
var sym2 = Symbol("foo");
var sym3 = Symbol("foo");
sym2.toString(); // Symbol(foo)
sym2 === sym3; // false
var obj = {};
obj[sym2] = "2"
obj[sym3] = "3"
More: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol

Symbols
var sym = new Symbol(); // TypeError
var sym4 = Symbol.for("foo"); // create a
new global symbol
var sym5 = Symbol.for("foo"); // retrieve
the already created symbol
sym4 === sym5; // true
Symbol.for("co.movio.foo"); // use
namespaces to avoid global symbol name
clashes

Generators
function* idMaker(){
var index = 0;
while(index < 3)
yield index++;
}
var gen = idMaker();
console.log(gen.next().value); // 0
console.log(gen.next().value); // undefined
Source: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function*

Iterators
for (let n of idMaker()) {
print(n);
}
function* idMaker(){
var index = 0;
while(index < 3)
yield index++;
}

Destructuring Arrays
var foo = ["one", "two", "three"];
// without destructuring
var one = foo[0];
var two = foo[1];
var three = foo[2];
// with destructuring
var [one, two, three] = foo;
Source: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

Destructuring Objects
var o = {p: 42, q: true};
var {p, q} = o;
console.log(p); // 42
console.log(q); // true
// Assign new variable names
var {p: foo, q: bar} = o;
console.log(foo); // 42
console.log(bar); // true

Destructuring Arguments
function drawES6Chart({size = 'big', cords
= { x: 0, y: 0 }, radius = 25} = {})
{
console.log(size, cords, radius);
// do some chart drawing
}
drawES6Chart({
cords: { x: 18, y: 30 },
radius: 30
});

Destructuring Nested Arrays / Objects
var metadata = {
title: "Scratchpad",
translations: [
{
locale: "de",
localization_tags: [ ],
last_edit: "2014-04-14T08:43:37",
url: "/de/docs/Tools/Scratchpad",
title: "JavaScript-Umgebung"
}
],
url: "/en-US/docs/Tools/Scratchpad"
};
var { title: englishTitle, translations: [{ title: localeTitle }]
} = metadata;
console.log(englishTitle); // "Scratchpad"
console.log(localeTitle); // "JavaScript-Umgebung"

Destructuring Iterators
var people = [
{
name: "Mike Smith",
family: {
mother: "Jane Smith",
father: "Harry Smith",
sister: "Samantha Smith"
},
age: 35
},
{
name: "Tom Jones",
family: {
mother: "Norah Jones",
father: "Richard Jones",
brother: "Howard Jones"
},
age: 25
}
];
for (let {name: n, family: { father: f } } of people) {
console.log("Name: " + n + ", Father: " + f);
}
// "Name: Mike Smith, Father: Harry Smith"
// "Name: Tom Jones, Father: Richard Jones

Spread
var parts = ['shoulder', 'knees'];
var lyrics = ['head', ...parts, 'and', 'toes'];
// = ['head', 'shoulder', 'knees', 'and', 'toes']
let [a, b, ...tail] = [1, 2, 3, 4, 5];
// a = 1, b = 2, tail = [3, 4, 5]
[...idMaker()];
// = [0, 1, 2]
More: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator

More: http://www.2ality.com/2015/04/numbers-math-es6.html

Questions ?
Thanks!
isaac@movio.co
@superstructor

AkJS Meetup - ES6++

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to AkJS Meetup - ES6++

Similar to AkJS Meetup - ES6++ (20)

Recently uploaded

Recently uploaded (20)

AkJS Meetup - ES6++