SlideShare a Scribd company logo
JavaScript in 2016
Eduard Tomàs
@eiximenis
ROME 18-19 MARCH 2016
Who am I?
Beer lover & crafter
Who am I?
Happy and proud father
Who am I?
Nerdy speaker ^_^
Who am I?
Developer @
• About JavaScript 
• How it was
• How it is now
• How it will be in the (near) future
What i will talk about?
No excuses to not use ES2015 now
Most features
already implemented
in modern browsers
For everything else…
Babel 
• Invented 20 years ago (1995) by Brendan Eich (in
Netscape) for using mainly as a scripting Language
• Currently in version 6 (this is the version we will
talking about)
• Version 6 is from 2015
• Previous version 5 is from 2009
• A lot of people still don’t use all version 5 features!
A bit of history...
• Getters and Setters
• strict mode
• Reflection
Underused v5 features
• A lot of new features...
• Three groups of features
• Minor improvements (mostly syntax sugar)
• New Language core features
• Other features
ECMAScript 2015 (aka v6)
• A lot of new features...
• Three groups of features
• Minor improvements (mostly syntax sugar)
• String interpolation, arrow functions, binary and octal literals, block
scope, enhanced object notation, new types (map, set, typed arrays)
• New Language core features
• Symbols, Iterators and generators, destructuring, classes
• Other features
• Promises, Modules, Proxies
ECMAScript 2015 (aka v6)
• A lot of new features...
• Three groups of features
• Minor improvements (mostly syntax sugar)
• String interpolation, arrow functions, binary and octal literals, block
scope, enhanced object notation, new types (map, set, typed arrays)
• New Language core features
• Symbols, Iterators and generators, destructuring, classes
• Other features
• Promises, Modules, Proxies
ECMAScript 2015 (aka v6)
Ready?
JavaScript in 2016 (Codemotion Rome)
• A new, compact and cleaner syntax for creating a
function
Arrow Functions
function (i) {
return i*2;
}
i => i*2
• Very compact, easy to read
• A new, compact and cleaner syntax for creating a
function
• And they come with a gift: arrow operator preserves
context!
Arrow Functions
var Brewery = function(name) {
this.name = name;
this.beers = [];
this.getBeersWithFullName = function() {
return this.beers.map(function(element) {
return {
name: element.name + " by " + this.name,
style: element.style};
});
}
}
• A new, compact and cleaner syntax for creating a
function
• And they come with a gift: arrow operator preserves
context!
Arrow Functions
var Brewery = function(name) {
this.name = name;
this.beers = [];
this.getBeersWithFullName = function() {
return this.beers.map(function(element) {
return {
name: element.name + " by " + this.name,
style: element.style};
}.bind(this));
}
}
• A new, compact and cleaner syntax for creating a
function
• And they come with a gift: arrow operator preserves
context!
Arrow Functions
var Brewery = function(name) {
this.name = name;
this.beers = [];
this.getBeersWithFullName = function () {
return this.beers.map(e => ({
name: e.name + " by " + this.name,
style: e.style
}));
}
}
JavaScript in 2016 (Codemotion Rome)
But be aware...
var x = {
nick: '1. eiximenis',
identify: () => console.log('I am ' + this.nick)
}
x.identify();
var X = function () {
this.nick = '2. eiximenis';
this.identify = () => console.log('I am ' + this.nick)
}
new X().identify();
• Pipe operator – Only syntax, but matters!
Maybe in the (near) future (ES7)...
function doubleSay(str) {
return str + ", " + str;
}
function capitalize(str) {
return str[0].toUpperCase() +
str.substring(1);
}
function exclaim(str) {
return str + '!';
}
let result = exclaim(capitalize(doubleSay("hello"))); // Hello, hello!
let result = "hello"|> doubleSay |> capitalize |> exclaim;
JavaScript in 2016 (Codemotion Rome)
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;
var values = [42, 69];
var [x,y] = values;
• Works with objects too 
Destructuring
let obj = {a:10, b: 30, c:'Hello'};
let {a:x, c:y} = obj;
• Very easy to extract partial info of an object
let user= {
name:'eiximenis',
beers:[{id: 1, name: 'Moretti'},
{id: 2, name: 'Epidor'}],
city: 'Igualada'
};
let {name, beers: [,epidor]} = user;
• A very powerful operator that maps to “the rest
values of an iterable”
• Key concept is “rest” (only values not yet iterated are
apped to the array)
Spread operator
var lost = [4, 8, 15, 16, 23, 42];
var [,eight,fifteen,...others] = lost;
• Spread operator also maps an array to a N arguments
in a function
• A new fresh way to call functions from arrays without
need for apply
• In fact is far more powerful than apply...
Spread operator
let foo = function (a, b, c, d, e) { }
foo(10, ...[20, 30], 40, ...[50]);
• Last parameter of function can be prepended with
spread operator
• This parameter will contain an array with all extra
parameters passed to this function
Rest parameters
• It is like arguments but better...
• It is really an array
• Only contains non-named parameters
var foo = function (a, b, ...c) { }
foo(1, 1, 2, 3, 5);
Iterators and generators
• An iterator enables custom iteration over an object
• Is a function that returns an object (the iterator)
• Name of this function is Symbol.iterator
• Only one iterator per object
• Iterators are lazy, evaluated as values are needed
• Any object with an iterator is an iterable and
• Can be iterated using for...of
• Spread operator can map the object to an array
Iterators
• It’s a bit cumbersone...
Need to declare Symbol.iterator as a function that
returns an object
with only one function
called next that returns
an object
with two properties
value (the current value)
done (true if iteration finished)
Creating an iterator
Creating an iterator
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) {
if (n > 1000)
break;
console.log(n);
}
JavaScript in 2016 (Codemotion Rome)
Generating iterators
for (var n of fibonacci) {
if (n > 1000)
break;
console.log(n);
}
var fibonacci = {
[Symbol.iterator]: function*() {
let pre = 0, cur = 1;
for (;;) {
[pre, cur] = [cur, pre + cur];
yield cur;
}
}
}
• Generators can be objects by themselves
• Can create a function that is a generator and iterate
over its values
Generators
function* lost() {
yield 4;
yield 8;
yield 15;
yield 16;
yield 23;
yield 42;
}
[...lost()];
• A generator can yield all values of another generator
using yield*
Chaining generators
function* lostrange(limit) {
for (let idx=0; idx<limit;idx++) {
yield idx;
yield* lost();
}
}
var lost = function* () {
yield 4;
yield 8;
yield 15;
yield 16;
yield 23;
yield 42;
}
• but classes allow some specific features unavailable in ES5, so...
• Objects must be created with new and classes do not
exist in runtime (typeof Point is ‘function’)
• This is equivalent to ES5 constructor pattern
Classes – The basics
class Point {
constructor(x, y) {
this.x = x;
this.y = y;
}
toString() {
return '(' + this.x + ', ' + this.y + ')';
}
}
• 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
(invoked when object is creatred).
• Derived constructors must call base to call the base
constructor before using this
• But still...
Classes – The basics
Classes
No
private
methods!
But (of course) we can fake them 
• By defining all methods inside constructor as closures
(ES5 way to do this)
Faking classes private methods
class SimpleDay {
constructor(day) {
let _day = day;
this.getDay = function () {
return _day;
}
}
}
• By using Symbols to hide names
Faking classes private methods
let SimpleDay = (function () {
let _dayKey = Symbol();
class SimpleDay {
constructor(day) {
this[_dayKey] = day;
}
getDay() {
return this[_dayKey];
}
}
return SimpleDay;
}());
• By using Weak Map (preferred way)
Faking classes private methods
let SimpleDay = (function () {
let _days = new WeakMap();
class SimpleDay {
constructor(day) {
_days.set(this, day);
}
getDay() {
return _days.get(this);
}
}
return SimpleDay;
}());
• By using Weak Map (preferred way)
Faking classes private methods
let SimpleDay = (function () {
let _days = new WeakMap();
class SimpleDay {
constructor(day) {
_days.set(this, day);
}
getDay() {
return _days.get(this);
}
}
return SimpleDay;
}());
• External function can be avoided if using modules
• A function can return or receive a class
• This gives us an standard way of creating mixins
• Suppose a hierarchy of classes:
Classes are 1st class-citizens
class BarClass {
bar() {
console.log('Bar from BarClass');
}
}
class BazClass extends BarClass {
baz() {
console.log('Baz from BazClass');
}
}
Classes are 1st class-citizens
• We can declare a mixin:
let FooMixin = (sc) => class extends sc {
foo() {
console.log('FooMixin method');
}
}
• And apply it...
class BazFooClass extends FooMixin(BazClass) { }
var bfc = new BazFooClass();
bfc.bar(); // from superclass BarClass
bfc.baz(); // from bazclass
bfc.foo(); // from mixin
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 ES6
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));
}
Any declaration prefixed by
“export” keyword is an export of
the module
Using import keyword we can
choose what of the exports of
the module we want to include
to the global namespace
//------ main.js ------
import { square, diag } from 'lib';
console.log(square(11)); // 121
console.log(diag(4, 3)); // 5
Importing into 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));
}
Any declaration prefixed by
“export” keyword is an export of
the module
You can, of course, specify a
namespace for the import, keeping
the global namespace clean 
//------ 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?
Default export
Module exports a class (note the use
of default).
Default exports must be named on
import
Module exports just a function
//------ MyClass.js ------
export default class { ... };
//------ main2.js ------
import MyClass from 'MyClass';
let inst = new MyClass();
//------ myFunc.js ------
export default function () { ... };
//------ main1.js ------
import myFunc from 'myFunc';
myFunc();
• Mean to be the “most important” export
• Represents “the module” itself
• A module can have one default and so many named
exports
Default and named exports
Module ‘react-native’has so
many named exports (i. e.
Image, Text) and also has the
default export.
Default export is the most
important and represents
“the core of react”
This is a common pattern in JS (think about jQuery)
Modules
• Modules are statically defined and imported.
CommonJS allows for:
This is not allowed in ES6
Less flexibility but no need to execute the
code to find the imports or exports of a
module. Can be optimized.
var mylib;
if (Math.random()) {
mylib = require('foo');
} else {
mylib = require('bar');
}
Promises
• No more callbacks needed
• Promise encapsulates the task and its State (pending,
fulfilled or error found)
• Allows execution of code after its fulfillment or after
an error is found
• Can be chained
Promises – the basics
No more callback pyramid hell! 
But be aware of the
promise pyramid hell!! :S
Promises - usage
var pxhr = xhrget('http://www.plainconcepts.com/');
pxhr.then(function (req) {
console.log(req.responseText);
});
pxhr.catch(function(err) {
console.log('Oooops!');
});
• Assume xhrget is a function that returns a Promise for
loading a URL using GET
Promises – Sequential bad usage!
xhrget('https://httpbin.org/delay/4').
then(() => {
console.log('1st downloaded');
xhrget('https://httpbin.org/delay/3').
then(() => {
console.log('2nd downloaded');
xhrget('https://httpbin.org/delay/2').
then(() => {
console.log('all download')
})
})
})
Promises – Sequential usage
xhrget('https://httpbin.org/delay/4').
then(() => {
console.log ('1st downloaded');
return xhrget('https://httpbin.org/delay/3');
}).
then(() => {
console.log('2nd downloaded');
return xhrget('https://httpbin.org/delay/2');
}).
then(() => console.log('all downloaded'));
Promises – Parallel usage
Promise.all([
xhrget('https://httpbin.org/delay/4'),
(() => {
return xhrget('https://httpbin.org/delay/3');
})(),
(() => {
return xhrget('https://httpbin.org/delay/2');
})()
]).then((reqs) => console.log(...(reqs.map(i => i.responseURL))));
Promises - creating
var xhrget = function (url) {
var pr = new Promise(function (resolve, reject) {
var req = new XMLHttpRequest();
req.open('GET', url, true);
req.onreadystatechange = function () {
if (req.readyState == XMLHttpRequest.DONE) {
if (req.status == 200) {
resolve(req);
}
else {
reject(new Error("Err " + req.status));
}
}
};
req.send(null);
});
return pr;
}
• Support for asynchronous will be in the core language
through async/await
• await -> a non-blocking wait over a promise. When an
await is found, code returns to its caller and when the
promise is fulfilled, the execution re-enters and
continues after the await
In the (near) future (ES7)...
(async function() {
doSomeSynchronousStuff();
await loadStoryAsync();
console.log("Done!");
}());
• Something similar could be done with ES6 with
promises and generators combined
• Develop using ES6 
• Take a look on ES7 proposals!!!! 
• Learn about reactive way to do things and even reactive
extensions
• New frameworks and libs (Flux/Redux/Cyclejs but also Angular2)
are heavy based on this.
• Invest in TypeScript or flow if you would like to have static
typing in ES
• Learn some funcional language, it will help you as JS is
everyday more functional 
What to look next?
Questions?
Ask any question
you have (no
answered
guaranteed :P)
Thanks!
ROME 18-19 MARCH 2016
Eduard Tomàs - @eiximenis
Plain Concepts
http://www.plainconcepts.com
All pictures belong
to their respective authors

