[JS奇怪的世界]No.5 觀念小提醒:JavaScript 與 Undefined

前言

在前面已經稍微有講過一些 Undefined,接下來將會更深入的了解 JavaScript 與 Undefined 之間的關係。

JavaScript 與 Undefined

前面的 hoisting 章節已經有稍微針對 Undefined 這一詞做一些講解,所以我們在這邊撰寫一小段程式碼來更深入瞭解 Undefined 這個奇妙的單字 ↓

1
2
var a;
console.log(a);

在前一個章節我們可以知道,若 a 沒有賦予值時將會被賦予預設值也就是 undefined,所以我們可以知道 console.log(a); 會出現 undefined

undefined

前面的觀念是沒有錯的,那如果是這樣子呢?

1
console.log(a);

not defined

我們可以看到結果變成了 not defined

這邊先不講 not defined 是什麼東東,讓我們回頭看一下 Undefined,我們把程式碼修改成這個樣子試試看 ↓

1
2
3
4
5
var a;
console.log(a);
if(a === undefined){
console.log(true)
}

undefined

我們可以看到 a 是等於 undefined 的,在前面有講到 Undefined 是 JavaScript 中一個特別的值特別的關鍵字,所以 a 是等於 undefined,所以預設變數若沒有賦予值的狀況下是會被賦予 undefined 的。

not defined

那如果程式碼變成這樣子呢?

1
2
3
if(a === undefined){
console.log(true)
}

not defined

我們會得到與前面類似的結果 not defined

那 not defined 是什麼鬼東西? not defined 的意思是說編譯器找不到 var a 導致(也就是建立變數),所以這部分與前面的觀念「預設執行環境」有關係,「語法解析器」無法在「預設執行環境」下找到 var a,所以就會回丟 not defined 這個錯誤訊息。

那你也就會因此看到類似的嘲諷狀況 ↓

啊,啊,啊!你沒有建立變數哦!

所以我們可以知道一件事情,當我們在撰寫 JavaScript 過程中,編譯器幫我們非常許多事情,舉凡提升(hoisting)、賦予 undefined 等等各種動作,但是有一個重點要了解**undefined 不等於 Null(空值)**,為什麼這樣講呢?讓我們寫一段程式碼來看就知道了 ↓

( typeof 可以用來檢驗變數的型別)

1
2
3
var a;
console.log(a);
console.log('a:' + typeof(a));

這時候我們會看到一個很特別的現象。

undefined

JavaScript 中 typeof 是用來回傳這個東西的型別,但是我們可以發現 typeof 回傳是一個 undefined,所以在一次驗證 undefined 是 JavaScript 中特別的值及型別,但是有一件事情非常非常重要,而且千萬都不要這樣做 ↓

1
2
3
var a;
console.log(a);
a = undefined;

這動作在 JavaScript 中是有效的,也不會出現錯誤,編譯器也不會阻擋你這樣做,而這行為對於實際開發時是一件非常危險的行為,所以永遠都不要替變數設定為 undefined,否則你會很難 Debug (抓蟲),因為一般來講我們看來 undefined 就知道我們還沒替這個變數設定,如果你手動設定賦予 undefined,將會到導致不清楚這個變數到底是有沒有設定過值,就像這樣以下程式碼這樣。

所以「千萬不要手動賦予變數 undefined」。

圖源

JavaScript 全攻略:克服 JS 奇怪的部分

侏儸紀 GIF 來至巴哈姆特