Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
JavaScript: Basic rules for avoiding strange is...
Search
denkeni
March 12, 2015
Programming
0
180
JavaScript: Basic rules for avoiding strange issues
JavaScript 地雷部分與實作建議:JavaScript 是一個很容易寫出很難除錯的程式語言;遵循一些準則可以減低這些困擾。
denkeni
March 12, 2015
Tweet
Share
More Decks by denkeni
See All by denkeni
有備而來:開發哲學
denkeni
0
11
探索 W3C 的開放協作模式
denkeni
0
47
台灣數位憑證皮夾:技術架構與開源挑戰
denkeni
1
94
Defensive Security
denkeni
0
26
Who Owns Your Digital Identity 誰掌握你的數位身分?
denkeni
0
84
開放文化與資安管理的邊界
denkeni
0
100
開源公益專案能賺錢嗎?
denkeni
0
430
Unpredictable Sandbox Environment for IAP Auto-renewable Subscriptions
denkeni
0
660
IAP @ iPlayground 2020
denkeni
1
450
Other Decks in Programming
See All in Programming
私の後悔をAWS DMSで解決した話
hiramax
4
210
ProxyによるWindow間RPC機構の構築
syumai
3
1.2k
Rancher と Terraform
fufuhu
2
550
AWS発のAIエディタKiroを使ってみた
iriikeita
1
190
Ruby Parser progress report 2025
yui_knk
1
440
知っているようで知らない"rails new"の世界 / The World of "rails new" You Think You Know but Don't
luccafort
PRO
1
160
How Android Uses Data Structures Behind The Scenes
l2hyunwoo
0
460
Design Foundational Data Engineering Observability
sucitw
3
200
CloudflareのChat Agent Starter Kitで簡単!AIチャットボット構築
syumai
2
500
RDoc meets YARD
okuramasafumi
4
170
JSONataを使ってみよう Step Functionsが楽しくなる実践テクニック #devio2025
dafujii
1
530
Vue・React マルチプロダクト開発を支える Vite
andpad
0
110
Featured
See All Featured
Rails Girls Zürich Keynote
gr2m
95
14k
The Language of Interfaces
destraynor
161
25k
Building Better People: How to give real-time feedback that sticks.
wjessup
368
19k
Building Adaptive Systems
keathley
43
2.7k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
Docker and Python
trallard
45
3.6k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.9k
Making Projects Easy
brettharned
117
6.4k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
13k
Why Our Code Smells
bkeepers
PRO
339
57k
The Cost Of JavaScript in 2023
addyosmani
53
8.9k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Transcript
JavaScript 地雷部分與實作建議 @denkeni
Published in 2008
Declare all variables at top and don't code in global
scope! Use "var"
num = 1; (function () { num = 2; })();
console.log(num); Bad example 1
window.num = 1; (function () { window.num = 2; })();
console.log(window.num); // 2 What actually happened
num = 1; (function () { var num = 2;
})(); console.log(num); // 1 Better example 1 use "var"
(function () { var num = 1; (function () {
var num = 2; })(); console.log(num); // 1 })(); Even Better example 1 don't code in global scope
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 })();
Bad example 2 (function () { var num = 1;
(function () { console.log(num); var num = 2; // no warning here! console.log(num); })(); console.log(num); })();
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
What actually happened (function () { var num = 1;
(function () { ; console.log(num); // undefined num = 2; console.log(num); // 2 })(); console.log(num); // 1 })(); var num
Better example 2 (function () { var num = 1;
(function () { console.log(num); // 1 var num2 = 2; console.log(num2); // 2 })(); console.log(num); // 1 })();
Even Better example 2 (function () { var num =
1; (function () { var num2 = 2; console.log(num); // 1 console.log(num2); // 2 })(); console.log(num); // 1 })();
Even Better example 3 (function () { var num =
1; (function () { var num = 2; console.log(num); // 2 })(); console.log(num); // 1 })();
• There's no block scope! • Use functional scope to
avoid global Only Functional Scope
(因為很重要所以要說三次) Javascript 只有 Functional Scope! Javascript 只有 Functional Scope! Javascript
只有 Functional Scope!
(function () { var num = 1; console.log(num); // 1
if (true) { var num = 2; console.log(num); // 2 } console.log(num); // 2 })(); Bad example
(function () { var num = 1; console.log(num); // 1
if (true) { (function () { var num = 2; console.log(num); // 2 })(); } console.log(num); // 1 })(); Better example
"==" does not check type! Use "==="
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"
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") }
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"
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"
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"
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
0.1 * 0.2 !== 0.02 (純小數乘以純小數)
var num = 0.1 * 2; if (num === 0.2)
{ console.log("Correct."); // Correct. } else { console.log(num); }
var num = 0.1 * 0.2; if (num === 0.02)
{ console.log("Correct."); } else { console.log(num); // 0.020000000000000004 } Bad example
var num = 0.1 * 0.2; if (num === 0.02)
{ console.log("Correct."); } else { console.log(num); // 0.020000000000000004 } Bad example
var resultString = (0.1 * 0.2).toFixed(2); if (resultString === "0.02")
{ console.log("Correct."); // Correct. } else { console.log(num); } Better example
Sum up • Use "var" and declare all variables at
top • Only functional scope • Use "===" • 0.1*0.2 !==0.3 so use .toFixed()