Updated version of talk "Javascript the New Parts". I gave this at JsDay on May 12th 2011. I updated with latest stats and improved es5 coverage, most notably strict mode. 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.jsday.it/ Follow me on Twitter! https://twitter.com/federicogalassi

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

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

3. Javascript
public in
1996

4. No time to fix

5. Standard 1999
Ecmascript
3rd edition
“Worst name ever”

6. TC39
Committee

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/

8. They couldn’t agree

9. split
ES 3.1 ES 4
small heavy
fixes stuff

10. the winner
ES 3.1
Ecmascript
5th edition

11. the loser
ES 4
Harmony

12. ES5
just fixes
javascript

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

14. Better
object oriented
programming

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

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

17. Ugly

18. 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”

19. Simple
and
Powerful

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

23. Properties
were values
bart.age
> 10

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

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

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

27. 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
}
})

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

32. enumerable
+
writable
security

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

35. Better
extensibility

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

37. No more
pollution

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

42. The world
is yours

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

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
(new Date).toISOString()
> 2010-­‐02-­‐20T05:52:53.649Z

47. 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”)

48. Strict mode

49. 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-firefox-4/

50. 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 !???
http://hacks.mozilla.org/2011/01/ecmascript-5-strict-mode-in-firefox-4/

51. Securing javascript
“use strict”;
function miracle() { return this }
miracle()
// undefined !!!!!
http://hacks.mozilla.org/2011/01/ecmascript-5-strict-mode-in-firefox-4/

52. JOY

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

54. State of the
Onion

55. Onion because
you can start crying

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

57. no IE6
I don’t
shoot the
red cross

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

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

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

61. 10.1 10.5, 10.6, 10.7, 11, 11.10
http://kangax.github.com/es5-compat-table/

62. My pick is
chrome
firefox 4

63. Modern
Browsers
OK

64. Old
Browsers
ARGH

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

66. even worse

67. Go figure

68. we need a Miracle

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