JavaScript: Basic rules for avoiding strange issues

Transcript

1. 1.

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

2. 2.

   Published in 2008

3. 3.

   Declare all variables at top and don't code in global

   scope! Use "var"
4. 4.

   num = 1; (function () { num = 2; })();

   console.log(num); Bad example 1
5. 5.

   window.num = 1; (function () { window.num = 2; })();

   console.log(window.num); // 2 What actually happened
6. 6.

   num = 1; (function () { var num = 2;

   })(); console.log(num); // 1 Better example 1 use "var"
7. 7.

   (function () { var num = 1; (function () {

   var num = 2; })(); console.log(num); // 1 })(); Even Better example 1 don't code in global scope
8. 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 })();
9. 9.

   Bad example 2 (function () { var num = 1;

   (function () { console.log(num); var num = 2; // no warning here! console.log(num); })(); console.log(num); })();
10. 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
11. 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
12. 12.

    Better example 2 (function () { var num = 1;

    (function () { console.log(num); // 1 var num2 = 2; console.log(num2); // 2 })(); console.log(num); // 1 })();
13. 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 })();
14. 14.

    Even Better example 3 (function () { var num =

    1; (function () { var num = 2; console.log(num); // 2 })(); console.log(num); // 1 })();
15. 15.

    • There's no block scope! • Use functional scope to

    avoid global Only Functional Scope
16. 16.

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

    只有 Functional Scope！
17. 17.

    (function () { var num = 1; console.log(num); // 1

    if (true) { var num = 2; console.log(num); // 2 } console.log(num); // 2 })(); Bad example
18. 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
19. 19.

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

20. 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"
21. 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") }
22. 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"
23. 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"
24. 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"
25. 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
26. 26.

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

27. 27.

    var num = 0.1 * 2; if (num === 0.2)

    { console.log("Correct."); // Correct. } else { console.log(num); }
28. 28.

    var num = 0.1 * 0.2; if (num === 0.02)

    { console.log("Correct."); } else { console.log(num); // 0.020000000000000004 } Bad example
29. 29.

    var num = 0.1 * 0.2; if (num === 0.02)

    { console.log("Correct."); } else { console.log(num); // 0.020000000000000004 } Bad example
30. 30.

    var resultString = (0.1 * 0.2).toFixed(2); if (resultString === "0.02")

    { console.log("Correct."); // Correct. } else { console.log(num); } Better example
31. 31.

    Sum up • Use "var" and declare all variables at

    top • Only functional scope • Use "===" • 0.1*0.2 !==0.3 so use .toFixed()