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
TWIGF 2025:台灣數位憑證皮夾的國際標準協定採用與國際介接現實
denkeni
0
12
有備而來:開發哲學
denkeni
0
21
探索 W3C 的開放協作模式
denkeni
0
51
台灣數位憑證皮夾:技術架構與開源挑戰
denkeni
1
100
Defensive Security
denkeni
0
29
Who Owns Your Digital Identity 誰掌握你的數位身分?
denkeni
0
91
開放文化與資安管理的邊界
denkeni
0
100
開源公益專案能賺錢嗎?
denkeni
0
440
Unpredictable Sandbox Environment for IAP Auto-renewable Subscriptions
denkeni
0
660
Other Decks in Programming
See All in Programming
Catch Up: Go Style Guide Update
andpad
0
170
CI_CD「健康診断」のススメ。現場でのボトルネック特定から、健康診断を通じた組織的な改善手法
teamlab
PRO
0
180
WebエンジニアがSwiftをブラウザで動かすプレイグラウンドを作ってみた
ohmori_yusuke
0
170
Your Perfect Project Setup for Angular @BASTA! 2025 in Mainz
manfredsteyer
PRO
0
130
開発生産性を上げるための生成AI活用術
starfish719
1
170
CSC305 Lecture 03
javiergs
PRO
0
230
AIで開発生産性を上げる個人とチームの取り組み
taniigo
0
130
Web技術を最大限活用してRAW画像を現像する / Developing RAW Images on the Web
ssssota
2
1.2k
Introducing ReActionView: A new ActionView-Compatible ERB Engine @ Kaigi on Rails 2025, Tokyo, Japan
marcoroth
3
920
Чего вы не знали о строках в Python – Василий Рябов, PythoNN
sobolevn
0
160
(Extension DC 2025) Actor境界を越える技術
teamhimeh
1
220
Swift Concurrency - 状態監視の罠
objectiveaudio
2
460
Featured
See All Featured
Gamification - CAS2011
davidbonilla
81
5.5k
Building Better People: How to give real-time feedback that sticks.
wjessup
368
20k
Navigating Team Friction
lara
189
15k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
140
34k
The Invisible Side of Design
smashingmag
301
51k
BBQ
matthewcrist
89
9.8k
The World Runs on Bad Software
bkeepers
PRO
71
11k
Build your cross-platform service in a week with App Engine
jlugia
232
18k
How GitHub (no longer) Works
holman
315
140k
RailsConf 2023
tenderlove
30
1.2k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
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()