Javascript the New Parts v2

Javascript
the
New Parts
v2

federico.galassi@cleancode.it
slideshare.net/fgalassi

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

Standard 1999
Ecmascript
3rd edition

“Worst name ever”

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/

split

ES 3.1 ES 4
small heavy
fixes stuff

the winner

ES 3.1
Ecmascript
5th edition

Better
object oriented
programming

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

bart.surname
> “simpsons”

Wannabe classical
function Simpsons(name) {
constructor
this.name = name
}

Simpsons.prototype.surname = class
“simpsons”

bart = new Simpsons(“bart”) object

Create objects
simpsons = { surname: “simpsons” } object

bart = Object.create(simpsons) object
bart.name = “bart”
bart.age = 10

hugo = Object.create(bart) object
hugo.name = “hugo”
hugo.nature = “evil”

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

Properties
were values

bart.age
> 10

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

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

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

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

writable
Can i assign to it ?
value: 10,
writable: false
})
bart.age = 5
> 5
bart.age
> 10

configurable
Can i delete it ?
value: 10,
configurable: false
})
delete bart.age
> false
bart.age
> 10

configurable
Can i configure it ?
value: 10,
configurable: false
})
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)

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”]

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”]

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

(new Date).toISOString()
> 2010-‐02-‐20T05:52:53.649Z

No more
annoyances
// 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”)

Invoking
// Globally
“use strict”;
... strict code ...

// in function scope
function test() {
“use strict”;
... strict code ...
}

http://hacks.mozilla.org/2011/01/ecmascript-5-strict-mode-in-ﬁrefox-4/

Mistakes throw errors
“use strict”;

typo = 5 // no var, ERROR

NaN = 10 // invalid assign

delete Object.prototype // invalid delete

var o = { p: 1, p: 2 } // double property !?

function dumb(p, p) // double parameter !???


Securing javascript
“use strict”;

function miracle() { return this }
miracle()

// undefined !!!!!


Onion because
you can start crying

7 8 9

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

no IE6
I don’t
shoot the
red cross

3 3.5 4


3.2 4 5 webkit


5 6 7 - 11


10.1 10.5, 10.6, 10.7, 11, 11.10


My pick is

chrome

firefox 4

The real
problem

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

http://joind.in/3374
federico.galassi@cleancode.it
twitter.com/federicogalassi
slideshare.net/fgalassi

Javascript the New Parts v2

More Related Content

What's hot (20)

Viewers also liked (13)

Similar to Javascript the New Parts v2 (20)

More from Federico Galassi (8)

Recently uploaded (20)

Javascript the New Parts v2