Javascript Best Practices

Talk about some Javascript features that should be used with caution.

Transcript

1. BUENAS PRÁCTICAS!
   EN JAVASCRIPT
   @jonalvarezz
   

   View Slide

2. '5' - 3
   

   View Slide

3. '5' - 3
   2
   

   View Slide

4. '5' + + '5'
   

   View Slide

5. '5' + + '5'
   '55'
   

   View Slide

6. 'foo' + + 'foo'
   

   View Slide

7. 'foo' + + 'foo'
   'fooNaN'
   

   View Slide

8. '5' + - + - - + - - + + -
   + - + - - - '3'
   

   View Slide

9. '5' + - + - - + - - + + -
   + - + - - - '3'
   '53'
   

   View Slide

10. QUE GONORREA OME
    

    View Slide

11. 
    BMBOHVBHF
    XJUIFOPSNPVT
    expresiveQPXFS
    Douglas Crockford
    

    View Slide

12. Semicolon
    Except: for, function, if, switch, try and while
    

    View Slide

13. return!
    {!
    status: true!
    };
    

    View Slide

14. return {!
    status: true!
    };
    

    View Slide

15. View Slide

16. Floating Points
    

    View Slide

17. 0.1 + 0.2
    

    View Slide

18. 0.1 + 0.2
    0.30000000000000004
    IEEE Standard for Binary Floating-Point Arithmetic
    

    View Slide

19. 0.1 + 0.2
    0.30000000000000004
    IEEE Standard for Binary Floating-Point Arithmetic
    Use integer
    arithmetic in
    floating
    

    View Slide

20. (0.1 + 0.2)*100
    30/100
    0.3
    

    View Slide

21. parseInt()
    

    View Slide

22. parseInt("43");!
    // 43!
    !
    parseInt("43 km");!
    // 43!
    

    View Slide

23. parseInt("09");!
    // 0!
    !
    parseInt("09", 10);!
    // 9!
    

    View Slide

24. parseInt("09");!
    // 0!
    !
    parseInt("09", 10);!
    // 9!
    

    View Slide

25. parseInt("09");!
    // 0!
    !
    parseInt("09", 10);!
    // 9!
    

    View Slide

26. parseInt("09");!
    // 0!
    !
    parseInt("09", 10);!
    // 9!
    

    View Slide

27. parseInt("09");!
    // 0!
    !
    parseInt("09", 10);!
    // 9!
    "-8":464&5)&3"%*9
    1"3".&5&3
    

    View Slide

28. Equality
    Operators
    == and !=
    

    View Slide

29. '' == '0'!
    // false!
    !
    0 == '0'!
    // true!
    !
    

    View Slide

30. false == 'false'!
    // false!
    !
    false == '0'!
    // true!
    !
    

    View Slide

31. '\t\r\n ' == 0!
    // true!
    !
    

    View Slide

32. '\t\r\n ' == 0!
    // true!
    !
    

    View Slide

33. View Slide

34. View Slide

35. Use!
    === and !==
    

    View Slide

36. NaN
    Not a Number
    

    View Slide

37. + "0";!
    // 0!
    !
    !
    + "foo";!
    // NaN
    

    View Slide

38. NaN === NaN!
    // false!
    !
    !
    NaN !== NaN!
    // true
    

    View Slide

39. isNaN("I'm a NaN")!
    // true
    

    View Slide

40. *DPVMECFBCFUUFS
    QSPHSBNNFSCZVTJOH
    POMZUIFgood partsBOE
    BWPJEJOHUIFbad parts
    Douglas Crockford
    

    View Slide

41. Global variables
    The worst JavaScript's feature
    

    View Slide

42. var foo = "value";!
    !
    var moo = function() {!
    ! foo = "Change global";!
    }
    // Place a var statement!
    // outside of any function
    

    View Slide

43. window.foo = "value";
    // Defining direct to global
    object
    

    View Slide

44. foo = "value";
    // Implied global
    

    View Slide

45. "-8":464&
    VARIABLE STATEMENT
    var foo = "value";
    

    View Slide

46. var moo = function() {!
    !
    ! var foo = "yay!";!
    !
    // ....!
    !
    }
    // The right way
    

    View Slide

47. var MYAPP = {};!
    !
    var MYAPP.author = {!
    "first-name" : "Jonathan",!
    "username" : "@jonalvarezz"!
    };!
    !
    var MYAPP.speakAt = {!
    "name" : "PereiraJS",!
    "location" : "Pereira"!
    };!
    // Need globals?
    

    View Slide