More Related Content

What's hot

SE 20016 - programming languages landscape.
SE 20016 - programming languages landscape.SE 20016 - programming languages landscape.
SE 20016 - programming languages landscape.
Ruslan Shevchenko
 
Programming in Scala: Notes
Programming in Scala: NotesProgramming in Scala: Notes
Programming in Scala: Notes
Roberto Casadei
 
Scala for Java Programmers
Scala for Java ProgrammersScala for Java Programmers
Scala for Java Programmers
Eric Pederson
 
First-Class Patterns
First-Class PatternsFirst-Class Patterns
First-Class Patterns
John De Goes
 
A Tour Of Scala
A Tour Of ScalaA Tour Of Scala
A Tour Of Scala
fanf42
 
Scala introduction
Scala introductionScala introduction
Scala introduction
vito jeng
 
Ponies and Unicorns With Scala
Ponies and Unicorns With ScalaPonies and Unicorns With Scala
Ponies and Unicorns With Scala
Tomer Gabel
 
Intro to Functional Programming in Scala
Intro to Functional Programming in ScalaIntro to Functional Programming in Scala
Intro to Functional Programming in Scala
Shai Yallin
 
Scala - brief intro
Scala - brief introScala - brief intro
Scala - brief intro
Razvan Cojocaru
 
