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

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

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

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. ES 3.1
small
fixes
ES 4
heavy
stuff
split

10. ES 3.1
Ecmascript
5th edition
the winner

11. the loser
ES 4
Harmony

12. ES5
just fixes
javascript

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

14. Better
object oriented
programming

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

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. bart.age
> 10
Properties
were values

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

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

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

50. State of the
Onion

51. Onion because
you can start crying

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

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

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

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

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

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

58. My pick is
chrome
chrome 7

59. Modern
Browsers
OK

60. Old
Browsers
ARGH

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

65. federico.galassi@cleancode.it
Questions?