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. 2.
  2. 3.
  3. 4.
  4. 5.
  5. 6.

    JK

  6. 7.
  7. 28.
  8. 32.
  9. 34.
  10. 36.

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


    console.log(rabbit.color) // white !
 }
  11. 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
 }
  12. 45.

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

    a - b ) // [ 2, 4, 25, 33, 98 ]
  13. 48.
  14. 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
 }
  15. 52.
  16. 57.

    for (var i = 0;; i++) {
 if (i >

    3) break;
 // code
 }
  17. 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
  18. 65.
  19. 74.
  20. 76.

    Disclaimer The following content is designed to challenge and amuse

    programmers, not made to be suitable for practical use
  21. 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 –
  22. 79.
  23. 82.

    0 = +![] 1 = +!![] 2 = !![]+!![] 3

    = !![]+!![]+!![] 4 = !![]+!![]+!![]+!![] 5 = !![]+!![]+!![]+!![]+!![] 6 = !![]+!![]+!![]+!![]+!![]+!![] 7 = !![]+!![]+!![]+!![]+!![]+!![]+!![] 8 = !![]+!![]+!![]+!![]+!![]+!![]+!![]+!![] 9 = !![]+!![]+!![]+!![]+!![]+!![]+!![]+!![]+!![]
  24. 89.
  25. 90.
  26. 100.

    ][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]])[+!+[]+ !+[]]]+(!![]+[])[!+[]+!+[]+!+[]]+(![]+[])[!+[]+!+[]+!+[]]+([][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![] [+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]]+[])[!+[]+!+[]+!+[]]+(![]+[])[+!+[]]+(+(!+[]+!+[]+[+!+[]]+[+!+[]]))[(!![]+[] []]+(!![]+[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[ !+[]+[+[]]]+(+![]+([]+[])[([][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[ !![]+[])[+!+[]]]+[])[!+[]+!+[]+!+[]]+(!![]+[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[ +[]+!+[]+!+[]]+(!![]+[])[+!+[]]])[+!+[]+[+[]]]+([][[]]+[])[+!+[]]+(![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[+!+[]]+([][[ ])[+[]]+([][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]] [!+[]+!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[ +[]+!+[]]+(!![]+[])[+!+[]]])[+!+[]+[+[]]]+(!![]+[])[+!+[]]])[+!+[]+[+[]]]+(!![]+[])[+[]]+(!![]+[])[+!+[]]+([![]]+[][[]])[+!+[]+[

    ]+([][[]]+[])[+!+[]]+(+![]+[![]]+([]+[])[([][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[! +!+[]+!+[]]+(!![]+[])[+!+[]]]+[])[!+[]+!+[]+!+[]]+(!![]+[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[] []]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]])[+!+[]+[+[]]]+([][[]]+[])[+!+[]]+(![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[ !+[]]+([][[]]+[])[+[]]+([][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+( +[])[+!+[]]]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[ !![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]])[+!+[]+[+[]]]+(!![]+[])[+!+[]]])[!+[]+!+[]+[+[]]]](!+[]+!+[]+!+[]+[+!+[]])[+!+[]]+ +[])[!+[]+!+[]+!+[]])()(([]+[])[([![]]+[][[]])[+!+[]+[+[]]]+(!![]+[])[+[]]+(![]+[])[+!+[]]+(![]+[])[!+[]+!+[]]+([![]]+[][[]])[+!+[]+ ]+([][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]]+[])[ +!+[]+!+[]]+(![]+[])[!+[]+!+[]+!+[]]]()[+[]])[+[]]+(!+[]+!+[]+!+[]+!+[]+[!+[]+!+[]+!+[]+!+[]+!+[]+!+[]+!+[]+!+[]])+[])+( +[])[!+[]+!+[]+!+[]]+(![]+[])[!+[]+!+[]]+(![]+[])[!+[]+!+[]]+(!![]+[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[ !![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]])[+!+[]+[+[]]]+(+[![]]+[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+ +[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]])[+!+[]+[+!+[]]]+[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]] ]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]][([][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[! +!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]]+[])[!+[]+!+[]+!+[]]+(!![]+[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+ []]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]])[+!+[]+[+[]]]+([][[]]+[])[+!+[]]+(![]+[])[!+[ +[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[+!+[]]+([][[]]+[])[+[]]+([][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+ []]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+ ]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]])[+!+[]+[+[]]]+(!![]+[])[+!+[]]]((!![]+[])[+!+[]]
  27. 101.
  28. 108.
  29. 109.
  30. 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”
  31. 112.
  32. 113.
  33. 114.
  34. 115.

    function foo () {
 setTimeout (function () {
 console.log('name: ',

    this.name) 
 }, 100) 
 } // name:
 foo.call( { name: "alice"} )
  35. 116.

    function foo () {
 var self = this
 setTimeout (function

    () {
 console.log('name: ', self.name) 
 }, 100) 
 } // name: alice
 foo.call( { name: "alice"} )
  36. 119.
  37. 120.

    function foo () {
 setTimeout ( () => {
 console.log('name:

    ', this.name) 
 }, 100) 
 } // name: alice
 foo.call( { name: "alice"} )
  38. 121.

    function foo() {
 return () => {
 console.log('id:', this.id)
 }


    } var arrowfn = foo.call ( { id: 42 } ) setTimeout (arrowfn.bind ( { id: 100 } ), 100) // id: 42
  39. 122.
  40. 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'