Down the Rabbit Hole: Javascript in Wonderland

What even makes sense in Javascript?

For a language originally created in 10 days it surely has a lot of quirks and perks many JS developers are unaware of. Sometimes, it might even seem like we fell down the rabbit hole only to find that NaN is actually a Number, undefined can be defined, +!![] equals 1, Array.sort()may not work as you suspected and so much other nonsense that can trip any JS developer’s mind.

This talk is a collection of Javascript’s oddities and unexpected behaviors that hopefully will prevent some future headaches and help understand the language that we all love in a more deeper and meaningful way.

Video: https://www.youtube.com/watch?v=YXdTfLqnIf8&index=17&list=PL37ZVnwpeshE6PbF5GB4hvtU3A4HqMfxf

Transcript

1. JSConf Budapest 2016 JAVASCRIPT IN WONDERLAND DOWN THE RABBIT HOLE: Claudia Hernández
2. @KOSTE4
6. JK
8. but seriously…
9. Math.max() // -Infinity Math.min() // Infinity
10. Math.min() < Math.max() // false
11. .1+.2 // 0.30000000000000004
12. var a = 012 
 console.log(a) // 10
13. [1,2,3] === [1,2,3] //false
14. alert(111111111111111111111) // alerts 111111111111111110000
15. ?????lolwat
16. CURIOUSER AND CURIOUSER
17. ― NaN ―
18. typeof NaN // number
19. var foo = 2 / 'bar' // NaN
20. 0/0 // NaN
21. Math.sqrt(-9) // NaN
22. typeof NaN // number
23. Mathematical operations can’t lead to an error or crash in JavaScript
24. NaN === NaN // false
25. NaN is actually defined by the IEEE754 floating-point standard
26. 16, 777, 214
27. NaN !== NaN
29. isNaN(NaN) // true
30. – null –
31. typeof null // object
33. if (typeof rabbit === 'object') {
 console.log(rabbit.color)
 }
35. TypeError: Cannot read property 'color' of null
36. if (typeof rabbit === 'object' && rabbit !== null) {
 console.log(rabbit.color) // white !
 }
37. ‖ Array.sort() ‖
38. myArray = [33, 2, 98, 25, 4] myArray.sort() // [ 2, 25, 33, 4, 98 ]
39. lexicographical sorting 'dictionary' or 'telephone book' not numerical order
40. colors = ['red', 'blue'] colors.sort() // ['blue', 'red'] numbers = [80, 9] numbers.sort() // [80, 9]
41. 
 UNICODE CODE POINT VALUE 80 = 56 48 9 = 57 00

42. str.codePointAt(pos)
43. // [ 2, 25, 33, 4, 98 ]
44. function compare (a, b) {
 if (a < b ) return -1 // a comes first than b
 else if (a > b) return 1 // b comes first than a
 else return 0 // a and b are left unchanged
 }
