Javascript Best Practices

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

Transcript

1. BUENAS PRÁCTICAS! EN JAVASCRIPT @jonalvarezz
2. '5' - 3
3. '5' - 3 2
4. '5' + + '5'
5. '5' + + '5' '55'
6. 'foo' + + 'foo'
7. 'foo' + + 'foo' 'fooNaN'
8. '5' + - + - - + - - + + - + - + - - - '3'
9. '5' + - + - - + - - + + - + - + - - - '3' '53'
10. QUE GONORREA OME
11. 
    B
    MBOHVBHF
    
    XJUI
    FOPSNPVT
    
    expresive
    QPXFS Douglas Crockford
12. Semicolon Except: for, function, if, switch, try and while
13. return! {! status: true! };
14. return {! status: true! };
16. Floating Points
17. 0.1 + 0.2
18. 0.1 + 0.2 0.30000000000000004 IEEE Standard for Binary Floating-Point Arithmetic
19. 0.1 + 0.2 0.30000000000000004 IEEE Standard for Binary Floating-Point Arithmetic Use integer arithmetic in floating
20. (0.1 + 0.2)*100 30/100 0.3
21. parseInt()
22. parseInt("43");! // 43! ! parseInt("43 km");! // 43!
23. parseInt("09");! // 0! ! parseInt("09", 10);! // 9!
24. parseInt("09");! // 0! ! parseInt("09", 10);! // 9!
25. parseInt("09");! // 0! ! parseInt("09", 10);! // 9!
26. parseInt("09");! // 0! ! parseInt("09", 10);! // 9!
27. parseInt("09");! // 0! ! parseInt("09", 10);! // 9! "-8":4
    64&
    5)&
    3"%*9
    1"3".&5&3
28. Equality Operators == and !=
29. '' == '0'! // false! ! 0 == '0'! // true! !
30. false == 'false'! // false! ! false == '0'! // true! !
31. '\t\r\n ' == 0! // true! !
32. '\t\r\n ' == 0! // true! !
35. Use! === and !==
36. NaN Not a Number
37. + "0";! // 0! ! ! + "foo";! // NaN
38. NaN === NaN! // false! ! ! NaN !== NaN! // true
39. isNaN("I'm a NaN")! // true
40. *
    DPVME
    CF
    B
    CFUUFS
    
    QSPHSBNNFS
    CZ
    VTJOH
    POMZ
    UIF
    good parts
    BOE
    BWPJEJOH
    UIF
    bad parts Douglas Crockford
41. Global variables The worst JavaScript's feature
42. var foo = "value";! ! var moo = function() {! ! foo = "Change global";! } // Place a var statement! // outside of any function
43. window.foo = "value"; // Defining direct to global object
44. foo = "value"; // Implied global
45. "-8":4
    64&
    VARIABLE STATEMENT var foo = "value";
46. var moo = function() {! ! ! var foo = "yay!";! ! // ....! ! } // The right way
47. var MYAPP = {};! ! var MYAPP.author = {! "first-name" : "Jonathan",! "username" : "@jonalvarezz"! };! ! var MYAPP.speakAt = {! "name" : "PereiraJS",! "location" : "Pereira"! };! // Need globals?
48. #&55&3
49. Functions
50. function moo() {! ! } // function statement var moo = function() {! ! } // function expression
51. moo(); // Prints "foo"! ! function moo() {! ! console.log("foo");! } // function statement! // defined at run-time
52. moo(); // Error! ! var moo = function() {! ! console.log("foo");! } // function expression! // defined at parse-time
53. if (true) { ! ! function foo() {! ! ! return 1;! }! }! else { ! ! function foo() {! ! ! return 2;! }! }! ! foo(); ! // function statement
54. if (true) { ! ! function foo() {! ! ! return 1;! }! }! else { ! ! function foo() {! ! ! return 2;! }! }! ! foo(); // 2 ! // function statement
55. var foo;! ! if (true) { ! ! foo = function() {! ! ! return 1;! }! }! else { ! ! foo = function() {! ! ! return 2;! }! }! ! foo(); // 1 ! // function expression
56. var myMath = {! ! add: function( a, b ) {! ! ! return a + b;! ! }! };! ! myMath.add( 2, 4 ); // 6 ! // function expression
57. '*345$-"44
    '6/$5*0/4
    A function is an "Object"
58. '*345$-"44
    '6/$5*0/4
    A function is an "Object"
59. var moo = function() {! ! // yay!! } // function expression
60. (function() {! ! ! ! 'use strict';! ! ! var a, b, c;! ! ! // ...! ! })(); // function statement! // Anonymous function! // Self invoked function
61. Scope
62. ! var foo = function() {! ! var a = 3, b = 5;! ! ! var bar = function() {! ! ! var b = 7, c = 11;! ! ! ! a += b + c;! ! };! ! ! bar();! ! ! return a;! }
63. ! var foo = function() {! ! var a = 3, b = 5;! ! ! var bar = function() {! ! ! var b = 7, c = 11;! ! ! ! a += b + c;! ! };! ! ! bar();! ! ! return a;! } // 21
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!
65. Closures
66. * CODES *
67. Modules
68. "
    NPEVMF
    JT
    B
    GVODUJPO
    PS
    PCKFDU
    UIBU
    QSFTFOUT
    BOE
    JOUFSGBDF
    CVU
    UIBU
    hides its state and implementation
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
70. var sm = seria_maker();! ! sm.set_prefix('Q');! ! sm.set_seq(1000);! ! var unique = sm.gensym();! ! // Q1000 // Object that generates uniques strings
71. jQuery
72. jQuery
74. %P
    ZPV
    3&"--:
    OFFE
    K2VFSZ
75. :PV
    NJHIU
    OPU
    OFFE
    K2VFSZ
78. 5IBOL
    ZPV @jonalvarezz