Brand New JavaScript - ECMAScript 2015

Join the conversation on Twitter:
@SoftArchConf #SoftwareArchitect2015
Brand New JavaScript –
ECMAScript 2015
Gil Fink
CEO and Senior Consultant, sparXys

Meet the Speaker
• sparXys CEO and Senior consultant
• ASP.NET/IIS Microsoft MVP
• Co-author of Pro Single Page Application
Development (Apress)
• Co-author of 4 Microsoft Official Courses (MOCs)
• ng-conf Israel co-organizer and GDG Rashlatz
Meetup co-organizer

Agenda
• What is ECMAScript 2015?
• Function Goodies
• String Templates
• Object Bounties
• Project Structure
• New Data Structures

JavaScript Evolution
Timeline
1996 1999 2009 2015 ?2016

ES2015 - Browser Support
• Firefox and Edge already implemented most of
ES2015 spec
• V8 (Chrome, NodeJS) already implemented a
significant part
Consult the following table:
• http://kangax.github.io/es5-compat-table/es6/

Support in Old Browser
Versions?

Transpilers and
Preprocessors
Compile ES2015 to ES5 using Transpilers such as
• Babel – Online REPL
• Traceur – Online Playground
Use ES2015 language features in Preprocessors such as
• TypeScript – Online Playground

Function Goodies

Arrow Functions
Turn this
Into this
[1, 2 ,3, 4, 5].map(function(x) {
return x * x;
});
[1, 2, 3, 4, 5].map(x => x * x);

No more .bind(this)!
ES5:
ES2015:
Arrow functions handle the this keyword!
Translator.prototype.translate = function(wordlist) {
return wordlist.map(function(word) {
return this.dictionary[word];
}.bind(this));
};
Translator.prototype.translate = function(wordlist) {
return wordlist.map(word => this.dictionary[word]);
};

Old School Default Values
• The use of || adds confusion to your source code!
function eat(fruit) {
var food = fruit || ‘banana’;
console.log('Koko eats: ' + fruit);
}
eat();
// Koko eats: banana
eat('apple');
// Koko eats: apple

ES2015 Default Values
function eat(fruit = 'banana') {
console.log('Koko eats: ' + fruit);
}
eat();
// Koko eats: banana
eat('apple');
// Koko eats: apple

Rest
• Gets as array parameter the rest of the passed in
arguments
monkeyLog('Kiki', 'banana', 'monkey business');
function monkeyLog(monkeyName, ...stuff) {
stuff.forEach(thing => console.log(monkeyName + ' says ' + thing));
}
// Kiki says banana
// Kiki says monkey business

Spread (inverse Rest)
• Spreads an array into function arguments
o In the order of the array elements
function f (x, y, z) {
return x + y + z;
}
f(...[1,2,3])
// 6

Block Scope
• What would the output of the following code?
var events = ['click', 'dblclick', 'keydown', 'keyup'];
for (var i = 0; i < events.length; i++) {
var event = events[i];
element.addEventListener(event, function() {
console.log('got event: ' + event);
});
}

let - To The Rescue
• let allows to define a block-scoped variable:
var events = ['click', 'dblclick', 'keydown', 'keyup'];
for (var i = 0; i < events.length; i++) {
let event = events[i];
element.addEventListener(event, function() {
console.log('got event: ' + event);
});
}

Const
• Trying to set a const during runtime will raise an
error!
function calcWeight(lion) {
const pi = 3.14159265359;
if (lion.name === ‘Simba') {
pi = 3.07; // Error! Don’t do that at home kids…
}
return lion.height * lion.age / pi * pi;
}

String Templates

