Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

Published in 2008

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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 })();

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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"

Slide 21

Slide 21 text

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") }

Slide 22

Slide 22 text

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"

Slide 23

Slide 23 text

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"

Slide 24

Slide 24 text

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"

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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