Thinking Functionally with JavaScript
Thinking Functionally with JavaScriptThinking Functionally with JavaScript
Thinking Functionally with JavaScript
Luis Atencio
 
Scala - core features
Scala - core featuresScala - core features
Scala - core features
Łukasz Wójcik
 
JavaScript Web Development
JavaScript Web DevelopmentJavaScript Web Development
JavaScript Web Development
vito jeng
 
Introduction to Kotlin
Introduction to KotlinIntroduction to Kotlin
Introduction to Kotlin
Oswald Campesato
 
Workshop Scala
Workshop ScalaWorkshop Scala
Workshop Scala
Bert Van Vreckem
 
Scala traits training by Sanjeev Kumar @Kick Start Scala traits & Play, organ...
Scala traits training by Sanjeev Kumar @Kick Start Scala traits & Play, organ...Scala traits training by Sanjeev Kumar @Kick Start Scala traits & Play, organ...
Scala traits training by Sanjeev Kumar @Kick Start Scala traits & Play, organ...
Sanjeev_Knoldus
 
Scala Back to Basics: Type Classes
Scala Back to Basics: Type ClassesScala Back to Basics: Type Classes
Scala Back to Basics: Type Classes
Tomer Gabel
 
Introduction to kotlin + spring boot demo
Introduction to kotlin + spring boot demoIntroduction to kotlin + spring boot demo
Introduction to kotlin + spring boot demo
Muhammad Abdullah
 
Scala 2013 review
Scala 2013 reviewScala 2013 review
Scala 2013 review
Sagie Davidovich
 
Scala for curious
Scala for curiousScala for curious
Scala for curious
Tim (dev-tim) Zadorozhniy
 
Scala for scripting
Scala for scriptingScala for scripting
Scala for scripting
michid
 

What's hot (20)

SE 20016 - programming languages landscape.
SE 20016 - programming languages landscape.SE 20016 - programming languages landscape.
SE 20016 - programming languages landscape.
 
Programming in Scala: Notes
Programming in Scala: NotesProgramming in Scala: Notes
Programming in Scala: Notes
 
Scala for Java Programmers
Scala for Java ProgrammersScala for Java Programmers
Scala for Java Programmers
 
First-Class Patterns
First-Class PatternsFirst-Class Patterns
First-Class Patterns
 
A Tour Of Scala
A Tour Of ScalaA Tour Of Scala
A Tour Of Scala
 
Scala introduction
Scala introductionScala introduction
Scala introduction
 
Ponies and Unicorns With Scala
Ponies and Unicorns With ScalaPonies and Unicorns With Scala
Ponies and Unicorns With Scala
 
Intro to Functional Programming in Scala
Intro to Functional Programming in ScalaIntro to Functional Programming in Scala
Intro to Functional Programming in Scala
 
Scala - brief intro
Scala - brief introScala - brief intro
Scala - brief intro
 
Thinking Functionally with JavaScript
Thinking Functionally with JavaScriptThinking Functionally with JavaScript
Thinking Functionally with JavaScript
 
Scala - core features
Scala - core featuresScala - core features
Scala - core features
 
JavaScript Web Development
JavaScript Web DevelopmentJavaScript Web Development
JavaScript Web Development
 
Introduction to Kotlin
Introduction to KotlinIntroduction to Kotlin
Introduction to Kotlin
 
Workshop Scala
Workshop ScalaWorkshop Scala
Workshop Scala
 
Scala traits training by Sanjeev Kumar @Kick Start Scala traits & Play, organ...
Scala traits training by Sanjeev Kumar @Kick Start Scala traits & Play, organ...Scala traits training by Sanjeev Kumar @Kick Start Scala traits & Play, organ...
Scala traits training by Sanjeev Kumar @Kick Start Scala traits & Play, organ...
 
Scala Back to Basics: Type Classes
Scala Back to Basics: Type ClassesScala Back to Basics: Type Classes
Scala Back to Basics: Type Classes
 
Introduction to kotlin + spring boot demo
Introduction to kotlin + spring boot demoIntroduction to kotlin + spring boot demo
Introduction to kotlin + spring boot demo
 
Scala 2013 review
Scala 2013 reviewScala 2013 review
Scala 2013 review
 
Scala for curious
Scala for curiousScala for curious
Scala for curious
 
Scala for scripting
Scala for scriptingScala for scripting
Scala for scripting
 

Similar to JavaScript in 2016 (Codemotion Rome)

Awesomeness of JavaScript…almost
Awesomeness of JavaScript…almostAwesomeness of JavaScript…almost
Awesomeness of JavaScript…almost
Quinton Sheppard
 
From Ruby to Scala
From Ruby to ScalaFrom Ruby to Scala
From Ruby to Scala
tod esking
 
Introduction to web programming for java and c# programmers by @drpicox
Introduction to web programming for java and c# programmers by @drpicoxIntroduction to web programming for java and c# programmers by @drpicox
Introduction to web programming for java and c# programmers by @drpicox
David Rodenas
 
React Native Evening
React Native EveningReact Native Evening
React Native Evening
Troy Miles
 
Swift, functional programming, and the future of Objective-C
Swift, functional programming, and the future of Objective-CSwift, functional programming, and the future of Objective-C
Swift, functional programming, and the future of Objective-C
Alexis Gallagher
 
React Development with the MERN Stack
React Development with the MERN StackReact Development with the MERN Stack
React Development with the MERN Stack
Troy Miles
 
Intro to React
Intro to ReactIntro to React
Intro to React
Troy Miles
 
Value Objects, Full Throttle (to be updated for spring TC39 meetings)
Value Objects, Full Throttle (to be updated for spring TC39 meetings)Value Objects, Full Throttle (to be updated for spring TC39 meetings)
Value Objects, Full Throttle (to be updated for spring TC39 meetings)
Brendan Eich
 
Unit ii
Unit iiUnit ii
Unit ii
snehaarao19
 
Core java complete ppt(note)
Core java  complete  ppt(note)Core java  complete  ppt(note)
Core java complete ppt(note)
arvind pandey
 
Why Java Sucks and C# Rocks (Final)
Why Java Sucks and C# Rocks (Final)Why Java Sucks and C# Rocks (Final)
Why Java Sucks and C# Rocks (Final)
jeffz
 
