Javascript the New Parts federico.galassi@cleancode.it
slideshare.net/fgalassi

• Short history of javascript
• State of the onion • The new parts

Javascript
public in
1996

No time to fix

Standard 1999 Ecmascript 3rd edition
“Worst name ever”

TC39
Committee

Years later... “It turns out
that standard bodies are not good places to innovate. That’s what laboratories and startups are for. Standards must be drafted by consensus.” http://yuiblog.com/blog/2008/08/14/premature-standardization/

They couldn’t agree

ES 3.1 small fixes ES
4 heavy stuff split

ES 3.1 Ecmascript 5th edition
the winner

the loser
ES 4
Harmony

ES5
just fixes
javascript

• Short history of javascript
• State of the onion • The new parts

Better
object oriented
programming

Javascript is prototypal surname: “simpsons”
simpsons name: “bart” bart prototype bart.surname > “simpsons”

Wannabe classical function Simpsons(name) {
this.name = name } Simpsons.prototype.surname = “simpsons” bart = new Simpsons(“bart”) constructor class object

Ugly

Create objects simpsons = {
surname: “simpsons” } bart = Object.create(simpsons) bart.name = “bart” bart.age = 10 hugo = Object.create(bart) hugo.name = “hugo” hugo.nature = “evil” object object object

Simple
and
Powerful

Back to the father homer
= Object.create( Object.getPrototypeOf(bart) ) homer.name = “homer” homer.age = 38

Getters and setters homer =
{ beers: 3, get drunk() { return this.beers > 5 } } homer.drunk > false homer.beers = 7 homer.drunk > true

Uniform
access

bart.age > 10 Properties were
values

Object.getOwnPropertyDescriptor( bart, “age” ) >
{ value: 10, enumerable: true, writable: true, configurable: true } Properties now configurable

Object.defineProperty(bart, “age”, { value: 10,
enumerable: true, writable: true, configurable: true }) Properties can be defined

Object.defineProperties(bart, { name: { value:
“bart”, enumerable: true, writable: true, configurable: true }, age: { value: 10, enumerable: true, writable: true, configurable: true } }) More than one

bart = Object.create(simpsons, { name:
{ value: “bart”, enumerable: true, writable: true, configurable: true }, age: { value: 10, enumerable: true, writable: true, configurable: true } }) At creation time

Better
security

writable Can i assign to
it ? Object.defineProperty(bart, “age”, { value: 10, writable: false }) bart.age = 5 > 5 bart.age > 10

configurable Can i delete it
? Object.defineProperty(bart, “age”, { value: 10, configurable: false }) delete bart.age > false bart.age > 10

configurable Can i configure it
? Object.defineProperty(bart, “age”, { value: 10, configurable: false }) Object.defineProperty(bart, “age”, { configurable: true }) > TypeError: Cannot redefine property

enumerable
+
writable
security

Even more security // Can’t
add properties Object.preventExtensions(obj) // !isExtensible + all configurable = false Object.seal(obj) // isSealed + all writable = false Object.freeze(obj) Object.isExtensible(obj) Object.isSealed(obj) Object.isFrozen(obj)

The road to
safe mashups

Better
extensibility

enumerable Does for/in show it
up ? Object.defineProperty(bart, “phobia”, { value: “coffins”, enumerable: false }) // Like for/in and collect keys Object.keys(bart) > [“name”, “surname”, “age”]

No more
pollution

Hide behavior Object.defineProperty(bart, “play”, {
value: function() { ..play.. }, enumerable: false })

natives finally extensible ! Object.defineProperty(Array.prototype,
“last”, { value: function() { return this[this.length -­‐ 1] }, enumerable: false }) [4,3,5,1].last() > 1

more native with getter Object.defineProperty(Array.prototype,
“last”, { get: function() { return this[this.length -­‐ 1] }, enumerable: false }) [4,3,5,1].last > 1

works with DOM Object.defineProperty(HTMLElement.prototype,
“classes”, { get: function() { return this.getAttribute(“class”) .split(/s+/) }, enumerable: false }) $(“<div class=‘one two’ />”).get(0).classes > [“one”, “two”]

The world
is yours

Better performance // Native json
JSON.parse(string) JSON.stringify(object)

Better functional programming [1, 2,
3].map(double) > [2, 4, 6] [2, 4, 6].every(isEven) > true [1, 2, 3].filter(isEven) > [2] // forEach, some, reduce, reduceRight // indexOf, lastIndexOf

Function.bind() var bart = {
name: “bart” } var hello = function(greet) { return greet + “i am “ + this.name } // bind to this and partial application (hello.bind(bart, “hey”))() > “hey, i am bart”

More operations on natives Array.isArray([1,2,3])
> true “ hello world ”.trim() > “hello world” Date.now() > 1289395540416

// reserved keyword as properties
bart.class = “cartoon” // abstract, boolean, byte, char, const ... // OK trailing comma [1, 2, 3, ] // OK trailing comma { name: “bart”, } // 8 instead of 0 !!! parseInt(“08”) No more annoyances

JOY

• Short history of javascript
• State of the onion • The new parts

State of the
Onion

Onion because you can start
crying

http://kangax.github.com/es5-compat-table/
7 8 9

no IE6 I don’t shoot
the red cross

http://kangax.github.com/es5-compat-table/
3 3.5 4

http://kangax.github.com/es5-compat-table/
3.2 4 5 webkit

http://kangax.github.com/es5-compat-table/
5 6 7

http://kangax.github.com/es5-compat-table/
10.1 10.6 10.7

My pick is chrome chrome
7

Modern
Browsers
OK

Old
Browsers
ARGH

The real problem “IE6 is
fading very slowly. Five years ago I predicted that IE6 would fade away in five years.”

even worse

Go figure

we need a Miracle

federico.galassi@cleancode.it
Questions?