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
170
JavaScript: Basic rules for avoiding strange issues
JavaScript 地雷部分與實作建議:JavaScript 是一個很容易寫出很難除錯的程式語言;遵循一些準則可以減低這些困擾。
denkeni
March 12, 2015
Tweet
Share
More Decks by denkeni
See All by denkeni
Defensive Security
denkeni
0
21
Who Owns Your Digital Identity 誰掌握你的數位身分?
denkeni
0
67
開放文化與資安管理的邊界
denkeni
0
95
開源公益專案能賺錢嗎?
denkeni
0
420
Unpredictable Sandbox Environment for IAP Auto-renewable Subscriptions
denkeni
0
640
IAP @ iPlayground 2020
denkeni
1
430
iOS 11 MapKit Annotation Clustering
denkeni
0
220
Git vs SVN
denkeni
0
260
資訊科技的未來與展望(2014/01)
denkeni
0
300
Other Decks in Programming
See All in Programming
システム成長を止めない!本番無停止テーブル移行の全貌
sakawe_ee
1
200
Code as Context 〜 1にコードで 2にリンタ 34がなくて 5にルール? 〜
yodakeisuke
0
130
初学者でも今すぐできる、Claude Codeの生産性を10倍上げるTips
s4yuba
16
11k
Hack Claude Code with Claude Code
choplin
4
2k
すべてのコンテキストを、 ユーザー価値に変える
applism118
3
1.2k
Porting a visionOS App to Android XR
akkeylab
0
460
AIエージェントはこう育てる - GitHub Copilot Agentとチームの共進化サイクル
koboriakira
0
590
PHPでWebSocketサーバーを実装しよう2025
kubotak
0
280
設計やレビューに悩んでいるPHPerに贈る、クリーンなオブジェクト設計の指針たち
panda_program
6
2.1k
VS Code Update for GitHub Copilot
74th
2
640
データの民主化を支える、透明性のあるデータ利活用への挑戦 2025-06-25 Database Engineering Meetup#7
y_ken
0
360
AIプログラマーDevinは PHPerの夢を見るか?
shinyasaita
1
220
Featured
See All Featured
Thoughts on Productivity
jonyablonski
69
4.7k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
970
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
The Language of Interfaces
destraynor
158
25k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Designing for humans not robots
tammielis
253
25k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
Site-Speed That Sticks
csswizardry
10
690
The Cult of Friendly URLs
andyhume
79
6.5k
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()