Beruflich Dokumente
Kultur Dokumente
d
5
proudly present
A new @eiximenis film
EcmaScript 6 Unchained
Brendan Eich
@BrendanEich
Directed by
Eduard Toms
@eiximenis
Plain Concepts
http://www.plainconce
pts.com
variable
Arrow functions
EcmaScript has functions as 1st class
Language
Passing functions to functions is very
Functions as parameters
var Brewery = function(name) {
this.name = name;
this.beers = [
{name: "Punk IPA", style:"ipa"},
{name: "5 am", style: "pale ale"},
{name: "Tokio", style: "stout"}];
this.beersByType = function(type) {
return this.beers.filter(function (element) {
return element.style == type;
});
}
this.getBeersWithFullName = function() {
return this.beers.map(function(element) {
return {
name: element.name + " by " + this.name,
style: element.style};
});
}
}
this.beersByType = function(type) {
return this.beers.filter(e => e.syle == type);
}
this.getBeersWithFullName = function() {
this problem. What is the
return this.beers.map(function(element) {
value of this inside the inner
return {
name: element.name + " by " + this.name, function?
style: element.style};
});
}
}
this.getBeersWithFullName = function () {
({
));
}
}
Template strings
Very easy way to create strings with
many values
No more need for string concatenation
String interpolation
No more string concatenation
this.getBeersWithFullName = function () {
return this.beers.map(e => ({
name: e.name + " by " +
this.name,
style: e.style
}));
}
String interpolation
No more string concatenation
this.getBeersWithFullName = function () {
return this.beers.map(e => ({
name: `${e.name} by $
{this.name}`,
style: e.style
}));
}
Yes... We had two markers for strings in ES (single quotes and double quotes) but
for string interoplation we will use a new third marker.
Bonus: String interpolation works on multi-line strings. You can still use \n if
prefer, of course.
literal
Shorthand syntax if property name
Symbol
Unique and immutable data type that
strings
Symbol
Strings are not good for identifiers
var obj = {};
obj[Symbol("a")] = "a";
obj[Symbol.for("b")] = "b";
obj["c"] = "c";
obj.d = "d";
Symbol
There are local and global symbols
Symbol("a") == Symbol("a")
false
Symbol("a") === Symbol("a")
false
Symbol("a") == Symbol("a")
true
Symbol("a") == "a"
Symbol.for("a")
=== Symbol.for("a")
false
true
Symbol.for("a") == "a"
false
//
//
//
//
//
//
Symbol
Prepare your mind for a new set of tweets complaining about
new JavaScript #WTFs
Any sufficiently
advanced
programming
technique is
indistinguishable
from WTF
Sir Arthur C.
Clarke
Destructuring
A mechanism for obtaining parts of
Destructuring
You have an array with two values. How to assign these two
values to two independent variables?
var values = [42, 69];
var x = 42;
var y = 69;
Destructuring
Think a minute... How to swap two variables in one single line of
code?
var x = 42;
var y = 69;
var x = 42;
var y = 69;
[x, y] = [y, x];
Inside foo:
name is value of 1st parameter (or
undefined)
options is value of 2nd parameter (or
undefined)
other is an array with all the others
parmetres (or empty array but never
undefined)
over collections
Allow creation of never-ending
Iterators
Every object can express itself as a collection
let fibonacci = {
[Symbol.iterator]() {
let pre = 0, cur = 1;
return {
next() {
[pre, cur] = [cur, pre + cur];
return { done: false, value:
cur }
}
}
}
}
for (var n of fibonacci) {
// truncate the sequence at 1000
if (n > 1000)
break;
console.log(n);
Generators
Allow easy creation of iterators
Generators are co-routines
Generators
Iterators made easy
var fibonacci = {
[Symbol.iterator]: function*() {
var pre = 0, cur = 1;
for (;;) {
var temp = pre;
pre = cur;
cur += temp;
yield cur;
}
}
}
for (var n of fibonacci) {
// truncate the sequence at 1000
if (n > 1000)
break;
console.log(n);
}
Classes
Syntax sugar
JavaScript is still dynamic
JavaScript inheritance mechanism is
Classes
Prototype inheritance with a new syntax
class Point {
This is equivalent to the
constructor(x, y) {
constructor function pattern
this.x = x;
in ES5
this.y = y;
}
toString() {
return '(' + this.x + ', ' + this.y + ')';
}
}
Classes
Classes allow:
Properties (using the same ES5 get/set syntax)
Inheritance (class Point3D extends Point)
Prototype of Point3D objects will be a Point object
Static methods
Classes define the constructor pseudo-method
Classes
class Point {
constructor(x, y) {
this.x = x;
this.y = y;
}
// More stuff
}
class ColorPoint extends Point {
constructor(x, y, color) {
super(x, y);
this.color = color;
}
// more stuff
}
let cp = new ColorPoint(25, 8, 'green');
Modules
Finally we have a standard and
Modules
Similar to CommonJS modules because
Compact syntax
Prefer single export
Support for cyclic dependences
Similar to AMD modules because
Support for asynchronous module loading
Configurable module loading
Modules
Named exports
//------ 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
Modules
Named exports
//------ 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
Modules
Importing in custom namespace
//------ 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 * as lib from 'lib';
console.log(lib.square(11)); // 121
console.log(lib.diag(4, 3)); // 5
Did you notice the use of * to import all the exports of a module?
Modules
Single export
//------ MyClass.js -----export default class { ... };
//------ main2.js -----import MyClass from 'MyClass';
let inst = new MyClass();
Modules
Modules are statically defined and imported.
CommonJS allows for:
var mylib;
if (Math.random()) {
mylib = require('foo');
} else {
mylib = require('bar');
}
The End
Questions?
Eduard Toms i Avellana
@eiximenis
etomas@gmail.com
http://www.plainconcepts.com
#GAPAND2015
Time for a
beer?