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
23
探索 W3C 的開放協作模式
denkeni
0
54
台灣數位憑證皮夾:技術架構與開源挑戰
denkeni
1
100
Defensive Security
denkeni
0
30
Who Owns Your Digital Identity 誰掌握你的數位身分?
denkeni
0
94
開放文化與資安管理的邊界
denkeni
0
100
開源公益專案能賺錢嗎?
denkeni
0
440
Unpredictable Sandbox Environment for IAP Auto-renewable Subscriptions
denkeni
0
670
Other Decks in Programming
See All in Programming
コードとあなたと私の距離 / The Distance Between Code, You, and I
hiro_y
0
170
3年ぶりにコードを書いた元CTOが Claude Codeと30分でMVPを作った話
maikokojima
0
280
XP, Testing and ninja testing ZOZ5
m_seki
3
670
他言語経験者が Golangci-lint を最初のコーディングメンターにした話 / How Golangci-lint Became My First Coding Mentor: A Story from a Polyglot Programmer
uma31
0
160
TFLintカスタムプラグインで始める Terraformコード品質管理
bells17
2
170
Introduce Hono CLI
yusukebe
0
300
開発生産性を上げるための生成AI活用術
starfish719
3
1.1k
Le côté obscur des IA génératives
pascallemerrer
0
150
All About Angular's New Signal Forms
manfredsteyer
PRO
0
160
Claude CodeによるAI駆動開発の実践 〜そこから見えてきたこれからのプログラミング〜
iriikeita
0
250
明日から始めるリファクタリング
ryounasso
0
140
Web フロントエンドエンジニアに開かれる AI Agent プロダクト開発 - Vercel AI SDK を観察して AI Agent と仲良くなろう! #FEC余熱NIGHT
izumin5210
3
530
Featured
See All Featured
Measuring & Analyzing Core Web Vitals
bluesmoon
9
620
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
9
590
Large-scale JavaScript Application Architecture
addyosmani
514
110k
How STYLIGHT went responsive
nonsquared
100
5.8k
Embracing the Ebb and Flow
colly
88
4.8k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
508
140k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
132
19k
The Pragmatic Product Professional
lauravandoore
36
6.9k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
20
1.2k
Designing for Performance
lara
610
69k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
Navigating Team Friction
lara
190
15k
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()