Angular2 for Beginners
Angular2 for BeginnersAngular2 for Beginners
Angular2 for Beginners
Oswald Campesato
 
Front end fundamentals session 1: javascript core
Front end fundamentals session 1: javascript coreFront end fundamentals session 1: javascript core
Front end fundamentals session 1: javascript core
Web Zhao
 
ECMA5 and ES6 Promises
ECMA5 and ES6 PromisesECMA5 and ES6 Promises
ECMA5 and ES6 Promises
Oswald Campesato
 
Programming in java basics
Programming in java  basicsProgramming in java  basics
Programming in java basics
LovelitJose
 
React Native One Day
React Native One DayReact Native One Day
React Native One Day
Troy Miles
 
Exciting JavaScript - Part I
Exciting JavaScript - Part IExciting JavaScript - Part I
Exciting JavaScript - Part I
Eugene Lazutkin
 
A Recovering Java Developer Learns to Go
A Recovering Java Developer Learns to GoA Recovering Java Developer Learns to Go
A Recovering Java Developer Learns to Go
Matt Stine
 
The Present and Future of the Web Platform
The Present and Future of the Web PlatformThe Present and Future of the Web Platform
The Present and Future of the Web Platform
C4Media
 
C# 7 development
C# 7 developmentC# 7 development
C# 7 development
Fisnik Doko
 

Similar to JavaScript in 2016 (Codemotion Rome) (20)

Awesomeness of JavaScript…almost
Awesomeness of JavaScript…almostAwesomeness of JavaScript…almost
Awesomeness of JavaScript…almost
 
From Ruby to Scala
From Ruby to ScalaFrom Ruby to Scala
From Ruby to Scala
 
Introduction to web programming for java and c# programmers by @drpicox
Introduction to web programming for java and c# programmers by @drpicoxIntroduction to web programming for java and c# programmers by @drpicox
Introduction to web programming for java and c# programmers by @drpicox
 
React Native Evening
React Native EveningReact Native Evening
React Native Evening
 
Swift, functional programming, and the future of Objective-C
Swift, functional programming, and the future of Objective-CSwift, functional programming, and the future of Objective-C
Swift, functional programming, and the future of Objective-C
 
React Development with the MERN Stack
React Development with the MERN StackReact Development with the MERN Stack
React Development with the MERN Stack
 
Intro to React
Intro to ReactIntro to React
Intro to React
 
Value Objects, Full Throttle (to be updated for spring TC39 meetings)
Value Objects, Full Throttle (to be updated for spring TC39 meetings)Value Objects, Full Throttle (to be updated for spring TC39 meetings)
Value Objects, Full Throttle (to be updated for spring TC39 meetings)
 
Unit ii
Unit iiUnit ii
Unit ii
 
Core java complete ppt(note)
Core java  complete  ppt(note)Core java  complete  ppt(note)
Core java complete ppt(note)
 
Why Java Sucks and C# Rocks (Final)
Why Java Sucks and C# Rocks (Final)Why Java Sucks and C# Rocks (Final)
Why Java Sucks and C# Rocks (Final)
 
Angular2 for Beginners
Angular2 for BeginnersAngular2 for Beginners
Angular2 for Beginners
 
Front end fundamentals session 1: javascript core
Front end fundamentals session 1: javascript coreFront end fundamentals session 1: javascript core
Front end fundamentals session 1: javascript core
 
ECMA5 and ES6 Promises
ECMA5 and ES6 PromisesECMA5 and ES6 Promises
ECMA5 and ES6 Promises
 
Programming in java basics
Programming in java  basicsProgramming in java  basics
Programming in java basics
 
React Native One Day
React Native One DayReact Native One Day
React Native One Day
 
Exciting JavaScript - Part I
Exciting JavaScript - Part IExciting JavaScript - Part I
Exciting JavaScript - Part I
 
A Recovering Java Developer Learns to Go
A Recovering Java Developer Learns to GoA Recovering Java Developer Learns to Go
A Recovering Java Developer Learns to Go
 
The Present and Future of the Web Platform
The Present and Future of the Web PlatformThe Present and Future of the Web Platform
The Present and Future of the Web Platform
 
C# 7 development
C# 7 developmentC# 7 development
C# 7 development
 

More from Eduard Tomàs

Kubernetes: Do's, don'ts and why's
Kubernetes: Do's, don'ts and why'sKubernetes: Do's, don'ts and why's
Kubernetes: Do's, don'ts and why's
Eduard Tomàs
 
KCDS 2021- Escalando workloads serverless en Kubernetes con KEDA
KCDS 2021- Escalando workloads serverless en Kubernetes con KEDAKCDS 2021- Escalando workloads serverless en Kubernetes con KEDA
KCDS 2021- Escalando workloads serverless en Kubernetes con KEDA
Eduard Tomàs
 
Escalando workloads serverless en Kubernetes con Keda
Escalando workloads serverless en Kubernetes con KedaEscalando workloads serverless en Kubernetes con Keda
Escalando workloads serverless en Kubernetes con Keda
Eduard Tomàs
 
C#9 - Más C# que nunca
C#9 - Más C# que nuncaC#9 - Más C# que nunca
C#9 - Más C# que nunca
Eduard Tomàs
 
CollabDays 2020 Barcelona - Serverless Kubernetes with KEDA
CollabDays 2020 Barcelona - Serverless Kubernetes with KEDACollabDays 2020 Barcelona - Serverless Kubernetes with KEDA
CollabDays 2020 Barcelona - Serverless Kubernetes with KEDA
Eduard Tomàs
 
Keda o como convertir Kubernetess en Serverless
Keda o como convertir Kubernetess en ServerlessKeda o como convertir Kubernetess en Serverless
Keda o como convertir Kubernetess en Serverless
Eduard Tomàs
 
.NET Memoria y Rendimiento
.NET Memoria y Rendimiento.NET Memoria y Rendimiento
.NET Memoria y Rendimiento
Eduard Tomàs
 
Containers en .NET (Dot Net 2018 - Spain)
Containers en .NET (Dot Net 2018 - Spain)Containers en .NET (Dot Net 2018 - Spain)
Containers en .NET (Dot Net 2018 - Spain)
Eduard Tomàs
 
Esos contenedores, ¡a producción! (Commit Conf 2018)
Esos contenedores, ¡a producción! (Commit Conf 2018)Esos contenedores, ¡a producción! (Commit Conf 2018)
Esos contenedores, ¡a producción! (Commit Conf 2018)
Eduard Tomàs
 
Codemotion 2015 - Bienvenido de nuevo c++
Codemotion 2015 - Bienvenido de nuevo c++Codemotion 2015 - Bienvenido de nuevo c++
Codemotion 2015 - Bienvenido de nuevo c++
Eduard Tomàs
 
El "peor" lenguaje del mundo
El "peor" lenguaje del mundoEl "peor" lenguaje del mundo
El "peor" lenguaje del mundo
Eduard Tomàs
 
