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
   

   View Slide

2. @KOSTE4
   

   View Slide

3. View Slide

4. View Slide

5. View Slide

6. JK
   

   View Slide

7. View Slide

8. but seriously…
   

   View Slide

9. Math.max() // -Infinity
   Math.min() // Infinity
   

   View Slide

10. Math.min() < Math.max() // false
    

    View Slide

11. .1+.2 // 0.30000000000000004
    

    View Slide

12. var a = 012 

    console.log(a) // 10
    

    View Slide

13. [1,2,3] === [1,2,3] //false
    

    View Slide

14. alert(111111111111111111111)
    // alerts 111111111111111110000
    

    View Slide

15. ?????lolwat
    

    View Slide

16. CURIOUSER AND
    CURIOUSER
    

    View Slide

17. ― NaN ―
    

    View Slide

18. typeof NaN // number
    

    View Slide

19. var foo = 2 / 'bar' // NaN
    

    View Slide

20. 0/0 // NaN
    

    View Slide

21. Math.sqrt(-9) // NaN
    

    View Slide

22. typeof NaN // number
    

    View Slide

23. Mathematical operations can’t lead to
    an error or crash in JavaScript
    

    View Slide

24. NaN === NaN // false
    

    View Slide

25. NaN is actually defined by the IEEE754
    floating-point standard
    

    View Slide

26. 16, 777, 214
    

    View Slide

27. NaN !== NaN
    

    View Slide

28. View Slide

29. isNaN(NaN) // true
    

    View Slide

30. – null –
    

    View Slide

31. typeof null // object
    

    View Slide

32. View Slide

33. if (typeof rabbit === 'object') {

    console.log(rabbit.color)

    }
    

    View Slide

34. View Slide

35. TypeError: Cannot read property 'color' of null
    

    View Slide

36. if (typeof rabbit === 'object' && rabbit !== null) {

    console.log(rabbit.color) // white !

    }
    

    View Slide

37. ‖ Array.sort() ‖
    

    View Slide

38. myArray = [33, 2, 98, 25, 4]
    myArray.sort()
    // [ 2, 25, 33, 4, 98 ]
    

    View Slide

39. lexicographical sorting
    'dictionary' or 'telephone book'
    not numerical order
    

    View Slide

40. colors = ['red', 'blue']
    colors.sort() // ['blue', 'red']
    numbers = [80, 9]
    numbers.sort() // [80, 9]
    

    View Slide

41. 

    UNICODE CODE
    POINT VALUE
    80 = 56 48
    9 = 57 00

    

    View Slide

42. str.codePointAt(pos)
    

    View Slide

43. // [ 2, 25, 33, 4, 98 ]
    

    View Slide

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

    }
    

    View Slide

45. myArray = [33, 2, 98, 25, 4]
    myArray.sort( (a,b) => a - b )
    // [ 2, 4, 25, 33, 98 ]
    

    View Slide

46. — ~ operator —
    

    View Slide

47. console.log(~-2) // 1
    console.log(~-1) // 0
    console.log(~0) // -1
    console.log(~1) // -2
    console.log(~2) // -3
    

    View Slide

48. -(N+1)
    

    View Slide

49. var teaParty = ['madHatter', marchHare', 'dormouse'];
    

    View Slide

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

    }
    

    View Slide

51. if (~teaParty.indexOf('marchHare')) {

    // marchHare in the teaParty

    } else {

    // marchHare not in the teaParty

    }
    

    View Slide

52. View Slide

53. ― for loops ―
    

    View Slide

54. for(;;) {}
    

    View Slide

55. for (initialization; condition; iteration) {

    // code

    }
    

    View Slide

56. var i = 0

    for (; i < 9; i++) {}
    

    View Slide

57. for (var i = 0;; i++) {

    if (i > 3) break;

    // code

    }
    

    View Slide

58. for(;i--;) {}
    

    View Slide

59. for(;;) {} = for(; true ;) = while(true) {}
    

    View Slide

60. – undefined –
    

    View Slide

61. var cheshireCat
    console.log(cheshireCat == undefined) // true
    

    View Slide

62. undefined in window // true
    

    View Slide

63. undefined = "we are all mad here"
    console.log(undefined)
    

    View Slide

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
    

    View Slide

65. View Slide

