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
150
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
60
開源公益專案能賺錢嗎?
denkeni
0
350
Unpredictable Sandbox Environment for IAP Auto-renewable Subscriptions
denkeni
0
590
IAP @ iPlayground 2020
denkeni
1
400
iOS 11 MapKit Annotation Clustering
denkeni
0
190
Git vs SVN
denkeni
0
210
資訊科技的未來與展望(2014/01)
denkeni
0
240
Other Decks in Programming
See All in Programming
Jakarta EE meets AI
ivargrimstad
1
530
私のEbitengineの第一歩
qt_luigi
0
450
Desafios e Lições Aprendidas na Migração de Monólitos para Microsserviços em Java
jessilyneh
2
150
【TID2024】模擬講義:プログラマと一緒にゲームをデザインしてみよう!
akatsukigames_tech
0
660
Using Livebook to build and deploy internal tools @ ElixirConf 2024
hugobarauna
0
250
実践!難読化ガイド
mitchan
0
210
Findy - エンジニア向け会社紹介 / Findy Letter for Engineers
findyinc
4
90k
サーバーレスで負荷試験!Step Functions + Lambdaを使ったk6の分散実行
shuntakahashi
6
1.6k
GraphQL あるいは React における自律的なデータ取得について
quramy
11
3k
LangGraphでのHuman-in-the-Loopの実装
os1ma
3
1.1k
Pythonで改めて考える「クラス(class)」の使いどころ
os1ma
3
790
あなたのアプリ、ログはでてますか?あるいはログをだしてますか? (Funabashi.dev用 軽量版)
uzulla
2
120
Featured
See All Featured
Building a Scalable Design System with Sketch
lauravandoore
459
32k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
What's new in Ruby 2.0
geeforr
340
31k
Why You Should Never Use an ORM
jnunemaker
PRO
53
8.9k
Why Our Code Smells
bkeepers
PRO
334
56k
Creatively Recalculating Your Daily Design Routine
revolveconf
215
12k
How to name files
jennybc
75
98k
WebSockets: Embracing the real-time Web
robhawkes
59
7.3k
Automating Front-end Workflow
addyosmani
1365
200k
Art, The Web, and Tiny UX
lynnandtonic
294
20k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
246
1.3M
5 minutes of I Can Smell Your CMS
philhawksworth
202
19k
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()