JavaScript - new features in ECMAScript 6

2013

JavaScript revolution
New syntax ( sugar of course! )
&
standard library

Who I am?

Kamil Gałuszka
Django / Objective-C / Python World
JavaScript is only a hobby (for now)

@galuszkak

http://solution4future.com

JavaScript, JS, ECMAScript, ES

● ECMAScript 3 ( 1999 )

● ECMAScript 4 ( incompatible with third version
2005 )

● ECMAScript 5 ( 2009 )

● ECMAScript 5.1 ( 2011 )

● TC39 - Committee for Standardization

Funny Facts

● ES 5.1 standard == 243 pages

● 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 === "0"
false == "false" null === undefined
null == undefined "" === 0
"" == 0
NaN === NaN
6.toString();
" nt" == 0;
obj = {x:10, y:20};
delete obj.y;
obj.y == null obj.y === null
obj.y == undefined obj.y === undefined

ES.Next vs ES.Harmony

ES.Next === ECMAScript 6

ES 6 is fully compatible with ES5 (strict mode)

ES.Harmony in next versions of ECMAScript

Block Scope

Two new significant keywords:
let lock scoped variable
const 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]() // 0
result[2]() // 0

WHY?

Block Scope
Solution ES 5

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

use closure

Block Scope

Solution ES 6 (Cleaner, nicer, AWESOME!)

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

Shorthand Object Literals

ES 5 version: ES 6 version:

var cat = "Molly"; var cat = "Molly";
var dog = "Rex"; var dog = "Rex";
var pets = { var pets = {cat,dog}
'cat': cat,
'dog': 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];

Destructuring Nested Objects
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
}]
}];


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

Default parameters

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

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

...rest parameters

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]

...spread

//ES 5 merging array
js> 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]

//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-thin
to-javascript/

Modules

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

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

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;


Classes
module widgets {
// ...
class DropDownButton extends Widget {
constructor(attributes) {
super(attributes);
this.buildUI();
}
buildUI() {
this.domNode.onclick = function(){
// ...
};
}
}
} things-coming-to-javascript/

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); things-coming-to-javascript/

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/

JavaScript - new features in ECMAScript 6

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to JavaScript - new features in ECMAScript 6 (20)

Recently uploaded (20)

JavaScript - new features in ECMAScript 6