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

2. Who I am?
Kamil Gałuszka
Django / Objective-C / Python World
JavaScript is only a hobby (for now)
@galuszkak
http://solution4future.com

3. Introduction & Inspiration

4. 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

5. 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 ;)

6. 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

7. 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

8. 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?

9. 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]() // 5
result[2]() // 2
use closure

10. 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]() // 5
result[2]() // 2

11. 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,
}

12. 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
}
}

13. 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];

14. 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
}]
}];

15. 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'];

16. Destructuring Nested Objects
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

17. 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;
}

18. ...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]

19. ...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]

20. 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/

21. Modules
module Car {
// import …
// export …
}
Example by Addy Osmani http://addyosmani.com/blog/a-few-new-
things-coming-to-javascript/

22. 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() { }
}
};
Example by Addy Osmani http://addyosmani.com/blog/a-few-new-
things-coming-to-javascript/

23. 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;
Example by Addy Osmani http://addyosmani.com/blog/a-few-new-
things-coming-to-javascript/

24. Classes
module widgets {
// ...
class DropDownButton extends Widget {
constructor(attributes) {
super(attributes);
this.buildUI();
}
buildUI() {
this.domNode.onclick = function(){
// ...
};
}
}
Example by Addy Osmani http://addyosmani.com/blog/a-few-new-
} things-coming-to-javascript/

25. 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) {
// ...
}
Example by Addy Osmani http://addyosmani.com/blog/a-few-new-
}}})})(this); things-coming-to-javascript/

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

27. 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/