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

JavaScript: Basic rules for avoiding strange issues

denkeni
March 12, 2015

JavaScript: Basic rules for avoiding strange issues

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

denkeni

March 12, 2015
Tweet

More Decks by denkeni

Other Decks in Programming

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