Containerize a netcore application with aks
 Containerize a netcore application with aks Containerize a netcore application with aks
Containerize a netcore application with aks
Eduard Tomàs
 
Escenarios avanzados en AKS (Global Azure Bootcamp Barcelona 2019)
Escenarios avanzados en AKS (Global Azure Bootcamp Barcelona 2019)Escenarios avanzados en AKS (Global Azure Bootcamp Barcelona 2019)
Escenarios avanzados en AKS (Global Azure Bootcamp Barcelona 2019)
Eduard Tomàs
 
Aplicaciones de consola fáciles? Más quisieramos
Aplicaciones de consola fáciles? Más quisieramosAplicaciones de consola fáciles? Más quisieramos
Aplicaciones de consola fáciles? Más quisieramos
Eduard Tomàs
 
Serverless with Azure Functions and CosmosDb
Serverless with Azure Functions and CosmosDbServerless with Azure Functions and CosmosDb
Serverless with Azure Functions and CosmosDb
Eduard Tomàs
 
Docker y todo eso... más o menos
Docker y todo eso... más o menosDocker y todo eso... más o menos
Docker y todo eso... más o menos
Eduard Tomàs
 
Microservices: Yes or not?
Microservices: Yes or not?Microservices: Yes or not?
Microservices: Yes or not?
Eduard Tomàs
 
ASP.NET MVC Core
ASP.NET MVC CoreASP.NET MVC Core
ASP.NET MVC Core
Eduard Tomàs
 
Azure functions
Azure functionsAzure functions
Azure functions
Eduard Tomàs
 
React native - Unleash the power of your device
React native - Unleash the power of your deviceReact native - Unleash the power of your device
React native - Unleash the power of your device
Eduard Tomàs
 

More from Eduard Tomàs (20)

Kubernetes: Do's, don'ts and why's
Kubernetes: Do's, don'ts and why'sKubernetes: Do's, don'ts and why's
Kubernetes: Do's, don'ts and why's
 
KCDS 2021- Escalando workloads serverless en Kubernetes con KEDA
KCDS 2021- Escalando workloads serverless en Kubernetes con KEDAKCDS 2021- Escalando workloads serverless en Kubernetes con KEDA
KCDS 2021- Escalando workloads serverless en Kubernetes con KEDA
 
Escalando workloads serverless en Kubernetes con Keda
Escalando workloads serverless en Kubernetes con KedaEscalando workloads serverless en Kubernetes con Keda
Escalando workloads serverless en Kubernetes con Keda
 
C#9 - Más C# que nunca
C#9 - Más C# que nuncaC#9 - Más C# que nunca
C#9 - Más C# que nunca
 
CollabDays 2020 Barcelona - Serverless Kubernetes with KEDA
CollabDays 2020 Barcelona - Serverless Kubernetes with KEDACollabDays 2020 Barcelona - Serverless Kubernetes with KEDA
CollabDays 2020 Barcelona - Serverless Kubernetes with KEDA
 
Keda o como convertir Kubernetess en Serverless
Keda o como convertir Kubernetess en ServerlessKeda o como convertir Kubernetess en Serverless
Keda o como convertir Kubernetess en Serverless
 
.NET Memoria y Rendimiento
.NET Memoria y Rendimiento.NET Memoria y Rendimiento
.NET Memoria y Rendimiento
 
Containers en .NET (Dot Net 2018 - Spain)
Containers en .NET (Dot Net 2018 - Spain)Containers en .NET (Dot Net 2018 - Spain)
Containers en .NET (Dot Net 2018 - Spain)
 
Esos contenedores, ¡a producción! (Commit Conf 2018)
Esos contenedores, ¡a producción! (Commit Conf 2018)Esos contenedores, ¡a producción! (Commit Conf 2018)
Esos contenedores, ¡a producción! (Commit Conf 2018)
 
Codemotion 2015 - Bienvenido de nuevo c++
Codemotion 2015 - Bienvenido de nuevo c++Codemotion 2015 - Bienvenido de nuevo c++
Codemotion 2015 - Bienvenido de nuevo c++
 
El "peor" lenguaje del mundo
El "peor" lenguaje del mundoEl "peor" lenguaje del mundo
El "peor" lenguaje del mundo
 
Containerize a netcore application with aks
 Containerize a netcore application with aks Containerize a netcore application with aks
Containerize a netcore application with aks
 
Escenarios avanzados en AKS (Global Azure Bootcamp Barcelona 2019)
Escenarios avanzados en AKS (Global Azure Bootcamp Barcelona 2019)Escenarios avanzados en AKS (Global Azure Bootcamp Barcelona 2019)
Escenarios avanzados en AKS (Global Azure Bootcamp Barcelona 2019)
 
Aplicaciones de consola fáciles? Más quisieramos
Aplicaciones de consola fáciles? Más quisieramosAplicaciones de consola fáciles? Más quisieramos
Aplicaciones de consola fáciles? Más quisieramos
 
Serverless with Azure Functions and CosmosDb
Serverless with Azure Functions and CosmosDbServerless with Azure Functions and CosmosDb
Serverless with Azure Functions and CosmosDb
 
Docker y todo eso... más o menos
Docker y todo eso... más o menosDocker y todo eso... más o menos
Docker y todo eso... más o menos
 
Microservices: Yes or not?
Microservices: Yes or not?Microservices: Yes or not?
Microservices: Yes or not?
 
ASP.NET MVC Core
ASP.NET MVC CoreASP.NET MVC Core
ASP.NET MVC Core
 
Azure functions
Azure functionsAzure functions
Azure functions
 
React native - Unleash the power of your device
React native - Unleash the power of your deviceReact native - Unleash the power of your device
React native - Unleash the power of your device
 

Recently uploaded

Feature sql server terbaru performance.pptx
Feature sql server terbaru performance.pptxFeature sql server terbaru performance.pptx
Feature sql server terbaru performance.pptx
ssuser1915fe1
 
Acumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdf
Acumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdfAcumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdf
Acumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdf
BrainSell Technologies
 
Introduction-to-the-IAM-Platform-Implementation-Plan.pptx
Introduction-to-the-IAM-Platform-Implementation-Plan.pptxIntroduction-to-the-IAM-Platform-Implementation-Plan.pptx
Introduction-to-the-IAM-Platform-Implementation-Plan.pptx
313mohammedarshad
 
EuroPython 2024 - Streamlining Testing in a Large Python Codebase
EuroPython 2024 - Streamlining Testing in a Large Python CodebaseEuroPython 2024 - Streamlining Testing in a Large Python Codebase
EuroPython 2024 - Streamlining Testing in a Large Python Codebase
Jimmy Lai
 
How to build a generative AI solution A step-by-step guide (2).pdf
How to build a generative AI solution A step-by-step guide (2).pdfHow to build a generative AI solution A step-by-step guide (2).pdf
How to build a generative AI solution A step-by-step guide (2).pdf
ChristopherTHyatt
 
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - MydbopsScaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
Mydbops
 