String Templates
• Use backticks ( ` ) for defining template strings
• Use curly brackets to embed values inside backticks
// Multiline allowed!
var str = `In older versions of JavaScript this is
not legal.`;
// Easy embedding of values inside strings
var total = 30;
var price = `The monkey costs ${total} dollars`;
var priceWithTax = `The monkey costs ${total*1.18} dollars with tax`;

String Templates - Tags
function tax(str, price) {
// str === ['This monkey costs ', ' dollars']
const TAX_RATE = 1.07;
return str[0] + price*TAX_RATE + str[1];
}
var price = 25;
var messageWithTax = tax`The monkey costs ${price} dollars`
// The monkey costs 26.75 dollars

Tags for i18n
• An interesting use-case for tags is i18n translations
var name = 'Lucas';
var greeting = locale`Hello, ${name}! How are you today?`;
// Bonjour, Lucas! Ça va comment aujourd'hui?

Tags for HTML Escaping
• We can use tags for escaping HTML content:
var monkey = {
name: 'Charlie',
profession: 'Hacker!!!<script>alert("boo")</script>'
};
safehtml`
<h1>Monkey details: ${monkey.name}</h1>
<div>Works as ${monkey.profession}</div>
`

Object Bounties

Destructuring
• List matching:
• Object Assignment:
let [first, , third] = [1,2,3];
function getMonkey() {
return {name: 'Bobi', age: 25};
}
let {name, age} = getMonkey();

Argument Destructuring
• Works with default values
• Good solution for options parameter
function summonMonkey({name}) {
console.log(`Summoning ${name}`);
}
summonMonkey({name: 'Charlie'});
// Summoning Charlie

Enhanced Object Literals
function getZoo(zooKeeper, monkeyType) {
return {
zooKeeper,
feedAnimals() {
// ...
},
[monkeyType]: new Monkey()
};
}

Project Structure
classes & modules

Classes
class Animal {
constructor(name) {
this.name = name;
}
speak() {
console.log(`${this.name} is speaking…`);
}
}
var a = new Animal('Yogi');
a.speak();

Inheritance
class Monkey extends Animal {
constructor(name, age) {
super(name);
this.age = age;
}
speak() {
console.log('Give me Banana!');
}
}
var monkey = new Monkey('Kiki', 4);
monkey.speak();

Static Methods
class Gorilla extends Monkey {
static averageWeight() {
return 150;
}
}
console.log(Gorilla.averageWeight());

Modules
• math.js
• app.js
export function sum(x, y) {
return x + y;
}
export var pi = 3.141593;
import {sum, pi} from './math';
console.log("2π = " + sum(pi, pi));

New Data Structures

Sets
var words = new Set();
words.add('hello').add('goodbye').add('hello');
// words.size === 2;
// words.has('hello') === true;

Maps
// Maps
var m = new Map();
m.set('hello', 42);
var monkey = new Monkey();
m.set(monkey, 34); // objects can be keys!
// m.get(monkey) === 34;

Weak Maps
• The keys have weak reference and will not prevent
object from being garbage collected
• There is also WeakSet
• WeakMap and WeekSet are not iterable
var zoo = new WeakMap();
var monkey = { name: 'Kiki' };
zoo.set(monkey, 42);
console.log(zoo.get('monkey'));

for-of Loop
• The for-of loop iterates over the values
o Of an array
o Of An iteratable object (which isn’t not covered in this session)
let sum = 0;
for(let number of [1, 2, 3]) {
sum += number;
}

Extras
There's much more in ES2015:
• Iterators
• Generators
• Symbols
• Tail recursion
• Promises
• Proxies, Reflection
• Learn more at:
https://github.com/lukehoban/es6features

Should I Use ES2015
Today?

Questions?

Summary
• JavaScript is a dominant language that evolved
through the years
• ECMAScript 2015 brings a lot of new options
into the JavaScript language
• Learn ECMAScript 2015 today!

Resources
• Download the slide deck:
• My Blog – http://www.gilfink.net
• Follow me on Twitter – @gilfink

Thank You!

Brand New JavaScript - ECMAScript 2015

Recommended

Recommended

More Related Content

Similar to Brand New JavaScript - ECMAScript 2015

Similar to Brand New JavaScript - ECMAScript 2015 (20)

More from Gil Fink

More from Gil Fink (20)

Recently uploaded

Recently uploaded (20)

Brand New JavaScript - ECMAScript 2015