JavaScript - new features in ECMAScript 6

JavaScript revolution

New syntax ( sugar of course! ) &

standard library

2013

Kamil Gałuszka Django / Objective-C / Python World

JavaScript is only a hobby (for now)

@galuszkak

http://solution4future.com

Who I am?

Introduction & Inspiration

● ECMAScript 3 ( 1999 )

● ECMAScript 4 ( incompatible with third version 2005 )

● ECMAScript 5 ( 2009 )

● ECMAScript 5.1 ( 2011 )

● TC39 - Committee for Standardization

JavaScript, JS, ECMAScript, ES

● ES 5.1 standard == 243 pages

Funny Facts

● JavaScript: The Definitive Guide by David Flanagan (6th edition)== 1078 pages

● Draft of standard ES 6.0 == 421 pages

● JavaScript: The Definitive Guide by David Flanagan (7th edition)== ? pages ;)

Warm Up

false == "0" false == "false"null == undefined "" == 0 NaN === NaN6.toString(); " \n\t" == 0; obj = {x:10, y:20};delete obj.y;obj.y == null obj.y == undefined

false === "0"null === undefined"" === 0

obj.y === nullobj.y === undefined

ES.Next === ECMAScript 6

ES 6 is fully compatible with ES5 (strict mode)

ES.Harmony in next versions of ECMAScript

ES.Next vs ES.Harmony

Two new significant keywords:

let lock scoped variableconst read-only variable. (couldn't be hided by other variable etc.)

Typical problem in ES 5

var result = [];for (var length = 10; length--;){ var len = length; result[len] = function(){ return len; }}result[5]() // 0result[2]() // 0

WHY?

Block Scope

Solution ES 5

var result = [];for (var length = 10; length--;){ var len = length; result[len] = (function(dlugosc){ return function(){ return dlugosc; } })(len)}result[5]() // 5result[2]() // 2

use closure

Block Scope

Solution ES 6 (Cleaner, nicer, AWESOME!)

var result = [];for (var length = 10; length--;){ let len = length; result[len] = function(){ return len;}}result[5]() // 5result[2]() // 2

Block Scope

Shorthand Object Literals

ES 5 version:

var cat = "Molly";var dog = "Rex";var pets = { 'cat': cat, 'dog': dog,}

ES 6 version:

var cat = "Molly";var dog = "Rex";var pets = {cat,dog}

Shorthand Object Literals

function Animal(name){ this.name = name;this.age = 0;

}

Animal.prototype = {roar(text){

//old version was function roar(text)return `Animal ${this.name}

roars:${text}` // template syntax}

}

Destructing Assignments(extraction from objects, swap variables)

var {parse, stringify} = JSON;

var [, areaCode, local] = /^(\d{3})-(\d{3}-\d{4})$/.exec("048-032-7777");

[left, right] = [right, left];

var poets = [{ "name": "T.S. Eliot", "works": [{ "title": "The Love Song", "date": 1915 }, { "title": "Rhapsody", "date": 1917 }] }, { "name": "Ezra Pound", "works": [{ "title": "Ripostes", "date": 1912 }] }];

Destructuring Nested Objects

ES 5 VERSION ( really hard to remember )

var author = poets[0]['name'];var title = poets[0]['works'][1]['title'];var date = poets[0]['works'][1]['date'];


ES 6 version (AWESOME !)

var [{'name': author, 'works': [, {title, date}]}] = poets; // Select first author and his second book and store it in variables author, title, date

`"${title}", by ${author}, was published in ${date}.` // Template creating string from this variables.


Rhapsody, by T.S. Eliot, was published in 1917

// ES 5function Person(name, age){

this.name = name || "Anonim";this.age = age || 0;

}

Default parameters

// ES 6function Person(name="Anonim", age=0){ this.name = name; this.age = 0;}

js>function f(a, b, ...r) { print(Array.isArray(r)); return r.concat(a, b); }js>f(1, 2)true[1, 2]js>f(1, 2, 3)true[3, 1, 2]js>f(1, 2, 3, 4, 5)true[3, 4, 5, 1, 2]

...rest parameters

//ES 5 merging arrayjs> var a = [1, 2][3, 4, 5]js> var b = [3, 4, 5][1, 2]js> a = a.concat(b)[1, 2, 3, 4, 5]

...spread

//ES 6 merging array (AWESOME!)js> var a = [3, 4, 5][3, 4, 5]js> var b = [1, 2, ...a][1, 2, 3, 4, 5]

Array Comprehensions

var arr = [ x for (x of a) if (x.color === ‘blue’) ]

var arr = [ square(x) for (x of [1,2,3,4,5]) ]

Example by Addy Osmani http://addyosmani.com/blog/a-few-new-things-coming-to-javascript/

http://addyosmani.com/blog/a-few-new-things-coming-to-javascript/



Modules

module Car { // import … // export … }





Modules

module Car { // Internal var licensePlateNo = '556-343'; // External export function drive(speed, direction) { console.log('details:', speed, direction); } export module engine{ export function check() { } } };





Imports (Yes! YES! No requirejs or AMD needed)

import "crypto" as crypto; import { encrypt, decrypt } from "crypto";import { encrypt: enc } from "crypto";

import {drive, engine} from Car;





module widgets { // ... class DropDownButton extends Widget { constructor(attributes) { super(attributes); this.buildUI(); } buildUI() { this.domNode.onclick = function(){ // ... }; } } }

Classes





var widgets = (function(global) { function DropDownButton(attributes) { Widget.call(this, attributes); this.buildUI(); } DropDownButton.prototype = Object.create(Widget.prototype, { constructor: { value: DropDownButton }, buildUI: { value: function(e) { this.domNode.onclick = function(e) { // ... } }}})})(this);

Classes





Compatibility Matrix

http://kangax.github.com/es5-compat-table/es6/

Thanks to...

Douglas Crockford http://javascript.crockford.com/

Kit Cambridge http://kitcambridge.be/ (His speech: http://www.youtube.com/watch?v=Dt0f2XdvriQ)

TC39

Addy Osmani http://addyosmani.com/blog/a-few-new-things-coming-to-javascript/

http://javascript.crockford.com/

http://kitcambridge.be/




Technology

JavaScript - new features in ECMAScript 6