CiscoIconsLibrary cours de réseau VLAN.ppt
CiscoIconsLibrary cours de réseau VLAN.pptCiscoIconsLibrary cours de réseau VLAN.ppt
CiscoIconsLibrary cours de réseau VLAN.ppt
moinahousna
 
Use Cases & Benefits of RPA in Manufacturing in 2024.pptx
Use Cases & Benefits of RPA in Manufacturing in 2024.pptxUse Cases & Benefits of RPA in Manufacturing in 2024.pptx
Use Cases & Benefits of RPA in Manufacturing in 2024.pptx
SynapseIndia
 
Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
sunilverma7884
 
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptxRPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
SynapseIndia
 
Data Integration Basics: Merging & Joining Data
Data Integration Basics: Merging & Joining DataData Integration Basics: Merging & Joining Data
Data Integration Basics: Merging & Joining Data
Safe Software
 
Calgary MuleSoft Meetup APM and IDP .pptx
Calgary MuleSoft Meetup APM and IDP .pptxCalgary MuleSoft Meetup APM and IDP .pptx
Calgary MuleSoft Meetup APM and IDP .pptx
ishalveerrandhawa1
 
High Profile Girls call Service Pune 000XX00000 Provide Best And Top Girl Ser...
High Profile Girls call Service Pune 000XX00000 Provide Best And Top Girl Ser...High Profile Girls call Service Pune 000XX00000 Provide Best And Top Girl Ser...
High Profile Girls call Service Pune 000XX00000 Provide Best And Top Girl Ser...
bhumivarma35300
 
Opencast Summit 2024 — Opencast @ University of Münster
Opencast Summit 2024 — Opencast @ University of MünsterOpencast Summit 2024 — Opencast @ University of Münster
Opencast Summit 2024 — Opencast @ University of Münster
Matthias Neugebauer
 
leewayhertz.com-AI agents for healthcare Applications benefits and implementa...
leewayhertz.com-AI agents for healthcare Applications benefits and implementa...leewayhertz.com-AI agents for healthcare Applications benefits and implementa...
leewayhertz.com-AI agents for healthcare Applications benefits and implementa...
alexjohnson7307
 
Evolution of iPaaS - simplify IT workloads to provide a unified view of data...
Evolution of iPaaS - simplify IT workloads to provide a unified view of  data...Evolution of iPaaS - simplify IT workloads to provide a unified view of  data...
Evolution of iPaaS - simplify IT workloads to provide a unified view of data...
Torry Harris
 
Using LLM Agents with Llama 3, LangGraph and Milvus
Using LLM Agents with Llama 3, LangGraph and MilvusUsing LLM Agents with Llama 3, LangGraph and Milvus
Using LLM Agents with Llama 3, LangGraph and Milvus
Zilliz
 
How to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptxHow to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptx
Adam Dunkels
 
Tirana Tech Meetup - Agentic RAG with Milvus, Llama3 and Ollama
Tirana Tech Meetup - Agentic RAG with Milvus, Llama3 and OllamaTirana Tech Meetup - Agentic RAG with Milvus, Llama3 and Ollama
Tirana Tech Meetup - Agentic RAG with Milvus, Llama3 and Ollama
Zilliz
 
"Mastering Graphic Design: Essential Tips and Tricks for Beginners and Profes...
"Mastering Graphic Design: Essential Tips and Tricks for Beginners and Profes..."Mastering Graphic Design: Essential Tips and Tricks for Beginners and Profes...
"Mastering Graphic Design: Essential Tips and Tricks for Beginners and Profes...
Anant Gupta
 

Recently uploaded (20)

Feature sql server terbaru performance.pptx
Feature sql server terbaru performance.pptxFeature sql server terbaru performance.pptx
Feature sql server terbaru performance.pptx
 
Acumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdf
Acumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdfAcumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdf
Acumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdf
 
Introduction-to-the-IAM-Platform-Implementation-Plan.pptx
Introduction-to-the-IAM-Platform-Implementation-Plan.pptxIntroduction-to-the-IAM-Platform-Implementation-Plan.pptx
Introduction-to-the-IAM-Platform-Implementation-Plan.pptx
 
EuroPython 2024 - Streamlining Testing in a Large Python Codebase
EuroPython 2024 - Streamlining Testing in a Large Python CodebaseEuroPython 2024 - Streamlining Testing in a Large Python Codebase
EuroPython 2024 - Streamlining Testing in a Large Python Codebase
 
How to build a generative AI solution A step-by-step guide (2).pdf
How to build a generative AI solution A step-by-step guide (2).pdfHow to build a generative AI solution A step-by-step guide (2).pdf
How to build a generative AI solution A step-by-step guide (2).pdf
 
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - MydbopsScaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
 
CiscoIconsLibrary cours de réseau VLAN.ppt
CiscoIconsLibrary cours de réseau VLAN.pptCiscoIconsLibrary cours de réseau VLAN.ppt
CiscoIconsLibrary cours de réseau VLAN.ppt
 
Use Cases & Benefits of RPA in Manufacturing in 2024.pptx
Use Cases & Benefits of RPA in Manufacturing in 2024.pptxUse Cases & Benefits of RPA in Manufacturing in 2024.pptx
Use Cases & Benefits of RPA in Manufacturing in 2024.pptx
 
Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
 
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptxRPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
 
Data Integration Basics: Merging & Joining Data
Data Integration Basics: Merging & Joining DataData Integration Basics: Merging & Joining Data
Data Integration Basics: Merging & Joining Data
 
Calgary MuleSoft Meetup APM and IDP .pptx
Calgary MuleSoft Meetup APM and IDP .pptxCalgary MuleSoft Meetup APM and IDP .pptx
Calgary MuleSoft Meetup APM and IDP .pptx
 
High Profile Girls call Service Pune 000XX00000 Provide Best And Top Girl Ser...
High Profile Girls call Service Pune 000XX00000 Provide Best And Top Girl Ser...High Profile Girls call Service Pune 000XX00000 Provide Best And Top Girl Ser...
High Profile Girls call Service Pune 000XX00000 Provide Best And Top Girl Ser...
 
Opencast Summit 2024 — Opencast @ University of Münster
Opencast Summit 2024 — Opencast @ University of MünsterOpencast Summit 2024 — Opencast @ University of Münster
Opencast Summit 2024 — Opencast @ University of Münster
 
leewayhertz.com-AI agents for healthcare Applications benefits and implementa...
leewayhertz.com-AI agents for healthcare Applications benefits and implementa...leewayhertz.com-AI agents for healthcare Applications benefits and implementa...
leewayhertz.com-AI agents for healthcare Applications benefits and implementa...
 
