Javascript the New Parts
•
36 likes•20,872 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
Recommended
More Related Content
Viewers also liked
Viewers also liked (20)
Similar to Javascript the New Parts
Similar to Javascript the New Parts (20)
More from Federico Galassi
More from Federico Galassi (9)
Recently uploaded
Recently uploaded (20)
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