Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Javascript Best Practices

Javascript Best Practices

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

Jonathan Alvarez

March 19, 2015
Tweet

Other Decks in Technology

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