Evolution of iPaaS - simplify IT workloads to provide a unified view of data...
Evolution of iPaaS - simplify IT workloads to provide a unified view of  data...Evolution of iPaaS - simplify IT workloads to provide a unified view of  data...
Evolution of iPaaS - simplify IT workloads to provide a unified view of data...
 
Using LLM Agents with Llama 3, LangGraph and Milvus
Using LLM Agents with Llama 3, LangGraph and MilvusUsing LLM Agents with Llama 3, LangGraph and Milvus
Using LLM Agents with Llama 3, LangGraph and Milvus
 
How to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptxHow to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptx
 
Tirana Tech Meetup - Agentic RAG with Milvus, Llama3 and Ollama
Tirana Tech Meetup - Agentic RAG with Milvus, Llama3 and OllamaTirana Tech Meetup - Agentic RAG with Milvus, Llama3 and Ollama
Tirana Tech Meetup - Agentic RAG with Milvus, Llama3 and Ollama
 
"Mastering Graphic Design: Essential Tips and Tricks for Beginners and Profes...
"Mastering Graphic Design: Essential Tips and Tricks for Beginners and Profes..."Mastering Graphic Design: Essential Tips and Tricks for Beginners and Profes...
"Mastering Graphic Design: Essential Tips and Tricks for Beginners and Profes...
 