66. var undefined = 5
    console.log(undefined) // 5
    

    View Slide

67. What have we learned so far ?
    

    View Slide

68. Not a Number is a Number
    

    View Slide

69. null is an object
    

    View Slide

70. Array.sort() sorts lexicographically by default
    

    View Slide

71. ~ is useful for functions returning -1
    

    View Slide

72. all parts in a for loop are optional
    

    View Slide

73. undefined can be defined (sometimes)
    

    View Slide

74. View Slide

75. A MAD
    JS-PARTY
    

    View Slide

76. Disclaimer
    The following content is
    designed to challenge and
    amuse programmers, not
    made to be suitable for
    practical use
    

    View Slide

77. non alphanumeric js
    

    View Slide

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 –
    

    View Slide

79. View Slide

80. ![] = false
    !![] = true
    ‖ the basics
    ‖
    

    View Slide

81. +![] = 0
    +!![] = 1
    ‖ the basics
    ‖
    

    View Slide

82. 0 = +![]
    1 = +!![]
    2 = !![]+!![]
    3 = !![]+!![]+!![]
    4 = !![]+!![]+!![]+!![]
    5 = !![]+!![]+!![]+!![]+!![]
    6 = !![]+!![]+!![]+!![]+!![]+!![]
    7 = !![]+!![]+!![]+!![]+!![]+!![]+!![]
    8 = !![]+!![]+!![]+!![]+!![]+!![]+!![]+!![]
    9 = !![]+!![]+!![]+!![]+!![]+!![]+!![]+!![]+!![]
    

    View Slide

83. ![] + [] = "false"
    !![] + [] = "true"
    – strings
    –
    

    View Slide

84. ![] + "" = "false"
    !![] + "" = "true"
    – strings
    –
    

    View Slide

85. +!![] + [] = "1"
    !![]+!![] + [] = "2"
    – strings
    –
    

    View Slide

86. +(("1")+("2")+("3"))
    

    View Slide

87. +((+!![]+[])+(!![]+!![]+[])+(!![]+!![]+!![]+[]))
    

    View Slide

88. [][[]] = undefined
    +{} = NaN
    []+{} = "[object Object]"
    

    View Slide

89. "false"[0] = "f"
    "undefined"[5] = "i"
    "false"[2] = "l"
    "true"[0] = "t"
    "true"[3] = "e"
    "true"[1] = "r"
    

    View Slide

90. View Slide

91. call, concat, constructor, join, slice, sort, filter…
    

    View Slide

92. []["filter"]["constructor"]( "alert('1')" )()
    

    View Slide

93. []["filter"]["constructor"]( "alert('1')" )()
    

    View Slide

94. []["filter"]["constructor"]( "alert('1')" )()
    

    View Slide

95. function["constructor"]( "alert('1')" )()
    

    View Slide

96. function["constructor"]( "alert('1')" )()
    

    View Slide

97. Function( "alert('1')" )()
    

    View Slide

98. (function(){alert('1')})()
    

    View Slide

99. (function(){alert('1')})()
    

    View Slide

