Pro Yearly is on sale from $80 to $50! »

Down the Rabbit Hole: Javascript in Wonderland

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

7c917eac018306e411041d5533910807?s=128

Claudia Hernández

May 13, 2016
Tweet

Transcript

  1. JSConf Budapest 2016 JAVASCRIPT IN WONDERLAND DOWN THE RABBIT HOLE:

    Claudia Hernández
  2. @KOSTE4

  3. None
  4. None
  5. None
  6. JK

  7. None
  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

  28. None
  29. isNaN(NaN) // true

  30. – null –

  31. typeof null // object

  32. None
  33. if (typeof rabbit === 'object') {
 console.log(rabbit.color)
 }

  34. None
  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
 }
  52. None
  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
  65. None
  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)

  74. None
  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 –
  79. None
  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"
  90. None
  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. ][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]])[+!+[]+ !+[]]]+(!![]+[])[!+[]+!+[]+!+[]]+(![]+[])[!+[]+!+[]+!+[]]+([][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![] [+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]]+[])[!+[]+!+[]+!+[]]+(![]+[])[+!+[]]+(+(!+[]+!+[]+[+!+[]]+[+!+[]]))[(!![]+[] []]+(!![]+[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[ !+[]+[+[]]]+(+![]+([]+[])[([][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[ !![]+[])[+!+[]]]+[])[!+[]+!+[]+!+[]]+(!![]+[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[ +[]+!+[]+!+[]]+(!![]+[])[+!+[]]])[+!+[]+[+[]]]+([][[]]+[])[+!+[]]+(![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[+!+[]]+([][[ ])[+[]]+([][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]] [!+[]+!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[ +[]+!+[]]+(!![]+[])[+!+[]]])[+!+[]+[+[]]]+(!![]+[])[+!+[]]])[+!+[]+[+[]]]+(!![]+[])[+[]]+(!![]+[])[+!+[]]+([![]]+[][[]])[+!+[]+[

    ]+([][[]]+[])[+!+[]]+(+![]+[![]]+([]+[])[([][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[! +!+[]+!+[]]+(!![]+[])[+!+[]]]+[])[!+[]+!+[]+!+[]]+(!![]+[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[] []]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]])[+!+[]+[+[]]]+([][[]]+[])[+!+[]]+(![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[ !+[]]+([][[]]+[])[+[]]+([][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+( +[])[+!+[]]]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[ !![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]])[+!+[]+[+[]]]+(!![]+[])[+!+[]]])[!+[]+!+[]+[+[]]]](!+[]+!+[]+!+[]+[+!+[]])[+!+[]]+ +[])[!+[]+!+[]+!+[]])()(([]+[])[([![]]+[][[]])[+!+[]+[+[]]]+(!![]+[])[+[]]+(![]+[])[+!+[]]+(![]+[])[!+[]+!+[]]+([![]]+[][[]])[+!+[]+ ]+([][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]]+[])[ +!+[]+!+[]]+(![]+[])[!+[]+!+[]+!+[]]]()[+[]])[+[]]+(!+[]+!+[]+!+[]+!+[]+[!+[]+!+[]+!+[]+!+[]+!+[]+!+[]+!+[]+!+[]])+[])+( +[])[!+[]+!+[]+!+[]]+(![]+[])[!+[]+!+[]]+(![]+[])[!+[]+!+[]]+(!![]+[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[ !![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]])[+!+[]+[+[]]]+(+[![]]+[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+ +[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]])[+!+[]+[+!+[]]]+[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]] ]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]][([][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[! +!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]]+[])[!+[]+!+[]+!+[]]+(!![]+[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+ []]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]])[+!+[]+[+[]]]+([][[]]+[])[+!+[]]+(![]+[])[!+[ +[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[+!+[]]+([][[]]+[])[+[]]+([][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+ []]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+ ]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]])[+!+[]+[+[]]]+(!![]+[])[+!+[]]]((!![]+[])[+!+[]]
  101. None
  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

  108. None
  109. None
  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”
  112. None
  113. None
  114. None
  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)

  119. None
  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
  122. None
  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 !