JavaScript: Basic rules for avoiding strange issues

JavaScript 地雷部分與實作建議：JavaScript 是一個很容易寫出很難除錯的程式語言；遵循一些準則可以減低這些困擾。

Transcript

1. JavaScript
   地雷部分與實作建議
   @denkeni
   

   View Slide

2. Published in
   2008
   

   View Slide

3. Declare all variables at top
   and don't code in global scope!
   Use "var"
   

   View Slide

4. num = 1;
   
   (function () {
   num = 2;
   })();
   
   console.log(num);
   Bad example 1
   

   View Slide

5. window.num = 1;
   
   (function () {
   window.num = 2;
   })();
   
   console.log(window.num); // 2
   What actually happened
   

   View Slide

6. num = 1;
   
   (function () {
   var num = 2;
   })();
   
   console.log(num); // 1
   Better example 1
   use "var"
   

   View Slide

7. (function () {
   var num = 1;
   
   (function () {
   var num = 2;
   })();
   
   console.log(num); // 1
   })();
   Even Better example 1
   don't code in global scope
   

   View Slide

8. Bad example 2
   (function () {
   var num = 1;
   
   (function () {
   console.log(num); // 1; function has closure.
   
   num = 2;
   console.log(num); // 2
   })();
   
   console.log(num); // 2
   })();
   

   View Slide

9. Bad example 2
   (function () {
   var num = 1;
   
   (function () {
   console.log(num);
   
   var num = 2; // no warning here!
   console.log(num);
   })();
   
   console.log(num);
   })();
   

   View Slide

10. Bad example 2
    (function () {
    var num = 1;
    
    (function () {
    console.log(num); // undefined
    
    var num = 2;
    console.log(num); // 2
    })();
    
    console.log(num); // 1
    })();
    var num
    

    View Slide

11. What actually happened
    (function () {
    var num = 1;
    
    (function () {
    ;
    console.log(num); // undefined
    
    num = 2;
    console.log(num); // 2
    })();
    
    console.log(num); // 1
    })();
    var num
    

    View Slide

12. Better example 2
    (function () {
    var num = 1;
    
    (function () {
    console.log(num); // 1
    
    var num2 = 2;
    console.log(num2); // 2
    })();
    
    console.log(num); // 1
    })();
    

    View Slide

13. Even Better example 2
    (function () {
    var num = 1;
    
    (function () {
    var num2 = 2;
    
    console.log(num); // 1
    console.log(num2); // 2
    })();
    
    console.log(num); // 1
    })();
    

    View Slide

14. Even Better example 3
    (function () {
    var num = 1;
    
    (function () {
    var num = 2;
    
    console.log(num); // 2
    })();
    
    console.log(num); // 1
    })();
    

    View Slide

15. • There's no block scope!
    • Use functional scope to avoid global
    Only Functional Scope
    

    View Slide

16. （因為很重要所以要說三次）
    Javascript 只有 Functional Scope！
    Javascript 只有 Functional Scope！
    Javascript 只有 Functional Scope！
    

    View Slide

17. (function () {
    var num = 1;
    console.log(num); // 1
    
    if (true) {
    var num = 2;
    console.log(num); // 2
    }
    
    console.log(num); // 2
    })();
    Bad example
    

    View Slide

18. (function () {
    var num = 1;
    console.log(num); // 1
    
    if (true) {
    (function () {
    var num = 2;
    console.log(num); // 2
    })();
    }
    
    console.log(num); // 1
    })();
    Better example
    

    View Slide

19. "==" does not check type!
    Use "==="
    

    View Slide

20. var num = 0;
    if (num) {
    console.log("1st");
    }
    
    num = num + 1;
    if (num) {
    console.log("2nd");
    }
    
    num = num - 1;
    if (num) {
    console.log("3rd")
    }
    Result:
    "2nd"
    

    View Slide

21. var num = "0"; // mistake here
    if (num) {
    console.log("1st");
    }
    
    num = num + 1;
    if (num) {
    console.log("2nd");
    }
    
    num = num - 1;
    if (num) {
    console.log("3rd")
    }
    

    View Slide

22. var num = "0"; // console.log(num) -> "0"
    if (num) {
    console.log("1st");
    }
    
    num = num + 1; // console.log(num) -> "01"
    if (num) {
    console.log("2nd");
    }
    
    num = num - 1; // console.log(num) -> 0
    if (num) {
    console.log("3rd")
    }
    Result:
    "1st"
    "2nd"
    

    View Slide

23. var num = "0"; // typeof(num) === "string"
    if (num) {
    console.log("1st");
    }
    
    num = num + 1; // typeof(num) === "string"
    if (num) {
    console.log("2nd");
    }
    
    num = num - 1; // typeof(num) === "number"
    if (num) {
    console.log("3rd")
    }
    Result:
    "1st"
    "2nd"
    

    View Slide

24. var num = "0";
    if (num != 0) {
    console.log("1st");
    }
    
    num = num + 1;
    if (num != 0) {
    console.log("2nd");
    }
    
    num = num - 1;
    if (num != 0) {
    console.log("3rd")
    }
    Result:
    "2nd"
    

    View Slide

25. var num = "0";
    if (num != 0) {
    console.log("1st");
    }
    
    num = num + 1;
    if (num != 0) {
    console.log("2nd");
    }
    
    num = num - 1;
    if (num != 0) {
    console.log("3rd")
    }
    Result:
    "2nd"
    Bad example
    

    View Slide

26. 0.1 * 0.2 !== 0.02
    （純小數乘以純小數）
    

    View Slide

27. var num = 0.1 * 2;
    
    if (num === 0.2) {
    console.log("Correct."); // Correct.
    } else {
    console.log(num);
    }
    

    View Slide

28. var num = 0.1 * 0.2;
    
    if (num === 0.02) {
    console.log("Correct.");
    } else {
    console.log(num); // 0.020000000000000004
    }
    Bad example
    

    View Slide

29. var num = 0.1 * 0.2;
    
    if (num === 0.02) {
    console.log("Correct.");
    } else {
    console.log(num); // 0.020000000000000004
    }
    Bad example
    

    View Slide

30. var resultString = (0.1 * 0.2).toFixed(2);
    
    if (resultString === "0.02") {
    console.log("Correct."); // Correct.
    } else {
    console.log(num);
    }
    Better example
    

    View Slide

31. Sum up
    • Use "var" and declare all variables at top
    • Only functional scope
    • Use "==="
    • 0.1*0.2 !==0.3 so use .toFixed()
    

    View Slide