Javascript the New Parts
•
36 likes•20,880 views
Talk i gave at WebTech Conference on November 10th 2010. Abstract: At last, ecmascript 5th edition is landing in all modern browsers. What are the new parts of the language and how can they help us to write better code? Also http://federico.galassi.net/ http://www.webtechcon.it Follow me on Twitter! https://twitter.com/federicogalassi
![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”]](https://image.slidesharecdn.com/jsthenewparts-101111152356-phpapp01/85/Javascript-the-New-Parts-36-320.jpg)
![natives finally
extensible !
Object.defineProperty(Array.prototype,
“last”, {
value: function() {
return this[this.length -‐ 1]
},
enumerable: false
})
[4,3,5,1].last()
> 1](https://image.slidesharecdn.com/jsthenewparts-101111152356-phpapp01/85/Javascript-the-New-Parts-39-320.jpg)
![more native
with getter
Object.defineProperty(Array.prototype,
“last”, {
get: function() {
return this[this.length -‐ 1]
},
enumerable: false
})
[4,3,5,1].last
> 1](https://image.slidesharecdn.com/jsthenewparts-101111152356-phpapp01/85/Javascript-the-New-Parts-40-320.jpg)
![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”]](https://image.slidesharecdn.com/jsthenewparts-101111152356-phpapp01/85/Javascript-the-New-Parts-41-320.jpg)
![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](https://image.slidesharecdn.com/jsthenewparts-101111152356-phpapp01/85/Javascript-the-New-Parts-44-320.jpg)
![More
operations on
natives
Array.isArray([1,2,3])
> true
“ hello world ”.trim()
> “hello world”
Date.now()
> 1289395540416](https://image.slidesharecdn.com/jsthenewparts-101111152356-phpapp01/85/Javascript-the-New-Parts-46-320.jpg)
![// 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](https://image.slidesharecdn.com/jsthenewparts-101111152356-phpapp01/85/Javascript-the-New-Parts-47-320.jpg)
Javascript the New Parts
- 2. • Short history of javascript • State of the onion • The new parts
- 4. No time to fix
- 5. Standard 1999 Ecmascript 3rd edition “Worst name ever”
- 7. 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/
- 10. ES 3.1 Ecmascript 5th edition the winner
- 13. • Short history of javascript • State of the onion • The new parts
- 15. Javascript is prototypal surname: “simpsons” simpsons name: “bart” bart prototype bart.surname > “simpsons”
- 16. Wannabe classical function Simpsons(name) { this.name = name } Simpsons.prototype.surname = “simpsons” bart = new Simpsons(“bart”) constructor class object
- 17. Ugly
- 18. 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
- 20. Back to the father homer = Object.create( Object.getPrototypeOf(bart) ) homer.name = “homer” homer.age = 38
- 21. Getters and setters homer = { beers: 3, get drunk() { return this.beers > 5 } } homer.drunk > false homer.beers = 7 homer.drunk > true
- 22. Uniform access
- 24. Object.getOwnPropertyDescriptor( bart, “age” ) > { value: 10, enumerable: true, writable: true, configurable: true } Properties now configurable
- 25. Object.defineProperty(bart, “age”, { value: 10, enumerable: true, writable: true, configurable: true }) Properties can be defined
- 26. Object.defineProperties(bart, { name: { value: “bart”, enumerable: true, writable: true, configurable: true }, age: { value: 10, enumerable: true, writable: true, configurable: true } }) More than one
- 27. 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
- 28. Better security
- 29. writable Can i assign to it ? Object.defineProperty(bart, “age”, { value: 10, writable: false }) bart.age = 5 > 5 bart.age > 10
- 30. configurable Can i delete it ? Object.defineProperty(bart, “age”, { value: 10, configurable: false }) delete bart.age > false bart.age > 10
- 31. configurable Can i configure it ? Object.defineProperty(bart, “age”, { value: 10, configurable: false }) Object.defineProperty(bart, “age”, { configurable: true }) > TypeError: Cannot redefine property
- 33. 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)
- 34. The road to safe mashups
- 36. 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”]
- 38. Hide behavior Object.defineProperty(bart, “play”, { value: function() { ..play.. }, enumerable: false })
- 39. natives finally extensible ! Object.defineProperty(Array.prototype, “last”, { value: function() { return this[this.length -‐ 1] }, enumerable: false }) [4,3,5,1].last() > 1
- 40. more native with getter Object.defineProperty(Array.prototype, “last”, { get: function() { return this[this.length -‐ 1] }, enumerable: false }) [4,3,5,1].last > 1
- 41. 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”]
- 44. 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
- 45. 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”
- 46. More operations on natives Array.isArray([1,2,3]) > true “ hello world ”.trim() > “hello world” Date.now() > 1289395540416
- 47. // 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
- 48. JOY
- 49. • Short history of javascript • State of the onion • The new parts
- 51. Onion because you can start crying
- 53. no IE6 I don’t shoot the red cross
- 58. My pick is chrome chrome 7
- 61. The real problem “IE6 is fading very slowly. Five years ago I predicted that IE6 would fade away in five years.”
- 62. even worse
- 63. Go figure
- 64. we need a Miracle