48. #&55&3
    

    View Slide

49. Functions
    

    View Slide

50. function moo() {!
    !
    }
    // function statement
    var moo = function() {!
    !
    }
    // function expression
    

    View Slide

51. moo(); // Prints "foo"!
    !
    function moo() {!
    ! console.log("foo");!
    }
    // function statement!
    // defined at run-time
    

    View Slide

52. moo(); // Error!
    !
    var moo = function() {!
    ! console.log("foo");!
    }
    // function expression!
    // defined at parse-time
    

    View Slide

53. if (true) { !
    ! function foo() {!
    ! ! return 1;!
    }!
    }!
    else { !
    ! function foo() {!
    ! ! return 2;!
    }!
    }!
    !
    foo(); !
    // function statement
    

    View Slide

54. if (true) { !
    ! function foo() {!
    ! ! return 1;!
    }!
    }!
    else { !
    ! function foo() {!
    ! ! return 2;!
    }!
    }!
    !
    foo(); // 2 !
    // function statement
    

    View Slide

55. var foo;!
    !
    if (true) { !
    ! foo = function() {!
    ! ! return 1;!
    }!
    }!
    else { !
    ! foo = function() {!
    ! ! return 2;!
    }!
    }!
    !
    foo(); // 1 !
    // function expression
    

    View Slide

56. var myMath = {!
    ! add: function( a, b ) {!
    ! ! return a + b;!
    ! }!
    };!
    !
    myMath.add( 2, 4 ); // 6 !
    // function expression
    

    View Slide

57. '*345$-"44'6/$5*0/4
    A function is an "Object"
    

    View Slide

58. '*345$-"44'6/$5*0/4
    A function is an "Object"
    

    View Slide

59. var moo = function() {!
    ! // yay!!
    }
    // function expression
    

    View Slide

60. (function() {!
    ! !
    ! 'use strict';!
    !
    ! var a, b, c;!
    !
    ! // ...!
    !
    })();
    // function statement!
    // Anonymous function!
    // Self invoked function
    

    View Slide

61. Scope
    

    View Slide

62. !
    var foo = function() {!
    ! var a = 3, b = 5;!
    !
    ! var bar = function() {!
    ! ! var b = 7, c = 11;!
    !
    ! ! a += b + c;!
    ! };!
    !
    ! bar();!
    !
    ! return a;!
    }
    

    View Slide

63. !
    var foo = function() {!
    ! var a = 3, b = 5;!
    !
    ! var bar = function() {!
    ! ! var b = 7, c = 11;!
    !
    ! ! a += b + c;!
    ! };!
    !
    ! bar();!
    !
    ! return a;!
    } // 21
    

    View Slide

64. !
    var foo = function() {!
    ! var a = 3, b = 5;!
    !
    ! var bar = function() {!
    ! ! var b = 7, c = 11;!
    !
    ! ! a += b + c;!
    ! };!
    !
    ! bar();!
    !
    ! return a;!
    } // 21
    Function Scope!
    

    View Slide

65. Closures
    

    View Slide

66. * CODES *
    

    View Slide

67. Modules
    

    View Slide

68. "NPEVMFJTBGVODUJPO
    PSPCKFDUUIBUQSFTFOUT
    BOEJOUFSGBDFCVUUIBU
    hides its state and
    implementation
    

    View Slide

69. var seria_maker = function() {!
    ! var prefix = '';!
    ! var seq = 0;!
    ! return {!
    ! ! set_prefix: function(p) {!
    ! ! ! prefix = String(p);!
    ! ! },!
    ! ! set_seq: function(s) {!
    ! ! ! seq = s;!
    ! ! },!
    ! ! gensym: function() {!
    ! ! ! var result = prefix + seq;!
    ! ! ! seq += 1;!
    ! ! ! return result;!
    ! ! }!
    ! };!
    };
    // Object that generates uniques strings
    

    View Slide

70. var sm = seria_maker();!
    !
    sm.set_prefix('Q');!
    !
    sm.set_seq(1000);!
    !
    var unique = sm.gensym();!
    !
    // Q1000
    // Object that generates uniques strings
    

    View Slide

71. jQuery
    

    View Slide

72. jQuery
    

    View Slide

73. View Slide

74. %PZPV3&"--:
    OFFEK2VFSZ
    

    View Slide

75. :PVNJHIUOPU
    OFFEK2VFSZ
    

    View Slide

76. View Slide

77. View Slide

78. 5IBOLZPV
    @jonalvarezz
    

    View Slide