100. ][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]])[+!+[]+
     !+[]]]+(!![]+[])[!+[]+!+[]+!+[]]+(![]+[])[!+[]+!+[]+!+[]]+([][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]
     [+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]]+[])[!+[]+!+[]+!+[]]+(![]+[])[+!+[]]+(+(!+[]+!+[]+[+!+[]]+[+!+[]]))[(!![]+[]
     []]+(!![]+[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[
     !+[]+[+[]]]+(+![]+([]+[])[([][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[
     !![]+[])[+!+[]]]+[])[!+[]+!+[]+!+[]]+(!![]+[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[
     +[]+!+[]+!+[]]+(!![]+[])[+!+[]]])[+!+[]+[+[]]]+([][[]]+[])[+!+[]]+(![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[+!+[]]+([][[
     ])[+[]]+([][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]
     [!+[]+!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[
     +[]+!+[]]+(!![]+[])[+!+[]]])[+!+[]+[+[]]]+(!![]+[])[+!+[]]])[+!+[]+[+[]]]+(!![]+[])[+[]]+(!![]+[])[+!+[]]+([![]]+[][[]])[+!+[]+[
     ]+([][[]]+[])[+!+[]]+(+![]+[![]]+([]+[])[([][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!
     +!+[]+!+[]]+(!![]+[])[+!+[]]]+[])[!+[]+!+[]+!+[]]+(!![]+[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[]
     []]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]])[+!+[]+[+[]]]+([][[]]+[])[+!+[]]+(![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[
     !+[]]+([][[]]+[])[+[]]+([][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(
     +[])[+!+[]]]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[
     !![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]])[+!+[]+[+[]]]+(!![]+[])[+!+[]]])[!+[]+!+[]+[+[]]]](!+[]+!+[]+!+[]+[+!+[]])[+!+[]]+
     +[])[!+[]+!+[]+!+[]])()(([]+[])[([![]]+[][[]])[+!+[]+[+[]]]+(!![]+[])[+[]]+(![]+[])[+!+[]]+(![]+[])[!+[]+!+[]]+([![]]+[][[]])[+!+[]+
     ]+([][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]]+[])[
     +!+[]+!+[]]+(![]+[])[!+[]+!+[]+!+[]]]()[+[]])[+[]]+(!+[]+!+[]+!+[]+!+[]+[!+[]+!+[]+!+[]+!+[]+!+[]+!+[]+!+[]+!+[]])+[])+(
     +[])[!+[]+!+[]+!+[]]+(![]+[])[!+[]+!+[]]+(![]+[])[!+[]+!+[]]+(!![]+[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[
     !![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]])[+!+[]+[+[]]]+(+[![]]+[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+
     +[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]])[+!+[]+[+!+[]]]+[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]
     ]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]][([][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!
     +!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]]+[])[!+[]+!+[]+!+[]]+(!![]+[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+
     []]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]])[+!+[]+[+[]]]+([][[]]+[])[+!+[]]+(![]+[])[!+[
     +[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[+!+[]]+([][[]]+[])[+[]]+([][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+
     []]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+
     ]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]])[+!+[]+[+[]]]+(!![]+[])[+!+[]]]((!![]+[])[+!+[]]
     

     View Slide

101. View Slide

102. http://patriciopalladino.com/files/hieroglyphy/
     by Patricio Palladino
     

     View Slide

103. http://utf-8.jp/public/jsfuck.html
     by Kenji Aiko
     

     View Slide

104. http://syllab.fr/projets/experiments/sixcharsjs/
     6chars.js
     

     View Slide

105. http://jscrew.it/
     by Francesco Trotta
     

     View Slide

106. http://www.jsfuck.com/
     by Martin Kleppe
     

     View Slide

107. https://github.com/fasttime/jquery-screwed
     

     View Slide

108. View Slide

109. View Slide

110. http://blog.checkpoint.com/2016/02/02/ebay-platform-exposed-to-severe-vulnerability/
     

     View Slide

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”
     

     View Slide

112. View Slide

113. View Slide

114. View Slide

115. function foo () {

     setTimeout (function () {

     console.log('name: ', this.name) 

     }, 100) 

     }
     // name:

     foo.call( { name: "alice"} )
     

     View Slide

116. function foo () {

     var self = this

     setTimeout (function () {

     console.log('name: ', self.name) 

     }, 100) 

     }
     // name: alice

     foo.call( { name: "alice"} )
     

     View Slide

117. Arrow functions don’t have a this at all
     

     View Slide

118. this
     arguments
     super (ES6)
     new.target (ES6)
     

     View Slide

119. View Slide

120. function foo () {

     setTimeout ( () => {

     console.log('name: ', this.name) 

     }, 100) 

     }
     // name: alice

     foo.call( { name: "alice"} )
     

     View Slide

121. function foo() {

     return () => {

     console.log('id:', this.id)

     }

     }
     var arrowfn = foo.call ( { id: 42 } )
     setTimeout (arrowfn.bind ( { id:
     100 } ), 100) // id: 42
     

     View Slide

122. View Slide

123. WAS IT
     ALL A DREAM?
     

     View Slide

124. not really …
     

     View Slide

125. but, why should I care?
     

     View Slide

126. knowledge is power
     

     View Slide

127. pushing the limits
     

     View Slide

128. breaking rules
     

     View Slide

129. playing is learning
     

     View Slide

130. power of the language
     

     View Slide

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'
     

     View Slide

132. THANK YOU !
     

     View Slide