This document discusses new features coming to JavaScript in ECMAScript 6, including: 1) Block scope keywords "let" and "const" that allow for block-level scoping of variables. 2) Shorthand syntax for object literals and method definitions. 3) Destructuring assignments for extracting values from objects and arrays. 4) Default parameter values, rest parameters, and spread syntax for working with functions and arrays. 5) New features like modules, classes, and imports for better organizing code.

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/