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/

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

https://babeljs.io/repl/

https://babeljs.io/repl/

https://google.github.io/traceur-compiler/demo/repl.html

http://www.typescriptlang.org/Playground

http://www.typescriptlang.org/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

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

http://www.gilfink.net/



Thank You!

brand new javascript - ecmascript 2015

Technology