45. myArray = [33, 2, 98, 25, 4] myArray.sort( (a,b) => a - b ) // [ 2, 4, 25, 33, 98 ]
46. — ~ operator —
47. console.log(~-2) // 1 console.log(~-1) // 0 console.log(~0) // -1 console.log(~1) // -2 console.log(~2) // -3
48. -(N+1)
49. var teaParty = ['madHatter', marchHare', 'dormouse'];
50. if (teaParty.indexOf('marchHare') >= 0) {
 // marchHare in the teaParty
 } if (teaParty.indexOf('marchHare') != -1) {
 // marchHare in the teaParty
 } if (teaParty.indexOf('marchHare') < 0) {
 // marchHare not in the teaParty
 } if (teaParty.indexOf('marchHare') == -1) {
 // marchHare not in the teaParty
 }
51. if (~teaParty.indexOf('marchHare')) {
 // marchHare in the teaParty
 } else {
 // marchHare not in the teaParty
 }
53. ― for loops ―
54. for(;;) {}
55. for (initialization; condition; iteration) {
 // code
 }
56. var i = 0
 for (; i < 9; i++) {}
57. for (var i = 0;; i++) {
 if (i > 3) break;
 // code
 }
58. for(;i--;) {}
59. for(;;) {} = for(; true ;) = while(true) {}
60. – undefined –
61. var cheshireCat console.log(cheshireCat == undefined) // true
62. undefined in window // true
63. undefined = "we are all mad here" console.log(undefined)
64. // IE8 & below undefined = "we are all mad here" console.log(undefined) // "we are all mad here" // Modern browsers undefined = "we are all mad here" console.log(undefined) // undefined
66. var undefined = 5 console.log(undefined) // 5
67. What have we learned so far ?
68. Not a Number is a Number
69. null is an object
70. Array.sort() sorts lexicographically by default
71. ~ is useful for functions returning -1
72. all parts in a for loop are optional
73. undefined can be defined (sometimes)
75. A MAD JS-PARTY
76. Disclaimer The following content is designed to challenge and amuse programmers, not made to be suitable for practical use
77. non alphanumeric js
78. [] access arrays/strings and object properties () call functions and avoid errors {} to get the string "[object Object]" + append strings, sum, and cast things to numbers ! cast things to booleans – vocabulary –
80. ![] = false !![] = true ‖ the basics ‖
81. +![] = 0 +!![] = 1 ‖ the basics ‖
82. 0 = +![] 1 = +!![] 2 = !![]+!![] 3 = !![]+!![]+!![] 4 = !![]+!![]+!![]+!![] 5 = !![]+!![]+!![]+!![]+!![] 6 = !![]+!![]+!![]+!![]+!![]+!![] 7 = !![]+!![]+!![]+!![]+!![]+!![]+!![] 8 = !![]+!![]+!![]+!![]+!![]+!![]+!![]+!![] 9 = !![]+!![]+!![]+!![]+!![]+!![]+!![]+!![]+!![]
83. ![] + [] = "false" !![] + [] = "true" – strings –
84. ![] + "" = "false" !![] + "" = "true" – strings –
85. +!![] + [] = "1" !![]+!![] + [] = "2" – strings –
86. +(("1")+("2")+("3"))
87. +((+!![]+[])+(!![]+!![]+[])+(!![]+!![]+!![]+[]))
88. [][[]] = undefined +{} = NaN []+{} = "[object Object]"
89. "false"[0] = "f" "undefined"[5] = "i" "false"[2] = "l" "true"[0] = "t" "true"[3] = "e" "true"[1] = "r"
91. call, concat, constructor, join, slice, sort, filter…
92. []["filter"]["constructor"]( "alert('1')" )()
93. []["filter"]["constructor"]( "alert('1')" )()
94. []["filter"]["constructor"]( "alert('1')" )()
95. function["constructor"]( "alert('1')" )()
96. function["constructor"]( "alert('1')" )()
97. Function( "alert('1')" )()
98. (function(){alert('1')})()
99. (function(){alert('1')})()
100. ][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]])[+!+[]+ !+[]]]+(!![]+[])[!+[]+!+[]+!+[]]+(![]+[])[!+[]+!+[]+!+[]]+([][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![] [+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]]+[])[!+[]+!+[]+!+[]]+(![]+[])[+!+[]]+(+(!+[]+!+[]+[+!+[]]+[+!+[]]))[(!![]+[] []]+(!![]+[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[ !+[]+[+[]]]+(+![]+([]+[])[([][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[ !![]+[])[+!+[]]]+[])[!+[]+!+[]+!+[]]+(!![]+[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[ +[]+!+[]+!+[]]+(!![]+[])[+!+[]]])[+!+[]+[+[]]]+([][[]]+[])[+!+[]]+(![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[+!+[]]+([][[ ])[+[]]+([][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]] [!+[]+!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[ +[]+!+[]]+(!![]+[])[+!+[]]])[+!+[]+[+[]]]+(!![]+[])[+!+[]]])[+!+[]+[+[]]]+(!![]+[])[+[]]+(!![]+[])[+!+[]]+([![]]+[][[]])[+!+[]+[ ]+([][[]]+[])[+!+[]]+(+![]+[![]]+([]+[])[([][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[! +!+[]+!+[]]+(!![]+[])[+!+[]]]+[])[!+[]+!+[]+!+[]]+(!![]+[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[] []]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]])[+!+[]+[+[]]]+([][[]]+[])[+!+[]]+(![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[ !+[]]+([][[]]+[])[+[]]+([][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+( +[])[+!+[]]]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[ !![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]])[+!+[]+[+[]]]+(!![]+[])[+!+[]]])[!+[]+!+[]+[+[]]]](!+[]+!+[]+!+[]+[+!+[]])[+!+[]]+ +[])[!+[]+!+[]+!+[]])()(([]+[])[([![]]+[][[]])[+!+[]+[+[]]]+(!![]+[])[+[]]+(![]+[])[+!+[]]+(![]+[])[!+[]+!+[]]+([![]]+[][[]])[+!+[]+ ]+([][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]]+[])[ +!+[]+!+[]]+(![]+[])[!+[]+!+[]+!+[]]]()[+[]])[+[]]+(!+[]+!+[]+!+[]+!+[]+[!+[]+!+[]+!+[]+!+[]+!+[]+!+[]+!+[]+!+[]])+[])+( +[])[!+[]+!+[]+!+[]]+(![]+[])[!+[]+!+[]]+(![]+[])[!+[]+!+[]]+(!![]+[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[ !![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]])[+!+[]+[+[]]]+(+[![]]+[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+ +[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]])[+!+[]+[+!+[]]]+[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]] ]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]][([][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[! +!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]]+[])[!+[]+!+[]+!+[]]+(!![]+[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+ []]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]])[+!+[]+[+[]]]+([][[]]+[])[+!+[]]+(![]+[])[!+[ +[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[+!+[]]+([][[]]+[])[+[]]+([][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+ []]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+ ]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]])[+!+[]+[+[]]]+(!![]+[])[+!+[]]]((!![]+[])[+!+[]]
102. http://patriciopalladino.com/files/hieroglyphy/ by Patricio Palladino
103. http://utf-8.jp/public/jsfuck.html by Kenji Aiko
104. http://syllab.fr/projets/experiments/sixcharsjs/ 6chars.js
105. http://jscrew.it/ by Francesco Trotta
106. http://www.jsfuck.com/ by Martin Kleppe
107. https://github.com/fasttime/jquery-screwed
110. http://blog.checkpoint.com/2016/02/02/ebay-platform-exposed-to-severe-vulnerability/
111. “eBay prevents users from including scripts or iFrames by filtering out those HTML tags. However, by using JSF*ck the attacker can insert a remote controllable JS that can, for example, create multiple payloads for a different user agent”
115. function foo () {
 setTimeout (function () {
 console.log('name: ', this.name) 
 }, 100) 
 } // name:
 foo.call( { name: "alice"} )
116. function foo () {
 var self = this
 setTimeout (function () {
 console.log('name: ', self.name) 
 }, 100) 
 } // name: alice
 foo.call( { name: "alice"} )
117. Arrow functions don’t have a this at all
118. this arguments super (ES6) new.target (ES6)
120. function foo () {
 setTimeout ( () => {
 console.log('name: ', this.name) 
 }, 100) 
 } // name: alice
 foo.call( { name: "alice"} )
121. function foo() {
 return () => {
 console.log('id:', this.id)
 }
 } var arrowfn = foo.call ( { id: 42 } ) setTimeout (arrowfn.bind ( { id: 100 } ), 100) // id: 42
123. WAS IT ALL A DREAM?
124. not really …
125. but, why should I care?
126. knowledge is power
127. pushing the limits
128. breaking rules
129. playing is learning
130. power of the language
131. THE BEST JAVASCRIPT DEVELOPERS ARE THOSE WHO OBSESS ABOUT LANGUAGE, WHO EXPLORE AND PLAY WITH IT EVERYDAY AND IN DOING SO DEVELOP THEIR OWN IDIOMS AND THEIR OWN VOICE. Angus Croll on ‘If Hemingway wrote Javascript'
132. THANK YOU !