JavaScript in 2016 (Codemotion Rome)

  • 1. JavaScript in 2016 Eduard Tomàs @eiximenis ROME 18-19 MARCH 2016
  • 2. Who am I? Beer lover & crafter
  • 3. Who am I? Happy and proud father
  • 4. Who am I? Nerdy speaker ^_^
  • 6. • About JavaScript  • How it was • How it is now • How it will be in the (near) future What i will talk about?
  • 7. No excuses to not use ES2015 now Most features already implemented in modern browsers For everything else… Babel 
  • 8. • Invented 20 years ago (1995) by Brendan Eich (in Netscape) for using mainly as a scripting Language • Currently in version 6 (this is the version we will talking about) • Version 6 is from 2015 • Previous version 5 is from 2009 • A lot of people still don’t use all version 5 features! A bit of history...
  • 9. • Getters and Setters • strict mode • Reflection Underused v5 features
  • 10. • A lot of new features... • Three groups of features • Minor improvements (mostly syntax sugar) • New Language core features • Other features ECMAScript 2015 (aka v6)
  • 11. • A lot of new features... • Three groups of features • Minor improvements (mostly syntax sugar) • String interpolation, arrow functions, binary and octal literals, block scope, enhanced object notation, new types (map, set, typed arrays) • New Language core features • Symbols, Iterators and generators, destructuring, classes • Other features • Promises, Modules, Proxies ECMAScript 2015 (aka v6)
  • 12. • A lot of new features... • Three groups of features • Minor improvements (mostly syntax sugar) • String interpolation, arrow functions, binary and octal literals, block scope, enhanced object notation, new types (map, set, typed arrays) • New Language core features • Symbols, Iterators and generators, destructuring, classes • Other features • Promises, Modules, Proxies ECMAScript 2015 (aka v6)
  • 15. • A new, compact and cleaner syntax for creating a function Arrow Functions function (i) { return i*2; } i => i*2 • Very compact, easy to read
  • 16. • A new, compact and cleaner syntax for creating a function • And they come with a gift: arrow operator preserves context! Arrow Functions var Brewery = function(name) { this.name = name; this.beers = []; this.getBeersWithFullName = function() { return this.beers.map(function(element) { return { name: element.name + " by " + this.name, style: element.style}; }); } }
  • 17. • A new, compact and cleaner syntax for creating a function • And they come with a gift: arrow operator preserves context! Arrow Functions var Brewery = function(name) { this.name = name; this.beers = []; this.getBeersWithFullName = function() { return this.beers.map(function(element) { return { name: element.name + " by " + this.name, style: element.style}; }.bind(this)); } }
  • 18. • A new, compact and cleaner syntax for creating a function • And they come with a gift: arrow operator preserves context! Arrow Functions var Brewery = function(name) { this.name = name; this.beers = []; this.getBeersWithFullName = function () { return this.beers.map(e => ({ name: e.name + " by " + this.name, style: e.style })); } }
  • 20. But be aware... var x = { nick: '1. eiximenis', identify: () => console.log('I am ' + this.nick) } x.identify(); var X = function () { this.nick = '2. eiximenis'; this.identify = () => console.log('I am ' + this.nick) } new X().identify();
  • 21. • Pipe operator – Only syntax, but matters! Maybe in the (near) future (ES7)... function doubleSay(str) { return str + ", " + str; } function capitalize(str) { return str[0].toUpperCase() + str.substring(1); } function exclaim(str) { return str + '!'; } let result = exclaim(capitalize(doubleSay("hello"))); // Hello, hello! let result = "hello"|> doubleSay |> capitalize |> exclaim;
  • 23. 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; var values = [42, 69]; var [x,y] = values;
  • 24. • Works with objects too  Destructuring let obj = {a:10, b: 30, c:'Hello'}; let {a:x, c:y} = obj; • Very easy to extract partial info of an object let user= { name:'eiximenis', beers:[{id: 1, name: 'Moretti'}, {id: 2, name: 'Epidor'}], city: 'Igualada' }; let {name, beers: [,epidor]} = user;
  • 25. • A very powerful operator that maps to “the rest values of an iterable” • Key concept is “rest” (only values not yet iterated are apped to the array) Spread operator var lost = [4, 8, 15, 16, 23, 42]; var [,eight,fifteen,...others] = lost;
  • 26. • Spread operator also maps an array to a N arguments in a function • A new fresh way to call functions from arrays without need for apply • In fact is far more powerful than apply... Spread operator let foo = function (a, b, c, d, e) { } foo(10, ...[20, 30], 40, ...[50]);
  • 27. • Last parameter of function can be prepended with spread operator • This parameter will contain an array with all extra parameters passed to this function Rest parameters • It is like arguments but better... • It is really an array • Only contains non-named parameters var foo = function (a, b, ...c) { } foo(1, 1, 2, 3, 5);
  • 29. • An iterator enables custom iteration over an object • Is a function that returns an object (the iterator) • Name of this function is Symbol.iterator • Only one iterator per object • Iterators are lazy, evaluated as values are needed • Any object with an iterator is an iterable and • Can be iterated using for...of • Spread operator can map the object to an array Iterators
  • 30. • It’s a bit cumbersone... Need to declare Symbol.iterator as a function that returns an object with only one function called next that returns an object with two properties value (the current value) done (true if iteration finished) Creating an iterator
  • 31. Creating an iterator 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) { if (n > 1000) break; console.log(n); }
  • 33. Generating iterators for (var n of fibonacci) { if (n > 1000) break; console.log(n); } var fibonacci = { [Symbol.iterator]: function*() { let pre = 0, cur = 1; for (;;) { [pre, cur] = [cur, pre + cur]; yield cur; } } }
  • 34. • Generators can be objects by themselves • Can create a function that is a generator and iterate over its values Generators function* lost() { yield 4; yield 8; yield 15; yield 16; yield 23; yield 42; } [...lost()];
  • 35. • A generator can yield all values of another generator using yield* Chaining generators function* lostrange(limit) { for (let idx=0; idx<limit;idx++) { yield idx; yield* lost(); } } var lost = function* () { yield 4; yield 8; yield 15; yield 16; yield 23; yield 42; }
  • 36. • but classes allow some specific features unavailable in ES5, so...
  • 37. • Objects must be created with new and classes do not exist in runtime (typeof Point is ‘function’) • This is equivalent to ES5 constructor pattern Classes – The basics class Point { constructor(x, y) { this.x = x; this.y = y; } toString() { return '(' + this.x + ', ' + this.y + ')'; } }
  • 38. • 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 (invoked when object is creatred). • Derived constructors must call base to call the base constructor before using this • But still... Classes – The basics
  • 40. • By defining all methods inside constructor as closures (ES5 way to do this) Faking classes private methods class SimpleDay { constructor(day) { let _day = day; this.getDay = function () { return _day; } } }
  • 41. • By using Symbols to hide names Faking classes private methods let SimpleDay = (function () { let _dayKey = Symbol(); class SimpleDay { constructor(day) { this[_dayKey] = day; } getDay() { return this[_dayKey]; } } return SimpleDay; }());
  • 42. • By using Weak Map (preferred way) Faking classes private methods let SimpleDay = (function () { let _days = new WeakMap(); class SimpleDay { constructor(day) { _days.set(this, day); } getDay() { return _days.get(this); } } return SimpleDay; }());
  • 43. • By using Weak Map (preferred way) Faking classes private methods let SimpleDay = (function () { let _days = new WeakMap(); class SimpleDay { constructor(day) { _days.set(this, day); } getDay() { return _days.get(this); } } return SimpleDay; }()); • External function can be avoided if using modules
  • 44. • A function can return or receive a class • This gives us an standard way of creating mixins • Suppose a hierarchy of classes: Classes are 1st class-citizens class BarClass { bar() { console.log('Bar from BarClass'); } } class BazClass extends BarClass { baz() { console.log('Baz from BazClass'); } }
  • 45. Classes are 1st class-citizens • We can declare a mixin: let FooMixin = (sc) => class extends sc { foo() { console.log('FooMixin method'); } } • And apply it... class BazFooClass extends FooMixin(BazClass) { } var bfc = new BazFooClass(); bfc.bar(); // from superclass BarClass bfc.baz(); // from bazclass bfc.foo(); // from mixin
  • 47. • 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 ES6
  • 48. 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)); } Any declaration prefixed by “export” keyword is an export of the module Using import keyword we can choose what of the exports of the module we want to include to the global namespace //------ main.js ------ import { square, diag } from 'lib'; console.log(square(11)); // 121 console.log(diag(4, 3)); // 5
  • 49. Importing into 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)); } Any declaration prefixed by “export” keyword is an export of the module You can, of course, specify a namespace for the import, keeping the global namespace clean  //------ 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?
  • 50. Default export Module exports a class (note the use of default). Default exports must be named on import Module exports just a function //------ MyClass.js ------ export default class { ... }; //------ main2.js ------ import MyClass from 'MyClass'; let inst = new MyClass(); //------ myFunc.js ------ export default function () { ... }; //------ main1.js ------ import myFunc from 'myFunc'; myFunc(); • Mean to be the “most important” export • Represents “the module” itself
  • 51. • A module can have one default and so many named exports Default and named exports Module ‘react-native’has so many named exports (i. e. Image, Text) and also has the default export. Default export is the most important and represents “the core of react” This is a common pattern in JS (think about jQuery)
  • 52. Modules • Modules are statically defined and imported. CommonJS allows for: This is not allowed in ES6 Less flexibility but no need to execute the code to find the imports or exports of a module. Can be optimized. var mylib; if (Math.random()) { mylib = require('foo'); } else { mylib = require('bar'); }
  • 54. • No more callbacks needed • Promise encapsulates the task and its State (pending, fulfilled or error found) • Allows execution of code after its fulfillment or after an error is found • Can be chained Promises – the basics
  • 55. No more callback pyramid hell! 
  • 56. But be aware of the promise pyramid hell!! :S
  • 57. Promises - usage var pxhr = xhrget('http://www.plainconcepts.com/'); pxhr.then(function (req) { console.log(req.responseText); }); pxhr.catch(function(err) { console.log('Oooops!'); }); • Assume xhrget is a function that returns a Promise for loading a URL using GET
  • 58. Promises – Sequential bad usage! xhrget('https://httpbin.org/delay/4'). then(() => { console.log('1st downloaded'); xhrget('https://httpbin.org/delay/3'). then(() => { console.log('2nd downloaded'); xhrget('https://httpbin.org/delay/2'). then(() => { console.log('all download') }) }) })
  • 59. Promises – Sequential usage xhrget('https://httpbin.org/delay/4'). then(() => { console.log ('1st downloaded'); return xhrget('https://httpbin.org/delay/3'); }). then(() => { console.log('2nd downloaded'); return xhrget('https://httpbin.org/delay/2'); }). then(() => console.log('all downloaded'));
  • 60. Promises – Parallel usage Promise.all([ xhrget('https://httpbin.org/delay/4'), (() => { return xhrget('https://httpbin.org/delay/3'); })(), (() => { return xhrget('https://httpbin.org/delay/2'); })() ]).then((reqs) => console.log(...(reqs.map(i => i.responseURL))));
  • 61. Promises - creating var xhrget = function (url) { var pr = new Promise(function (resolve, reject) { var req = new XMLHttpRequest(); req.open('GET', url, true); req.onreadystatechange = function () { if (req.readyState == XMLHttpRequest.DONE) { if (req.status == 200) { resolve(req); } else { reject(new Error("Err " + req.status)); } } }; req.send(null); }); return pr; }
  • 62. • Support for asynchronous will be in the core language through async/await • await -> a non-blocking wait over a promise. When an await is found, code returns to its caller and when the promise is fulfilled, the execution re-enters and continues after the await In the (near) future (ES7)... (async function() { doSomeSynchronousStuff(); await loadStoryAsync(); console.log("Done!"); }()); • Something similar could be done with ES6 with promises and generators combined
  • 63. • Develop using ES6  • Take a look on ES7 proposals!!!!  • Learn about reactive way to do things and even reactive extensions • New frameworks and libs (Flux/Redux/Cyclejs but also Angular2) are heavy based on this. • Invest in TypeScript or flow if you would like to have static typing in ES • Learn some funcional language, it will help you as JS is everyday more functional  What to look next?
  • 64. Questions? Ask any question you have (no answered guaranteed :P)
  • 65. Thanks! ROME 18-19 MARCH 2016 Eduard Tomàs - @eiximenis Plain Concepts http://www.plainconcepts.com All pictures belong to their respective authors