SlideShare a Scribd company logo
Front End Workshops
IX.ECMAScript 6. Novelties.
Browser support
Alex Adrià Cuadripani
aadria@visual-engin.com
Mario García Martín
mgarcia@visual-engin.com
Introduction
— INTRODUCTIO —
ECMAScript 6
Also known as ECMAScript 2015 or simply ES6
First working draft published on July 2011
Officially approved on June 2015
Implementation in major JavaScript engines is underway
More information in...
● http://www.ecma-international.org/ecma-262/6.0/index.html
● http://kangax.github.io/compat-table/es6/
ES6 Novelties
— ES6 NOVITATIS —
Default parameters
// ES5
function multiply(a, b, c) {
b = typeof b !== 'undefined' ? b : 1;
c = typeof c !== 'undefined' ? c : 1;
console.log(a * b * c);
}
multiply(5); // 5
// ES6
function multiply(a, b = 1, c = 1) {
console.log(a * b * c);
}
multiply(5); // 5
multiply(5, undefined, 2); // 10
// ES6
function plurify(s, p = s + 's') {
console.log(s + ' ' + p);
}
plurify('beer'); // 'beer beers'
// ES6
function init(options = { 'param1': 1 }) {
console.log(options);
}
init(); // { 'param1': 1 }
init({ 'param': 2 }); // { 'param': 2 }
Additional usage...
Rest parameters
function f(x, ...y) {
console.log(x, y);
}
f(3, 'hello', true); // 3, ['hello', true]
f(3, 'hello', true, false); // 3, ['hello', true, false]
// ES 5
function logAllArguments() {
for (var i=0; i < arguments.length; i++) {
console.log(arguments[i]);
}
}
logAllArguments(1, 2, 3, 4, 5); // 1 2 3 4 5
// ES 6
function logAllArguments(...args) {
for (var i=0; i < args.length; i++) {
console.log(args[i]);
}
}
logAllArguments(1, 2, 3, 4, 5); // 1 2 3 4 5
Could replace usage of the ‘arguments’ variable...
Spread operator
function f(x, y, z) {
console.log(x + y + z);
}
f(...[1, 2, 3]); // 6
// ES 5
var numbers = [-1, 5, 11, 3];
Math.max.apply(Math, numbers); // 11
// ES 6
var numbers = [-1, 5, 11, 3];
Math.max(...numbers); // 11
var x = ['a', 'b'];
var y = ['c'];
var z = ['d', 'e'];
var arr = [...x, ...y, ...z]; // ['a', 'b', 'c', 'd', 'e']
Practical uses
for..of loops
var numbers = [2, 3, 4];
for (var value of numbers) {
console.log(value);
}
// 2, 3, 4
var letters = 'Homer';
for (var item of letters) {
console.log(item);
}
// 'H', 'o', 'm', 'e', 'r'
Do we really need another way of looping?
// Classic way
for (var i=0; i<numbers.length; i++) {
console.log(numbers[i]);
}
// ES 5
numbers.forEach(function(value) {
console.log(value);
});
// for..in
for (var i in numbers) {
console.log(numbers[i]);
}
var a = 5;
var b = 10;
console.log(`Fifteen is ${a + b} and not ${2 * a + b}.`); // 'Fifteen is 15 and not 20.'
Template strings
// ES 5
var greetings = 'Hellon' +
'How are youn' +
'today?';
// ES 6
var greetings = `Hello
How are you
today?`;
Offers support for multiple lines
Destructuring
var homer = {
name: 'Homer',
surname: 'Simpson'
};
var { name, surname } = homer;
console.log(name); // 'Homer'
console.log(surname); // 'Simpson'
// ES 5
var foo = ['one', 'two', 'three'];
var one = foo[0];
var two = foo[1];
var three = foo[2];
// ES 6
var foo = ['one', 'two', 'three'];
var [one, two, three] = foo;
var foo = function() {
return [175, 75];
};
var [height, weight] = foo();
console.log(height); // 175
console.log(weight); // 75
const
const PI;
PI = 3.14; // ERROR
const PI = 3.14;
PI = 3.14159; // ERROR
const PI = 3.14;
Value must be assigned in declaration
Read-only
Block scoped
if (true) {
const PI = 3.14;
}
console.log(PI); // ERROR
Characteristics
let
var fns = [];
for (var i=0; i<4; i++) {
fns.push(function() {
console.log(i);
});
}
fns[0](); // 4
fns[1](); // 4
fns[2](); // 4
fns[3](); // 4
var fns = [];
for (let i=0; i<4; i++) {
fns.push(function() {
console.log(i);
});
}
fns[0](); // 0
fns[1](); // 1
fns[2](); // 2
fns[3](); // 3
Block scopedlet name = 'Homer';
In previous workshops...
“var”... Are we going to see you ever again?
Block-level function declaration
'use strict';
function f() { return 1; }
{
console.log(f()); // 2
function f() { return 2; }
console.log(f()); // 2
}
console.log(f()); // 1
Arrow functions
// ES5
var sum = function(a, b) {
return a + b;
}
// ES6
var sum = (a, b) => a + b;
function Person() {
this.age = 0;
setInterval(() => {
this.age++;
}, 1000);
}
function Person() {
var self = this;
self.age = 0;
setInterval(function() {
self.age++;
}, 1000);
}
// ES 5
var data = ['one', 'two', 'three'];
data.forEach(function(value) {
console.log(value)
});
// ES 6
var data = ['one', 'two', 'three'];
data.forEach(value => {
console.log(value);
});
Class
// ES6
class Media {
constructor(title, duration, isPlaying) {
this.title = title;
this.duration = duration;
this.isPlaying = isPlaying;
}
start() {
this.isPlaying = true;
}
stop() {
this.isPlaying = false;
}
}
// ES5
function Media(title, duration, isPlaying) {
this.title = title;
this.duration = duration;
this.isPlaying = isPlaying;
}
Media.prototype.start = function start() {
this.isPlaying = true;
};
Media.prototype.stop = function stop() {
this.isPlaying = false;
};
Inheritance
// ES6
class Song extends Media {
constructor(title, artist, duration) {
super(title, duration, false);
this.artist = artist;
}
}
class Movie extends Media {
constructor(title, year, duration) {
super(title, duration, false);
this.year = year;
}
}
// ES5
function Song(title, artist, duration) {
Media.call(this, title, duration, false);
this.artist = artist;
}
Song.prototype = Object.create(Media.prototype);
function Movie(title, year, duration) {
Media.call(this, title, duration, false);
this.year = year;
}
Movie.prototype = Object.create(Media.prototype);
Modules
// lib/math.js
export function sum(x, y) {
return x + y;
}
export const PI = 3.14159;
// lib/ux-math.js
export * from 'lib/math';
export const E = 2.7182;
export default function(x) {
return Math.exp(x);
}
// app.js
import * as math from 'lib/math';
console.log(math.sum(math.PI, math.PI));
// otherApp.js
import {sum, PI} from 'lib/math';
console.log(sum(PI, PI));
// app.js
import exp, {PI, E} from 'lib/ux-math';
console.log(exp(PI));
Generators
function* genFunc() {
console.log('First');
yield; // (A)
console.log('Second'); // (B)
}
let genObj = genFunc();
genObj.next()
//First
{ value: undefined, done: false }
genObj.next()
//Second
{ value: undefined, done: true }
function* objectEntries(obj) {
let keys = Object.keys(obj);
for (let key of keys) {
yield [key, obj[key]];
}
}
let batman = { first: 'Bruce', last: 'Wayne' };
for (let [key,value] of objectEntries(batman)) {
console.log(`${key}: ${value}`);
}
// Output:
// first: Bruce
// last: Wayne
Typed Arrays
let typedArray = new Uint8Array([0,1,2]);
console.log(typedArray.length); // 3
typedArray[0] = 5;
let normalArray = [...typedArray]; // [5,1,2]
// The elements are stored in typedArray.buffer.
let dataView = new DataView(typedArray.buffer);
console.log(dataView.getUint8(0)); // 5
Typed Arrays
Map
let map = new Map();
map.set('name','Bruce');
map.set('surname','Wayne');
map.size //2
map.get('name'); //Bruce
map.has('name'); //true
map.delete('name'); //true
map.clear();
map.size //0
let map = new Map([
[1, 'one'],
[2, 'two'],
[3, 'three'],
]);
for (let [key, value] of map) {
console.log(key, value);
}
WeakMap
//keys cannot be primitive types
let key = {a:1};
let wm = new WeakMap();
wm.set(key,"value");
wm.get(key); //you can get "value";
key=undefined;
console.log(wm.get(key));
console.log(wm.size); //undefined
//loop through the keys in an weakmap
doesn't work
for(let i of wm) {
console.log(i);
}
//delete all keys doesn't work
wm.clear();
Set
let set = new Set();
set.add('luke');
set.add('yoda');
set.size //2
set.has('luke'); //true
set.delete('luke'); //true
set.has('luke'); //false
set.size //1
set.clear();
set.size //0
let set = new Set(['luke', 'yoda', 'ben']);
set = new Set().add('luke').add('yoda').add('ben');
for (let x of set) {
console.log(x);
}
WeakSet
//values cannot be primitive types
let weakset = new WeakSet();
let obj = {name: 'Vito Corleone'};
weakset.add(obj);
weakset.add(function(){});
weakset.has({name: 'Vito Corleone'}); //false
weakset.has(obj); //true
obj = undefined;
weakset.delete(obj); //false
weakset.delete(function(){}); //false
weakset.size undefined
//loop through the values in an weakset
doesn't work
for (let x of weakset) {
console.log(x);
}
//delete all values doesn't work
weakset.clear();
Proxy
let handler = {
get: function(target, name){
return name in target?
target[name] :
'not a jedi';
}
};
let proxy = new Proxy({}, handler);
proxy.a = 'ben';
proxy.b = 'yoda';
console.log(proxy.a, proxy.b); // ben, yoda
console.log(proxy.c); // not a jedi
let target = {}; // Start with an empty object
let handler = {}; // Don’t intercept anything
let {proxy, revoke} = Proxy.revocable(target,
handler);
proxy.foo = 123;
console.log(proxy.foo); // 123
revoke();
console.log(proxy.foo); // TypeError: Revoked
Promises
var promise = new Promise(
function (resolve, reject) {
...
if (...) {
resolve(value); // success
} else {
reject(reason); // failure
}
});
● Pending: the result hasn’t been computed, yet
● Fulfilled: the result was computed successfully
● Rejected: a failure occurred during computation
Promises
function httpGet(url) {
return new Promise(
function (resolve, reject) {
var request = new XMLHttpRequest();
request.onreadystatechange = function () {
if (this.status === 200) {
resolve(this.response);
//success
} else {
// Something went wrong (404 etc.)
reject(new Error(this.statusText));
}
}
Promises
request.onerror = function () {
reject(new Error('XMLHttpRequest Error: '+this.statusText));
};
request.open('GET', url);
request.send();
});
}
Promises
httpGet('http://myserver.com/example')
.then(
function (value) {
console.log('Contents: ' + value);
},
function (reason) {
console.error('Something went wrong', reason);
});
Object static methods
var original = {};
var merged = {};
original.a = 1;
merged.b = 2;
Object.assign(original, merged);
console.log(original.b) //2
Object.assign(target, source_1, ..., source_n)
Object.is(value1, value2)
Object.is(2, 2) //true
Object.is('test', 'aaa') //false
Object.is(NaN, NaN) //true
Object.is(-0, +0) //false
Object static methods
var human = {
sleep() {
return 'sleeping...';
}
};
var worker = {
work() {
return 'working...';
},
};
Object.setPrototypeOf(worker, human);
worker.sleep(); //sleeping...
Object.setPrototypeOf(obj, prototype);
String static methods
let name = 'Bob';
String.raw`Hin${name}!`;
// 'HinBob!', substitutions are processed.
String.raw`templateString`;
String.fromCodePoint(42); // "*"
String.fromCodePoint(65, 90); // "AZ"
String.fromCodePoint(0x404); // "u0404"
String.fromCodePoint('_'); // RangeError
String.fromCodePoint(num1[, ...[, numN]])
String.prototype methods
'abc'.repeat(2); // 'abcabc'
String.prototype.repeat
'Ser, o no ser.'.startsWith('Ser'); // true
String.prototype.startsWith
'Ser, o no ser.'.endsWith('ser.'); // true
String.prototype.endsWith
'Ser, o no ser.'.includes('no'); // true
String.prototype.includes
Array static methods
// Array-like primitive types to Array
Array.from([1, 2, 3]);
//[1, 2, 3]
// Any iterable object...
// Set
var s = new Set(["foo", window]);
Array.from(s);
// ["foo", window]
Array.from(arrayLike[, mapFn[, thisArg]])
// Map
var m = new Map([[1, 2], [2, 4], [4, 8]]);
Array.from(m);
// [[1, 2], [2, 4], [4, 8]]
// String
Array.from("foo");
// ["f", "o", "o"]
// Using an arrow function as the map
function to manipulate the elements
Array.from([1, 2, 3], x => x + x);
// [2, 4, 6]
Array static methods
Array.of(1); // [1]
Array.of(1, 2, 3); // [1, 2, 3]
Array.of(undefined); // [undefined]
//The difference between Array.of() and the Array constructor is in the handling of
//integer arguments: Array.of(42) creates an array with a single element, 42, whereas
//Array(42) creates an array with 42 elements, each of which is undefined.
Array.of(element0[, element1[, ...[, elementN]]])
Array.prototype methods
Array.from([ 'a', 'b' ].keys()); //[ 0, 1 ]
Array.prototype.keys()
Array.from([ 'a', 'b' ].values()); //[ 'a', 'b' ]
Array.prototype.values()
Array.from([ 'a', 'b' ].entries()); //[ [ 0, 'a' ], [ 1, 'b' ] ]
for (let [index, elem] of ['a', 'b'].entries()) {
console.log(index, elem);
}
Array.prototype.entries()
Array.prototype methods
[6, -5, 8].find(x => x < 0); //-5
Array.prototype.find(predicate, thisArg?)
[6, -5, 8].findIndex(x => x < 0); //1
Array.prototype.findIndex(predicate, thisArg?)
['a', 'b', 'c'].fill(7); //[ 7, 7, 7 ]
['a', 'b', 'c'].fill(7, 1, 2); //[ 'a', 7, 'c' ]
Array.prototype.fill(value, start?, end?)
Number properties
Number.isFinite(Infinity);
//false
Number.isFinite(NaN);
//false
Number.isFinite(number)
Number.isInteger(number)
Number.isFinite(123);
//true
Number.isInteger(-17);
//true
Number.isInteger(33);
//true
Number.isInteger(33.1);
//false
Number.isInteger('33');
//false
Number.isInteger(NaN);
//false
Number.isInteger(Infinity);
//false
Number properties
Number.isSafeInteger(number)
Number.isSafeInteger(3); // true
Number.isSafeInteger(Math.pow(2, 53)); // false
Number.isSafeInteger(Math.pow(2, 53) - 1); // true
Number.isSafeInteger(NaN); // false
Number.isSafeInteger(Infinity); // false
Number.isSafeInteger('3'); // false
Number.isSafeInteger(3.1); // false
Number.isSafeInteger(3.0); // true
Number.isNAN(number)
Number.isNaN(NaN); // true
Number.isNaN(Number.NaN); // true
Number.isNaN(0 / 0) // true
Number.isNaN("NaN"); // false
Number.isNaN(undefined); // false
Number.isNaN({}); // false
Number.isNaN("blabla"); // false
Number.isNaN(true); // false
Number.isNaN(null); // false
Number.isNaN(37); // false
Math methods
Math.sign(3); // 1
Math.sign(-3); // -1
Math.sign('-3'); // -1
Math.sign(0); // 0
Math.sign(-0); // -0
Math.sign(number)
Math.trunc(13.37); // 13
Math.trunc(0.123); // 0
Math.trunc(-0.123); // -0
Math.trunc('-1.123'); // -1
Math.trunc(number)
Math methods
Math.sinh(0); // 0
Math.sinh(1); // 1.1752011936438014
Math.sinh(number)
Math.log10(2); // 0.3010299956639812
Math.log10(1); // 0
Math.log10(number)
More information in...
● http://blog.teamtreehouse.com/get-started-ecmascript-6
● https://babeljs.io/docs/learn-es2015/
● http://es6-features.org/
● Exploring ES6, by Dr. Axel Rauschmayer (http://exploringjs.com/es6/index.html)
● Setting up ES6, by Dr. Axel Rauschmayer (https://leanpub.com/setting-up-es6/read)
● https://developer.mozilla.org/en-
US/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_6_support_in_Mozilla
Tools
— INSTRUMENTUM —
Browser support...
Browser’s edge versions
Intended mainly for developers (and crazy users)
Frequent updates
Capable of running side by side with stable version
Chrome
Canary
Firefox
nightly
Opera
beta
WebKit
nightly
Transpilers
Compile from ES6 source code into ES5 source code
Offer support for ES6 features, to various degrees
More information in...
● https://www.google.com/chrome/browser/canary.html
● https://nightly.mozilla.org/
● http://www.opera.com/es/computer/beta
● http://nightly.webkit.org/
● https://github.com/google/traceur-compiler
● https://babeljs.io/
Workshop 10: ECMAScript 6

More Related Content

What's hot

Reactive, component 그리고 angular2
Reactive, component 그리고  angular2Reactive, component 그리고  angular2
Reactive, component 그리고 angular2
Jeado Ko
 
ES2015 workflows
ES2015 workflowsES2015 workflows
ES2015 workflows
Jarrod Overson
 
Asynchronous programming done right - Node.js
Asynchronous programming done right - Node.jsAsynchronous programming done right - Node.js
Asynchronous programming done right - Node.js
Piotr Pelczar
 
Javascript: the important bits
Javascript: the important bitsJavascript: the important bits
Javascript: the important bits
Chris Saylor
 
ES6 - Next Generation Javascript
ES6 - Next Generation JavascriptES6 - Next Generation Javascript
ES6 - Next Generation Javascript
RameshNair6
 
Jasmine - why JS tests don't smell fishy
Jasmine - why JS tests don't smell fishyJasmine - why JS tests don't smell fishy
Jasmine - why JS tests don't smell fishy
Igor Napierala
 
AngularJS with TypeScript and Windows Azure Mobile Services
AngularJS with TypeScript and Windows Azure Mobile ServicesAngularJS with TypeScript and Windows Azure Mobile Services
AngularJS with TypeScript and Windows Azure Mobile Services
Rainer Stropek
 
Map kit light
Map kit lightMap kit light
Map kit light
CocoaHeads France
 
Testing Backbone applications with Jasmine
Testing Backbone applications with JasmineTesting Backbone applications with Jasmine
Testing Backbone applications with Jasmine
Leon van der Grient
 
Unit testing with mocha
Unit testing with mochaUnit testing with mocha
Unit testing with mocha
Revath S Kumar
 
Oojs 1.1
Oojs 1.1Oojs 1.1
Oojs 1.1
Rodica Dada
 
JavaScript Unit Testing with Jasmine
JavaScript Unit Testing with JasmineJavaScript Unit Testing with Jasmine
JavaScript Unit Testing with Jasmine
Raimonds Simanovskis
 
Advanced javascript
Advanced javascriptAdvanced javascript
Advanced javascript
Doeun KOCH
 
Testing Javascript with Jasmine
Testing Javascript with JasmineTesting Javascript with Jasmine
Testing Javascript with Jasmine
Tim Tyrrell
 
Testing your javascript code with jasmine
Testing your javascript code with jasmineTesting your javascript code with jasmine
Testing your javascript code with jasmine
Rubyc Slides
 
Unit testing JavaScript using Mocha and Node
Unit testing JavaScript using Mocha and NodeUnit testing JavaScript using Mocha and Node
Unit testing JavaScript using Mocha and Node
Josh Mock
 
Component lifecycle hooks in Angular 2.0
Component lifecycle hooks in Angular 2.0Component lifecycle hooks in Angular 2.0
Component lifecycle hooks in Angular 2.0
Eyal Vardi
 
AST - the only true tool for building JavaScript
AST - the only true tool for building JavaScriptAST - the only true tool for building JavaScript
AST - the only true tool for building JavaScript
Ingvar Stepanyan
 
Angular 2 Architecture
Angular 2 ArchitectureAngular 2 Architecture
Angular 2 Architecture
Eyal Vardi
 
Object-Oriented Javascript
Object-Oriented JavascriptObject-Oriented Javascript
Object-Oriented Javascript
kvangork
 

What's hot (20)

Reactive, component 그리고 angular2
Reactive, component 그리고  angular2Reactive, component 그리고  angular2
Reactive, component 그리고 angular2
 
ES2015 workflows
ES2015 workflowsES2015 workflows
ES2015 workflows
 
Asynchronous programming done right - Node.js
Asynchronous programming done right - Node.jsAsynchronous programming done right - Node.js
Asynchronous programming done right - Node.js
 
Javascript: the important bits
Javascript: the important bitsJavascript: the important bits
Javascript: the important bits
 
ES6 - Next Generation Javascript
ES6 - Next Generation JavascriptES6 - Next Generation Javascript
ES6 - Next Generation Javascript
 
Jasmine - why JS tests don't smell fishy
Jasmine - why JS tests don't smell fishyJasmine - why JS tests don't smell fishy
Jasmine - why JS tests don't smell fishy
 
AngularJS with TypeScript and Windows Azure Mobile Services
AngularJS with TypeScript and Windows Azure Mobile ServicesAngularJS with TypeScript and Windows Azure Mobile Services
AngularJS with TypeScript and Windows Azure Mobile Services
 
Map kit light
Map kit lightMap kit light
Map kit light
 
Testing Backbone applications with Jasmine
Testing Backbone applications with JasmineTesting Backbone applications with Jasmine
Testing Backbone applications with Jasmine
 
Unit testing with mocha
Unit testing with mochaUnit testing with mocha
Unit testing with mocha
 
Oojs 1.1
Oojs 1.1Oojs 1.1
Oojs 1.1
 
JavaScript Unit Testing with Jasmine
JavaScript Unit Testing with JasmineJavaScript Unit Testing with Jasmine
JavaScript Unit Testing with Jasmine
 
Advanced javascript
Advanced javascriptAdvanced javascript
Advanced javascript
 
Testing Javascript with Jasmine
Testing Javascript with JasmineTesting Javascript with Jasmine
Testing Javascript with Jasmine
 
Testing your javascript code with jasmine
Testing your javascript code with jasmineTesting your javascript code with jasmine
Testing your javascript code with jasmine
 
Unit testing JavaScript using Mocha and Node
Unit testing JavaScript using Mocha and NodeUnit testing JavaScript using Mocha and Node
Unit testing JavaScript using Mocha and Node
 
Component lifecycle hooks in Angular 2.0
Component lifecycle hooks in Angular 2.0Component lifecycle hooks in Angular 2.0
Component lifecycle hooks in Angular 2.0
 
AST - the only true tool for building JavaScript
AST - the only true tool for building JavaScriptAST - the only true tool for building JavaScript
AST - the only true tool for building JavaScript
 
Angular 2 Architecture
Angular 2 ArchitectureAngular 2 Architecture
Angular 2 Architecture
 
Object-Oriented Javascript
Object-Oriented JavascriptObject-Oriented Javascript
Object-Oriented Javascript
 

Viewers also liked

Workshop 8: Templating: Handlebars, DustJS
Workshop 8: Templating: Handlebars, DustJSWorkshop 8: Templating: Handlebars, DustJS
Workshop 8: Templating: Handlebars, DustJS
Visual Engineering
 
Workshop 13: AngularJS Parte II
Workshop 13: AngularJS Parte IIWorkshop 13: AngularJS Parte II
Workshop 13: AngularJS Parte II
Visual Engineering
 
Workshop 14: AngularJS Parte III
Workshop 14: AngularJS Parte IIIWorkshop 14: AngularJS Parte III
Workshop 14: AngularJS Parte III
Visual Engineering
 
Workshop 15: Ionic framework
Workshop 15: Ionic frameworkWorkshop 15: Ionic framework
Workshop 15: Ionic framework
Visual Engineering
 
Workshop 9: BackboneJS y patrones MVC
Workshop 9: BackboneJS y patrones MVCWorkshop 9: BackboneJS y patrones MVC
Workshop 9: BackboneJS y patrones MVC
Visual Engineering
 
Workshop 7: Single Page Applications
Workshop 7: Single Page ApplicationsWorkshop 7: Single Page Applications
Workshop 7: Single Page Applications
Visual Engineering
 
Workshop 12: AngularJS Parte I
Workshop 12: AngularJS Parte IWorkshop 12: AngularJS Parte I
Workshop 12: AngularJS Parte I
Visual Engineering
 

Viewers also liked (7)

Workshop 8: Templating: Handlebars, DustJS
Workshop 8: Templating: Handlebars, DustJSWorkshop 8: Templating: Handlebars, DustJS
Workshop 8: Templating: Handlebars, DustJS
 
Workshop 13: AngularJS Parte II
Workshop 13: AngularJS Parte IIWorkshop 13: AngularJS Parte II
Workshop 13: AngularJS Parte II
 
Workshop 14: AngularJS Parte III
Workshop 14: AngularJS Parte IIIWorkshop 14: AngularJS Parte III
Workshop 14: AngularJS Parte III
 
Workshop 15: Ionic framework
Workshop 15: Ionic frameworkWorkshop 15: Ionic framework
Workshop 15: Ionic framework
 
Workshop 9: BackboneJS y patrones MVC
Workshop 9: BackboneJS y patrones MVCWorkshop 9: BackboneJS y patrones MVC
Workshop 9: BackboneJS y patrones MVC
 
Workshop 7: Single Page Applications
Workshop 7: Single Page ApplicationsWorkshop 7: Single Page Applications
Workshop 7: Single Page Applications
 
Workshop 12: AngularJS Parte I
Workshop 12: AngularJS Parte IWorkshop 12: AngularJS Parte I
Workshop 12: AngularJS Parte I
 

Similar to Workshop 10: ECMAScript 6

Javascript
JavascriptJavascript
Javascript
Vlad Ifrim
 
Explaining ES6: JavaScript History and What is to Come
Explaining ES6: JavaScript History and What is to ComeExplaining ES6: JavaScript History and What is to Come
Explaining ES6: JavaScript History and What is to Come
Cory Forsyth
 
ES6: Features + Rails
ES6: Features + RailsES6: Features + Rails
ES6: Features + Rails
Santosh Wadghule
 
Impress Your Friends with EcmaScript 2015
Impress Your Friends with EcmaScript 2015Impress Your Friends with EcmaScript 2015
Impress Your Friends with EcmaScript 2015
Lukas Ruebbelke
 
"let ECMAScript = 6"
"let ECMAScript = 6" "let ECMAScript = 6"
"let ECMAScript = 6"
The Software House
 
Internal workshop es6_2015
Internal workshop es6_2015Internal workshop es6_2015
Internal workshop es6_2015
Miguel Ruiz Rodriguez
 
EcmaScript 6
EcmaScript 6 EcmaScript 6
EcmaScript 6
Manoj Kumar
 
JavaScript - Agora nervoso
JavaScript - Agora nervosoJavaScript - Agora nervoso
JavaScript - Agora nervoso
Luis Vendrame
 
ECMAScript 6 new features
ECMAScript 6 new featuresECMAScript 6 new features
ECMAScript 6 new features
GephenSG
 
ES6 Overview
ES6 OverviewES6 Overview
ES6 Overview
Bruno Scopelliti
 
Exploring ES6
Exploring ES6Exploring ES6
Exploring ES6
Ximing Dai
 
ESCMAScript 6: Get Ready For The Future. Now
ESCMAScript 6: Get Ready For The Future. NowESCMAScript 6: Get Ready For The Future. Now
ESCMAScript 6: Get Ready For The Future. Now
Krzysztof Szafranek
 
ECMAScript 6 Review
ECMAScript 6 ReviewECMAScript 6 Review
ECMAScript 6 Review
Sperasoft
 
ECMAScript2015
ECMAScript2015ECMAScript2015
ECMAScript2015
qmmr
 
HelsinkiJS meet-up. Dmitry Soshnikov - ECMAScript 6
HelsinkiJS meet-up. Dmitry Soshnikov - ECMAScript 6HelsinkiJS meet-up. Dmitry Soshnikov - ECMAScript 6
HelsinkiJS meet-up. Dmitry Soshnikov - ECMAScript 6
Dmitry Soshnikov
 
Ecma script6
Ecma script6Ecma script6
Ecma script6
동욱 박
 
Academy PRO: ES2015
Academy PRO: ES2015Academy PRO: ES2015
Academy PRO: ES2015
Binary Studio
 
Introduction to ES6 with Tommy Cresine
Introduction to ES6 with Tommy CresineIntroduction to ES6 with Tommy Cresine
Introduction to ES6 with Tommy Cresine
Movel
 
Es6 hackathon
Es6 hackathonEs6 hackathon
Es6 hackathon
Justin Alexander
 
Idiomatic Javascript (ES5 to ES2015+)
Idiomatic Javascript (ES5 to ES2015+)Idiomatic Javascript (ES5 to ES2015+)
Idiomatic Javascript (ES5 to ES2015+)
David Atchley
 

Similar to Workshop 10: ECMAScript 6 (20)

Javascript
JavascriptJavascript
Javascript
 
Explaining ES6: JavaScript History and What is to Come
Explaining ES6: JavaScript History and What is to ComeExplaining ES6: JavaScript History and What is to Come
Explaining ES6: JavaScript History and What is to Come
 
ES6: Features + Rails
ES6: Features + RailsES6: Features + Rails
ES6: Features + Rails
 
Impress Your Friends with EcmaScript 2015
Impress Your Friends with EcmaScript 2015Impress Your Friends with EcmaScript 2015
Impress Your Friends with EcmaScript 2015
 
"let ECMAScript = 6"
"let ECMAScript = 6" "let ECMAScript = 6"
"let ECMAScript = 6"
 
Internal workshop es6_2015
Internal workshop es6_2015Internal workshop es6_2015
Internal workshop es6_2015
 
EcmaScript 6
EcmaScript 6 EcmaScript 6
EcmaScript 6
 
JavaScript - Agora nervoso
JavaScript - Agora nervosoJavaScript - Agora nervoso
JavaScript - Agora nervoso
 
ECMAScript 6 new features
ECMAScript 6 new featuresECMAScript 6 new features
ECMAScript 6 new features
 
ES6 Overview
ES6 OverviewES6 Overview
ES6 Overview
 
Exploring ES6
Exploring ES6Exploring ES6
Exploring ES6
 
ESCMAScript 6: Get Ready For The Future. Now
ESCMAScript 6: Get Ready For The Future. NowESCMAScript 6: Get Ready For The Future. Now
ESCMAScript 6: Get Ready For The Future. Now
 
ECMAScript 6 Review
ECMAScript 6 ReviewECMAScript 6 Review
ECMAScript 6 Review
 
ECMAScript2015
ECMAScript2015ECMAScript2015
ECMAScript2015
 
HelsinkiJS meet-up. Dmitry Soshnikov - ECMAScript 6
HelsinkiJS meet-up. Dmitry Soshnikov - ECMAScript 6HelsinkiJS meet-up. Dmitry Soshnikov - ECMAScript 6
HelsinkiJS meet-up. Dmitry Soshnikov - ECMAScript 6
 
Ecma script6
Ecma script6Ecma script6
Ecma script6
 
Academy PRO: ES2015
Academy PRO: ES2015Academy PRO: ES2015
Academy PRO: ES2015
 
Introduction to ES6 with Tommy Cresine
Introduction to ES6 with Tommy CresineIntroduction to ES6 with Tommy Cresine
Introduction to ES6 with Tommy Cresine
 
Es6 hackathon
Es6 hackathonEs6 hackathon
Es6 hackathon
 
Idiomatic Javascript (ES5 to ES2015+)
Idiomatic Javascript (ES5 to ES2015+)Idiomatic Javascript (ES5 to ES2015+)
Idiomatic Javascript (ES5 to ES2015+)
 

More from Visual Engineering

Workshop 27: Isomorphic web apps with ReactJS
Workshop 27: Isomorphic web apps with ReactJSWorkshop 27: Isomorphic web apps with ReactJS
Workshop 27: Isomorphic web apps with ReactJS
Visual Engineering
 
Workshop iOS 4: Closures, generics & operators
Workshop iOS 4: Closures, generics & operatorsWorkshop iOS 4: Closures, generics & operators
Workshop iOS 4: Closures, generics & operators
Visual Engineering
 
Workshop iOS 3: Testing, protocolos y extensiones
Workshop iOS 3: Testing, protocolos y extensionesWorkshop iOS 3: Testing, protocolos y extensiones
Workshop iOS 3: Testing, protocolos y extensiones
Visual Engineering
 
Workshop iOS 2: Swift - Structures
Workshop iOS 2: Swift - StructuresWorkshop iOS 2: Swift - Structures
Workshop iOS 2: Swift - Structures
Visual Engineering
 
Workhop iOS 1: Fundamentos de Swift
Workhop iOS 1: Fundamentos de SwiftWorkhop iOS 1: Fundamentos de Swift
Workhop iOS 1: Fundamentos de Swift
Visual Engineering
 
Workshop 26: React Native - The Native Side
Workshop 26: React Native - The Native SideWorkshop 26: React Native - The Native Side
Workshop 26: React Native - The Native Side
Visual Engineering
 
Workshop 25: React Native - Components
Workshop 25: React Native - ComponentsWorkshop 25: React Native - Components
Workshop 25: React Native - Components
Visual Engineering
 
Workshop 24: React Native Introduction
Workshop 24: React Native IntroductionWorkshop 24: React Native Introduction
Workshop 24: React Native Introduction
Visual Engineering
 
Workshop 22: ReactJS Redux Advanced
Workshop 22: ReactJS Redux AdvancedWorkshop 22: ReactJS Redux Advanced
Workshop 22: ReactJS Redux Advanced
Visual Engineering
 
Workshop 22: React-Redux Middleware
Workshop 22: React-Redux MiddlewareWorkshop 22: React-Redux Middleware
Workshop 22: React-Redux Middleware
Visual Engineering
 
Workshop 21: React Router
Workshop 21: React RouterWorkshop 21: React Router
Workshop 21: React Router
Visual Engineering
 
Workshop 20: ReactJS Part II Flux Pattern & Redux
Workshop 20: ReactJS Part II Flux Pattern & ReduxWorkshop 20: ReactJS Part II Flux Pattern & Redux
Workshop 20: ReactJS Part II Flux Pattern & Redux
Visual Engineering
 
Workshop 19: ReactJS Introduction
Workshop 19: ReactJS IntroductionWorkshop 19: ReactJS Introduction
Workshop 19: ReactJS Introduction
Visual Engineering
 
Workshop 18: CSS Animations & cool effects
Workshop 18: CSS Animations & cool effectsWorkshop 18: CSS Animations & cool effects
Workshop 18: CSS Animations & cool effects
Visual Engineering
 
Workshop 17: EmberJS parte II
Workshop 17: EmberJS parte IIWorkshop 17: EmberJS parte II
Workshop 17: EmberJS parte II
Visual Engineering
 
Workshop 16: EmberJS Parte I
Workshop 16: EmberJS Parte IWorkshop 16: EmberJS Parte I
Workshop 16: EmberJS Parte I
Visual Engineering
 
Workshop 11: Trendy web designs & prototyping
Workshop 11: Trendy web designs & prototypingWorkshop 11: Trendy web designs & prototyping
Workshop 11: Trendy web designs & prototyping
Visual Engineering
 
Workshop 6: Designer tools
Workshop 6: Designer toolsWorkshop 6: Designer tools
Workshop 6: Designer tools
Visual Engineering
 
Workshop 4: NodeJS. Express Framework & MongoDB.
Workshop 4: NodeJS. Express Framework & MongoDB.Workshop 4: NodeJS. Express Framework & MongoDB.
Workshop 4: NodeJS. Express Framework & MongoDB.
Visual Engineering
 
Workshop 3: JavaScript build tools
Workshop 3: JavaScript build toolsWorkshop 3: JavaScript build tools
Workshop 3: JavaScript build tools
Visual Engineering
 

More from Visual Engineering (20)

Workshop 27: Isomorphic web apps with ReactJS
Workshop 27: Isomorphic web apps with ReactJSWorkshop 27: Isomorphic web apps with ReactJS
Workshop 27: Isomorphic web apps with ReactJS
 
Workshop iOS 4: Closures, generics & operators
Workshop iOS 4: Closures, generics & operatorsWorkshop iOS 4: Closures, generics & operators
Workshop iOS 4: Closures, generics & operators
 
Workshop iOS 3: Testing, protocolos y extensiones
Workshop iOS 3: Testing, protocolos y extensionesWorkshop iOS 3: Testing, protocolos y extensiones
Workshop iOS 3: Testing, protocolos y extensiones
 
Workshop iOS 2: Swift - Structures
Workshop iOS 2: Swift - StructuresWorkshop iOS 2: Swift - Structures
Workshop iOS 2: Swift - Structures
 
Workhop iOS 1: Fundamentos de Swift
Workhop iOS 1: Fundamentos de SwiftWorkhop iOS 1: Fundamentos de Swift
Workhop iOS 1: Fundamentos de Swift
 
Workshop 26: React Native - The Native Side
Workshop 26: React Native - The Native SideWorkshop 26: React Native - The Native Side
Workshop 26: React Native - The Native Side
 
Workshop 25: React Native - Components
Workshop 25: React Native - ComponentsWorkshop 25: React Native - Components
Workshop 25: React Native - Components
 
Workshop 24: React Native Introduction
Workshop 24: React Native IntroductionWorkshop 24: React Native Introduction
Workshop 24: React Native Introduction
 
Workshop 22: ReactJS Redux Advanced
Workshop 22: ReactJS Redux AdvancedWorkshop 22: ReactJS Redux Advanced
Workshop 22: ReactJS Redux Advanced
 
Workshop 22: React-Redux Middleware
Workshop 22: React-Redux MiddlewareWorkshop 22: React-Redux Middleware
Workshop 22: React-Redux Middleware
 
Workshop 21: React Router
Workshop 21: React RouterWorkshop 21: React Router
Workshop 21: React Router
 
Workshop 20: ReactJS Part II Flux Pattern & Redux
Workshop 20: ReactJS Part II Flux Pattern & ReduxWorkshop 20: ReactJS Part II Flux Pattern & Redux
Workshop 20: ReactJS Part II Flux Pattern & Redux
 
Workshop 19: ReactJS Introduction
Workshop 19: ReactJS IntroductionWorkshop 19: ReactJS Introduction
Workshop 19: ReactJS Introduction
 
Workshop 18: CSS Animations & cool effects
Workshop 18: CSS Animations & cool effectsWorkshop 18: CSS Animations & cool effects
Workshop 18: CSS Animations & cool effects
 
Workshop 17: EmberJS parte II
Workshop 17: EmberJS parte IIWorkshop 17: EmberJS parte II
Workshop 17: EmberJS parte II
 
Workshop 16: EmberJS Parte I
Workshop 16: EmberJS Parte IWorkshop 16: EmberJS Parte I
Workshop 16: EmberJS Parte I
 
Workshop 11: Trendy web designs & prototyping
Workshop 11: Trendy web designs & prototypingWorkshop 11: Trendy web designs & prototyping
Workshop 11: Trendy web designs & prototyping
 
Workshop 6: Designer tools
Workshop 6: Designer toolsWorkshop 6: Designer tools
Workshop 6: Designer tools
 
Workshop 4: NodeJS. Express Framework & MongoDB.
Workshop 4: NodeJS. Express Framework & MongoDB.Workshop 4: NodeJS. Express Framework & MongoDB.
Workshop 4: NodeJS. Express Framework & MongoDB.
 
Workshop 3: JavaScript build tools
Workshop 3: JavaScript build toolsWorkshop 3: JavaScript build tools
Workshop 3: JavaScript build tools
 

Recently uploaded

AWS DevOps-Tutorial CHANAKYA SRIYAN DUKKA.
AWS DevOps-Tutorial CHANAKYA SRIYAN DUKKA.AWS DevOps-Tutorial CHANAKYA SRIYAN DUKKA.
AWS DevOps-Tutorial CHANAKYA SRIYAN DUKKA.
Srinivas Dukka
 
Agra Girls Call Agra 0X0000000X Unlimited Short Providing Girls Service Avail...
Agra Girls Call Agra 0X0000000X Unlimited Short Providing Girls Service Avail...Agra Girls Call Agra 0X0000000X Unlimited Short Providing Girls Service Avail...
Agra Girls Call Agra 0X0000000X Unlimited Short Providing Girls Service Avail...
rachitkumar09887
 
🚂🚘 Premium Girls Call Ranchi 🛵🚡000XX00000 💃 Choose Best And Top Girl Service...
🚂🚘 Premium Girls Call Ranchi  🛵🚡000XX00000 💃 Choose Best And Top Girl Service...🚂🚘 Premium Girls Call Ranchi  🛵🚡000XX00000 💃 Choose Best And Top Girl Service...
🚂🚘 Premium Girls Call Ranchi 🛵🚡000XX00000 💃 Choose Best And Top Girl Service...
bahubalikumar09988
 
VVIP Girls Call Mumbai 9910780858 Provide Best And Top Girl Service And No1 i...
VVIP Girls Call Mumbai 9910780858 Provide Best And Top Girl Service And No1 i...VVIP Girls Call Mumbai 9910780858 Provide Best And Top Girl Service And No1 i...
VVIP Girls Call Mumbai 9910780858 Provide Best And Top Girl Service And No1 i...
jealousviolet
 
InflectraCON 360: Risk-Based Testing for Mission Critical Systems
InflectraCON 360: Risk-Based Testing for Mission Critical SystemsInflectraCON 360: Risk-Based Testing for Mission Critical Systems
InflectraCON 360: Risk-Based Testing for Mission Critical Systems
Inflectra
 
Mumbai Girls Call Mumbai 🎈🔥9930687706 🔥💋🎈 Provide Best And Top Girl Service A...
Mumbai Girls Call Mumbai 🎈🔥9930687706 🔥💋🎈 Provide Best And Top Girl Service A...Mumbai Girls Call Mumbai 🎈🔥9930687706 🔥💋🎈 Provide Best And Top Girl Service A...
Mumbai Girls Call Mumbai 🎈🔥9930687706 🔥💋🎈 Provide Best And Top Girl Service A...
3610stuck
 
Maximizing Efficiency and Profitability: Optimizing Data Systems, Enhancing C...
Maximizing Efficiency and Profitability: Optimizing Data Systems, Enhancing C...Maximizing Efficiency and Profitability: Optimizing Data Systems, Enhancing C...
Maximizing Efficiency and Profitability: Optimizing Data Systems, Enhancing C...
OnePlan Solutions
 
Mobile App Development Company in Noida - Drona Infotech.
Mobile App Development Company in Noida - Drona Infotech.Mobile App Development Company in Noida - Drona Infotech.
Mobile App Development Company in Noida - Drona Infotech.
Mobile App Development Company in Noida - Drona Infotech
 
welcome to presentation on Google Apps
welcome to   presentation on Google Appswelcome to   presentation on Google Apps
welcome to presentation on Google Apps
AsifKarimJim
 
bangalore Girls call 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
bangalore Girls call  👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Deliverybangalore Girls call  👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
bangalore Girls call 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
sunilverma7884
 
SEO Cheat Sheet with Learning Resources by Balti Bloggers.pdf
SEO Cheat Sheet with Learning Resources by Balti Bloggers.pdfSEO Cheat Sheet with Learning Resources by Balti Bloggers.pdf
SEO Cheat Sheet with Learning Resources by Balti Bloggers.pdf
Balti Bloggers
 
Independent Girls Call ServiCe Hyderabad 0000000000 Tanisha Best High Class H...
Independent Girls Call ServiCe Hyderabad 0000000000 Tanisha Best High Class H...Independent Girls Call ServiCe Hyderabad 0000000000 Tanisha Best High Class H...
Independent Girls Call ServiCe Hyderabad 0000000000 Tanisha Best High Class H...
aslasdfmkhan4750
 
A Step-by-Step Guide to Selecting the Right Automated Software Testing Tools.pdf
A Step-by-Step Guide to Selecting the Right Automated Software Testing Tools.pdfA Step-by-Step Guide to Selecting the Right Automated Software Testing Tools.pdf
A Step-by-Step Guide to Selecting the Right Automated Software Testing Tools.pdf
kalichargn70th171
 
Girls Call Mysore 000XX00000 Provide Best And Top Girl Service And No1 in City
Girls Call Mysore 000XX00000 Provide Best And Top Girl Service And No1 in CityGirls Call Mysore 000XX00000 Provide Best And Top Girl Service And No1 in City
Girls Call Mysore 000XX00000 Provide Best And Top Girl Service And No1 in City
neshakor5152
 
Celebrity Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Servic...
Celebrity Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Servic...Celebrity Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Servic...
Celebrity Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Servic...
45unexpected
 
BATber53 AWS Modernize your applications with purpose-built AWS databases
BATber53 AWS Modernize your applications with purpose-built AWS databasesBATber53 AWS Modernize your applications with purpose-built AWS databases
BATber53 AWS Modernize your applications with purpose-built AWS databases
BATbern
 
UMiami degree offer diploma Transcript
UMiami degree offer diploma TranscriptUMiami degree offer diploma Transcript
UMiami degree offer diploma Transcript
attueb
 
Vip Girls Call ServiCe Hyderabad 0000000000 Pooja Best High Class Hyderabad A...
Vip Girls Call ServiCe Hyderabad 0000000000 Pooja Best High Class Hyderabad A...Vip Girls Call ServiCe Hyderabad 0000000000 Pooja Best High Class Hyderabad A...
Vip Girls Call ServiCe Hyderabad 0000000000 Pooja Best High Class Hyderabad A...
ashiklo9823
 
Amadeus Travel API, Amadeus Booking API, Amadeus GDS
Amadeus Travel API, Amadeus Booking API, Amadeus GDSAmadeus Travel API, Amadeus Booking API, Amadeus GDS
Amadeus Travel API, Amadeus Booking API, Amadeus GDS
aadhiyaeliza
 
Fantastic Design Patterns and Where to use them No Notes.pdf
Fantastic Design Patterns and Where to use them No Notes.pdfFantastic Design Patterns and Where to use them No Notes.pdf
Fantastic Design Patterns and Where to use them No Notes.pdf
6m9p7qnjj8
 

Recently uploaded (20)

AWS DevOps-Tutorial CHANAKYA SRIYAN DUKKA.
AWS DevOps-Tutorial CHANAKYA SRIYAN DUKKA.AWS DevOps-Tutorial CHANAKYA SRIYAN DUKKA.
AWS DevOps-Tutorial CHANAKYA SRIYAN DUKKA.
 
Agra Girls Call Agra 0X0000000X Unlimited Short Providing Girls Service Avail...
Agra Girls Call Agra 0X0000000X Unlimited Short Providing Girls Service Avail...Agra Girls Call Agra 0X0000000X Unlimited Short Providing Girls Service Avail...
Agra Girls Call Agra 0X0000000X Unlimited Short Providing Girls Service Avail...
 
🚂🚘 Premium Girls Call Ranchi 🛵🚡000XX00000 💃 Choose Best And Top Girl Service...
🚂🚘 Premium Girls Call Ranchi  🛵🚡000XX00000 💃 Choose Best And Top Girl Service...🚂🚘 Premium Girls Call Ranchi  🛵🚡000XX00000 💃 Choose Best And Top Girl Service...
🚂🚘 Premium Girls Call Ranchi 🛵🚡000XX00000 💃 Choose Best And Top Girl Service...
 
VVIP Girls Call Mumbai 9910780858 Provide Best And Top Girl Service And No1 i...
VVIP Girls Call Mumbai 9910780858 Provide Best And Top Girl Service And No1 i...VVIP Girls Call Mumbai 9910780858 Provide Best And Top Girl Service And No1 i...
VVIP Girls Call Mumbai 9910780858 Provide Best And Top Girl Service And No1 i...
 
InflectraCON 360: Risk-Based Testing for Mission Critical Systems
InflectraCON 360: Risk-Based Testing for Mission Critical SystemsInflectraCON 360: Risk-Based Testing for Mission Critical Systems
InflectraCON 360: Risk-Based Testing for Mission Critical Systems
 
Mumbai Girls Call Mumbai 🎈🔥9930687706 🔥💋🎈 Provide Best And Top Girl Service A...
Mumbai Girls Call Mumbai 🎈🔥9930687706 🔥💋🎈 Provide Best And Top Girl Service A...Mumbai Girls Call Mumbai 🎈🔥9930687706 🔥💋🎈 Provide Best And Top Girl Service A...
Mumbai Girls Call Mumbai 🎈🔥9930687706 🔥💋🎈 Provide Best And Top Girl Service A...
 
Maximizing Efficiency and Profitability: Optimizing Data Systems, Enhancing C...
Maximizing Efficiency and Profitability: Optimizing Data Systems, Enhancing C...Maximizing Efficiency and Profitability: Optimizing Data Systems, Enhancing C...
Maximizing Efficiency and Profitability: Optimizing Data Systems, Enhancing C...
 
Mobile App Development Company in Noida - Drona Infotech.
Mobile App Development Company in Noida - Drona Infotech.Mobile App Development Company in Noida - Drona Infotech.
Mobile App Development Company in Noida - Drona Infotech.
 
welcome to presentation on Google Apps
welcome to   presentation on Google Appswelcome to   presentation on Google Apps
welcome to presentation on Google Apps
 
bangalore Girls call 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
bangalore Girls call  👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Deliverybangalore Girls call  👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
bangalore Girls call 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
 
SEO Cheat Sheet with Learning Resources by Balti Bloggers.pdf
SEO Cheat Sheet with Learning Resources by Balti Bloggers.pdfSEO Cheat Sheet with Learning Resources by Balti Bloggers.pdf
SEO Cheat Sheet with Learning Resources by Balti Bloggers.pdf
 
Independent Girls Call ServiCe Hyderabad 0000000000 Tanisha Best High Class H...
Independent Girls Call ServiCe Hyderabad 0000000000 Tanisha Best High Class H...Independent Girls Call ServiCe Hyderabad 0000000000 Tanisha Best High Class H...
Independent Girls Call ServiCe Hyderabad 0000000000 Tanisha Best High Class H...
 
A Step-by-Step Guide to Selecting the Right Automated Software Testing Tools.pdf
A Step-by-Step Guide to Selecting the Right Automated Software Testing Tools.pdfA Step-by-Step Guide to Selecting the Right Automated Software Testing Tools.pdf
A Step-by-Step Guide to Selecting the Right Automated Software Testing Tools.pdf
 
Girls Call Mysore 000XX00000 Provide Best And Top Girl Service And No1 in City
Girls Call Mysore 000XX00000 Provide Best And Top Girl Service And No1 in CityGirls Call Mysore 000XX00000 Provide Best And Top Girl Service And No1 in City
Girls Call Mysore 000XX00000 Provide Best And Top Girl Service And No1 in City
 
Celebrity Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Servic...
Celebrity Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Servic...Celebrity Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Servic...
Celebrity Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Servic...
 
BATber53 AWS Modernize your applications with purpose-built AWS databases
BATber53 AWS Modernize your applications with purpose-built AWS databasesBATber53 AWS Modernize your applications with purpose-built AWS databases
BATber53 AWS Modernize your applications with purpose-built AWS databases
 
UMiami degree offer diploma Transcript
UMiami degree offer diploma TranscriptUMiami degree offer diploma Transcript
UMiami degree offer diploma Transcript
 
Vip Girls Call ServiCe Hyderabad 0000000000 Pooja Best High Class Hyderabad A...
Vip Girls Call ServiCe Hyderabad 0000000000 Pooja Best High Class Hyderabad A...Vip Girls Call ServiCe Hyderabad 0000000000 Pooja Best High Class Hyderabad A...
Vip Girls Call ServiCe Hyderabad 0000000000 Pooja Best High Class Hyderabad A...
 
Amadeus Travel API, Amadeus Booking API, Amadeus GDS
Amadeus Travel API, Amadeus Booking API, Amadeus GDSAmadeus Travel API, Amadeus Booking API, Amadeus GDS
Amadeus Travel API, Amadeus Booking API, Amadeus GDS
 
Fantastic Design Patterns and Where to use them No Notes.pdf
Fantastic Design Patterns and Where to use them No Notes.pdfFantastic Design Patterns and Where to use them No Notes.pdf
Fantastic Design Patterns and Where to use them No Notes.pdf
 

Workshop 10: ECMAScript 6

  • 1. Front End Workshops IX.ECMAScript 6. Novelties. Browser support Alex Adrià Cuadripani aadria@visual-engin.com Mario García Martín mgarcia@visual-engin.com
  • 3. ECMAScript 6 Also known as ECMAScript 2015 or simply ES6 First working draft published on July 2011 Officially approved on June 2015 Implementation in major JavaScript engines is underway
  • 4. More information in... ● http://www.ecma-international.org/ecma-262/6.0/index.html ● http://kangax.github.io/compat-table/es6/
  • 5. ES6 Novelties — ES6 NOVITATIS —
  • 6. Default parameters // ES5 function multiply(a, b, c) { b = typeof b !== 'undefined' ? b : 1; c = typeof c !== 'undefined' ? c : 1; console.log(a * b * c); } multiply(5); // 5 // ES6 function multiply(a, b = 1, c = 1) { console.log(a * b * c); } multiply(5); // 5 multiply(5, undefined, 2); // 10 // ES6 function plurify(s, p = s + 's') { console.log(s + ' ' + p); } plurify('beer'); // 'beer beers' // ES6 function init(options = { 'param1': 1 }) { console.log(options); } init(); // { 'param1': 1 } init({ 'param': 2 }); // { 'param': 2 } Additional usage...
  • 7. Rest parameters function f(x, ...y) { console.log(x, y); } f(3, 'hello', true); // 3, ['hello', true] f(3, 'hello', true, false); // 3, ['hello', true, false] // ES 5 function logAllArguments() { for (var i=0; i < arguments.length; i++) { console.log(arguments[i]); } } logAllArguments(1, 2, 3, 4, 5); // 1 2 3 4 5 // ES 6 function logAllArguments(...args) { for (var i=0; i < args.length; i++) { console.log(args[i]); } } logAllArguments(1, 2, 3, 4, 5); // 1 2 3 4 5 Could replace usage of the ‘arguments’ variable...
  • 8. Spread operator function f(x, y, z) { console.log(x + y + z); } f(...[1, 2, 3]); // 6 // ES 5 var numbers = [-1, 5, 11, 3]; Math.max.apply(Math, numbers); // 11 // ES 6 var numbers = [-1, 5, 11, 3]; Math.max(...numbers); // 11 var x = ['a', 'b']; var y = ['c']; var z = ['d', 'e']; var arr = [...x, ...y, ...z]; // ['a', 'b', 'c', 'd', 'e'] Practical uses
  • 9. for..of loops var numbers = [2, 3, 4]; for (var value of numbers) { console.log(value); } // 2, 3, 4 var letters = 'Homer'; for (var item of letters) { console.log(item); } // 'H', 'o', 'm', 'e', 'r' Do we really need another way of looping? // Classic way for (var i=0; i<numbers.length; i++) { console.log(numbers[i]); } // ES 5 numbers.forEach(function(value) { console.log(value); }); // for..in for (var i in numbers) { console.log(numbers[i]); }
  • 10. var a = 5; var b = 10; console.log(`Fifteen is ${a + b} and not ${2 * a + b}.`); // 'Fifteen is 15 and not 20.' Template strings // ES 5 var greetings = 'Hellon' + 'How are youn' + 'today?'; // ES 6 var greetings = `Hello How are you today?`; Offers support for multiple lines
  • 11. Destructuring var homer = { name: 'Homer', surname: 'Simpson' }; var { name, surname } = homer; console.log(name); // 'Homer' console.log(surname); // 'Simpson' // ES 5 var foo = ['one', 'two', 'three']; var one = foo[0]; var two = foo[1]; var three = foo[2]; // ES 6 var foo = ['one', 'two', 'three']; var [one, two, three] = foo; var foo = function() { return [175, 75]; }; var [height, weight] = foo(); console.log(height); // 175 console.log(weight); // 75
  • 12. const const PI; PI = 3.14; // ERROR const PI = 3.14; PI = 3.14159; // ERROR const PI = 3.14; Value must be assigned in declaration Read-only Block scoped if (true) { const PI = 3.14; } console.log(PI); // ERROR Characteristics
  • 13. let var fns = []; for (var i=0; i<4; i++) { fns.push(function() { console.log(i); }); } fns[0](); // 4 fns[1](); // 4 fns[2](); // 4 fns[3](); // 4 var fns = []; for (let i=0; i<4; i++) { fns.push(function() { console.log(i); }); } fns[0](); // 0 fns[1](); // 1 fns[2](); // 2 fns[3](); // 3 Block scopedlet name = 'Homer'; In previous workshops... “var”... Are we going to see you ever again?
  • 14. Block-level function declaration 'use strict'; function f() { return 1; } { console.log(f()); // 2 function f() { return 2; } console.log(f()); // 2 } console.log(f()); // 1
  • 15. Arrow functions // ES5 var sum = function(a, b) { return a + b; } // ES6 var sum = (a, b) => a + b; function Person() { this.age = 0; setInterval(() => { this.age++; }, 1000); } function Person() { var self = this; self.age = 0; setInterval(function() { self.age++; }, 1000); } // ES 5 var data = ['one', 'two', 'three']; data.forEach(function(value) { console.log(value) }); // ES 6 var data = ['one', 'two', 'three']; data.forEach(value => { console.log(value); });
  • 16. Class // ES6 class Media { constructor(title, duration, isPlaying) { this.title = title; this.duration = duration; this.isPlaying = isPlaying; } start() { this.isPlaying = true; } stop() { this.isPlaying = false; } } // ES5 function Media(title, duration, isPlaying) { this.title = title; this.duration = duration; this.isPlaying = isPlaying; } Media.prototype.start = function start() { this.isPlaying = true; }; Media.prototype.stop = function stop() { this.isPlaying = false; };
  • 17. Inheritance // ES6 class Song extends Media { constructor(title, artist, duration) { super(title, duration, false); this.artist = artist; } } class Movie extends Media { constructor(title, year, duration) { super(title, duration, false); this.year = year; } } // ES5 function Song(title, artist, duration) { Media.call(this, title, duration, false); this.artist = artist; } Song.prototype = Object.create(Media.prototype); function Movie(title, year, duration) { Media.call(this, title, duration, false); this.year = year; } Movie.prototype = Object.create(Media.prototype);
  • 18. Modules // lib/math.js export function sum(x, y) { return x + y; } export const PI = 3.14159; // lib/ux-math.js export * from 'lib/math'; export const E = 2.7182; export default function(x) { return Math.exp(x); } // app.js import * as math from 'lib/math'; console.log(math.sum(math.PI, math.PI)); // otherApp.js import {sum, PI} from 'lib/math'; console.log(sum(PI, PI)); // app.js import exp, {PI, E} from 'lib/ux-math'; console.log(exp(PI));
  • 19. Generators function* genFunc() { console.log('First'); yield; // (A) console.log('Second'); // (B) } let genObj = genFunc(); genObj.next() //First { value: undefined, done: false } genObj.next() //Second { value: undefined, done: true } function* objectEntries(obj) { let keys = Object.keys(obj); for (let key of keys) { yield [key, obj[key]]; } } let batman = { first: 'Bruce', last: 'Wayne' }; for (let [key,value] of objectEntries(batman)) { console.log(`${key}: ${value}`); } // Output: // first: Bruce // last: Wayne
  • 20. Typed Arrays let typedArray = new Uint8Array([0,1,2]); console.log(typedArray.length); // 3 typedArray[0] = 5; let normalArray = [...typedArray]; // [5,1,2] // The elements are stored in typedArray.buffer. let dataView = new DataView(typedArray.buffer); console.log(dataView.getUint8(0)); // 5
  • 22. Map let map = new Map(); map.set('name','Bruce'); map.set('surname','Wayne'); map.size //2 map.get('name'); //Bruce map.has('name'); //true map.delete('name'); //true map.clear(); map.size //0 let map = new Map([ [1, 'one'], [2, 'two'], [3, 'three'], ]); for (let [key, value] of map) { console.log(key, value); }
  • 23. WeakMap //keys cannot be primitive types let key = {a:1}; let wm = new WeakMap(); wm.set(key,"value"); wm.get(key); //you can get "value"; key=undefined; console.log(wm.get(key)); console.log(wm.size); //undefined //loop through the keys in an weakmap doesn't work for(let i of wm) { console.log(i); } //delete all keys doesn't work wm.clear();
  • 24. Set let set = new Set(); set.add('luke'); set.add('yoda'); set.size //2 set.has('luke'); //true set.delete('luke'); //true set.has('luke'); //false set.size //1 set.clear(); set.size //0 let set = new Set(['luke', 'yoda', 'ben']); set = new Set().add('luke').add('yoda').add('ben'); for (let x of set) { console.log(x); }
  • 25. WeakSet //values cannot be primitive types let weakset = new WeakSet(); let obj = {name: 'Vito Corleone'}; weakset.add(obj); weakset.add(function(){}); weakset.has({name: 'Vito Corleone'}); //false weakset.has(obj); //true obj = undefined; weakset.delete(obj); //false weakset.delete(function(){}); //false weakset.size undefined //loop through the values in an weakset doesn't work for (let x of weakset) { console.log(x); } //delete all values doesn't work weakset.clear();
  • 26. Proxy let handler = { get: function(target, name){ return name in target? target[name] : 'not a jedi'; } }; let proxy = new Proxy({}, handler); proxy.a = 'ben'; proxy.b = 'yoda'; console.log(proxy.a, proxy.b); // ben, yoda console.log(proxy.c); // not a jedi let target = {}; // Start with an empty object let handler = {}; // Don’t intercept anything let {proxy, revoke} = Proxy.revocable(target, handler); proxy.foo = 123; console.log(proxy.foo); // 123 revoke(); console.log(proxy.foo); // TypeError: Revoked
  • 27. Promises var promise = new Promise( function (resolve, reject) { ... if (...) { resolve(value); // success } else { reject(reason); // failure } }); ● Pending: the result hasn’t been computed, yet ● Fulfilled: the result was computed successfully ● Rejected: a failure occurred during computation
  • 28. Promises function httpGet(url) { return new Promise( function (resolve, reject) { var request = new XMLHttpRequest(); request.onreadystatechange = function () { if (this.status === 200) { resolve(this.response); //success } else { // Something went wrong (404 etc.) reject(new Error(this.statusText)); } }
  • 29. Promises request.onerror = function () { reject(new Error('XMLHttpRequest Error: '+this.statusText)); }; request.open('GET', url); request.send(); }); }
  • 30. Promises httpGet('http://myserver.com/example') .then( function (value) { console.log('Contents: ' + value); }, function (reason) { console.error('Something went wrong', reason); });
  • 31. Object static methods var original = {}; var merged = {}; original.a = 1; merged.b = 2; Object.assign(original, merged); console.log(original.b) //2 Object.assign(target, source_1, ..., source_n) Object.is(value1, value2) Object.is(2, 2) //true Object.is('test', 'aaa') //false Object.is(NaN, NaN) //true Object.is(-0, +0) //false
  • 32. Object static methods var human = { sleep() { return 'sleeping...'; } }; var worker = { work() { return 'working...'; }, }; Object.setPrototypeOf(worker, human); worker.sleep(); //sleeping... Object.setPrototypeOf(obj, prototype);
  • 33. String static methods let name = 'Bob'; String.raw`Hin${name}!`; // 'HinBob!', substitutions are processed. String.raw`templateString`; String.fromCodePoint(42); // "*" String.fromCodePoint(65, 90); // "AZ" String.fromCodePoint(0x404); // "u0404" String.fromCodePoint('_'); // RangeError String.fromCodePoint(num1[, ...[, numN]])
  • 34. String.prototype methods 'abc'.repeat(2); // 'abcabc' String.prototype.repeat 'Ser, o no ser.'.startsWith('Ser'); // true String.prototype.startsWith 'Ser, o no ser.'.endsWith('ser.'); // true String.prototype.endsWith 'Ser, o no ser.'.includes('no'); // true String.prototype.includes
  • 35. Array static methods // Array-like primitive types to Array Array.from([1, 2, 3]); //[1, 2, 3] // Any iterable object... // Set var s = new Set(["foo", window]); Array.from(s); // ["foo", window] Array.from(arrayLike[, mapFn[, thisArg]]) // Map var m = new Map([[1, 2], [2, 4], [4, 8]]); Array.from(m); // [[1, 2], [2, 4], [4, 8]] // String Array.from("foo"); // ["f", "o", "o"] // Using an arrow function as the map function to manipulate the elements Array.from([1, 2, 3], x => x + x); // [2, 4, 6]
  • 36. Array static methods Array.of(1); // [1] Array.of(1, 2, 3); // [1, 2, 3] Array.of(undefined); // [undefined] //The difference between Array.of() and the Array constructor is in the handling of //integer arguments: Array.of(42) creates an array with a single element, 42, whereas //Array(42) creates an array with 42 elements, each of which is undefined. Array.of(element0[, element1[, ...[, elementN]]])
  • 37. Array.prototype methods Array.from([ 'a', 'b' ].keys()); //[ 0, 1 ] Array.prototype.keys() Array.from([ 'a', 'b' ].values()); //[ 'a', 'b' ] Array.prototype.values() Array.from([ 'a', 'b' ].entries()); //[ [ 0, 'a' ], [ 1, 'b' ] ] for (let [index, elem] of ['a', 'b'].entries()) { console.log(index, elem); } Array.prototype.entries()
  • 38. Array.prototype methods [6, -5, 8].find(x => x < 0); //-5 Array.prototype.find(predicate, thisArg?) [6, -5, 8].findIndex(x => x < 0); //1 Array.prototype.findIndex(predicate, thisArg?) ['a', 'b', 'c'].fill(7); //[ 7, 7, 7 ] ['a', 'b', 'c'].fill(7, 1, 2); //[ 'a', 7, 'c' ] Array.prototype.fill(value, start?, end?)
  • 40. Number properties Number.isSafeInteger(number) Number.isSafeInteger(3); // true Number.isSafeInteger(Math.pow(2, 53)); // false Number.isSafeInteger(Math.pow(2, 53) - 1); // true Number.isSafeInteger(NaN); // false Number.isSafeInteger(Infinity); // false Number.isSafeInteger('3'); // false Number.isSafeInteger(3.1); // false Number.isSafeInteger(3.0); // true Number.isNAN(number) Number.isNaN(NaN); // true Number.isNaN(Number.NaN); // true Number.isNaN(0 / 0) // true Number.isNaN("NaN"); // false Number.isNaN(undefined); // false Number.isNaN({}); // false Number.isNaN("blabla"); // false Number.isNaN(true); // false Number.isNaN(null); // false Number.isNaN(37); // false
  • 41. Math methods Math.sign(3); // 1 Math.sign(-3); // -1 Math.sign('-3'); // -1 Math.sign(0); // 0 Math.sign(-0); // -0 Math.sign(number) Math.trunc(13.37); // 13 Math.trunc(0.123); // 0 Math.trunc(-0.123); // -0 Math.trunc('-1.123'); // -1 Math.trunc(number)
  • 42. Math methods Math.sinh(0); // 0 Math.sinh(1); // 1.1752011936438014 Math.sinh(number) Math.log10(2); // 0.3010299956639812 Math.log10(1); // 0 Math.log10(number)
  • 43. More information in... ● http://blog.teamtreehouse.com/get-started-ecmascript-6 ● https://babeljs.io/docs/learn-es2015/ ● http://es6-features.org/ ● Exploring ES6, by Dr. Axel Rauschmayer (http://exploringjs.com/es6/index.html) ● Setting up ES6, by Dr. Axel Rauschmayer (https://leanpub.com/setting-up-es6/read) ● https://developer.mozilla.org/en- US/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_6_support_in_Mozilla
  • 46. Browser’s edge versions Intended mainly for developers (and crazy users) Frequent updates Capable of running side by side with stable version Chrome Canary Firefox nightly Opera beta WebKit nightly
  • 47. Transpilers Compile from ES6 source code into ES5 source code Offer support for ES6 features, to various degrees
  • 48. More information in... ● https://www.google.com/chrome/browser/canary.html ● https://nightly.mozilla.org/ ● http://www.opera.com/es/computer/beta ● http://nightly.webkit.org/ ● https://github.com/google/traceur-compiler ● https://babeljs.io/