---
# System prepended metadata

title: 'The difference between a variable: null, undefined or undeclared'

---

# The difference between a variable: null, undefined or undeclared

---


##### **null** 變數存在被賦予空、未知的值
##### **undefined** 變數存在但還沒有被賦值
##### **undeclared** 變數不存在
##### （同場加映）**NaN** 非數值的數值

---


* **null**: 
    * 表示不存在任何對象值
    * 通常在可以預期對象但沒有相關對象的地方檢索。
    * 作為物件原型鏈的終點。
    * 布林值的判斷為 false 
    ```
    console.log(null==true) //false
    ````
    * 屬性為object(*它不是全域對象的屬性標識符, 是用文字寫入的null*)
    ```
    console.log(typeof(null)) // 'object'
    ```
    
* **undefined**：

    * 變數被聲明了，但沒有賦值時，就等於undefined，如下圖：
    ![](https://i.imgur.com/WTMhGzo.png)
    
    * 呼叫函式時，應該提供的引數沒有提供，該引數等於undefined，如下圖：
    ![](https://i.imgur.com/Or1MJHb.png) 
    
    * 物件沒有賦值的屬性，該屬性的值為undefined，如下圖：
    ![](https://i.imgur.com/zKsPOun.png)
    
    * 函式沒有返回值時，預設返回undefined。
    * 布林值判斷為false
    ```
    console.log(undefined==true)  //false
    ````
    * 屬性為undefined(全域属性，屬性即為undefined)
    
    ```
    console.log(typeof(undefined))  //undefined
    ```

* **undeclared**: 
    * 指js的語法錯誤，會顯示ReferenceError，指沒有申明直接使用，導致js無法找到對應的上下文。
    * 變數在未宣告並使用的狀況下會得到 ReferenceError，並指出該變數並未宣告。
        * 在嚴格模式，該變數會undeclared
        ```
        "use strict";
        a = 10;
        console.log(a); 
        //Uncaught ReferenceError: a is not defined
        ```
        * 在非嚴格模式，視為有宣告，該變數會變成全域變數
        ```
        a = 10;
        console.log(a); 
        // 變成全域變數
        ```
        ```
        console.log(a); 
        // 未宣告直接取值，Uncaught ReferenceError: a is not defined
        ```
        
        
* **NaN (同場加映)**
    * NaN 是 "Not a Number" 的簡稱，數學計算中，若無法產生數值時或程式無法表示值時，就會是NaN。
    * 布林值判斷為false
    ```
    console.log(NaN==true) //false
    ````
    * 屬性為number(全域属性，表示非數值)
    
    ```
    console.log(typeof(NaN)) //number
    ```



# How would you go about checking for any of these states?
你如何檢查？

* **undeclared**
    如同上文所述，在執行程式時會直接報錯，顯示ReferenceError，導致程式中斷。
    
* **undefined**
    * 通常在取值或運算時才會報錯，因此容易在程式執行過程中被忽略。
    * 可以透過嚴格相等來檢視
    ```
    var x;

    if (x === undefined) {
        console.log("hi");//
    }
    ```
    * 也可以透過typeof === undefined 來檢視
    ```
    var x;
    if(typeof x === 'undefined') {
        console.log("hello");
    }
    ```
    * typeof == undefined 會判斷出null或undefined，所以要用嚴格式 *
    * 123 == '123' // true
    
* **null**
    * 通常在取值或運算時才會報錯，因此容易在程式執行過程中被忽略。
    * 可以透過typeof === object 與 布林值一同檢視
    ```
    var a=null;
    var b;
        
    console.log(typeof a);    //object
    console.log(typeof b);    //undefined
    console.log(typeof c);    //undefined
    ```
* **NaN**
    * NaN 不等於（==、!=、===、!==）任何值，包括 NaN 本身 
    ```
    NaN === NaN;        // false
    Number.NaN === NaN; // false(Number.NaN就是NaN，但是在程式的執行判斷上，NaN不等於自身，會得到flase的答案)

    0/0 //NaN
    
    NaN是用來判斷數字的工具
    ```
    *(留意 undefined與null、NaN容易被混淆)*



> 參考資料
>  [MDN: null](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/null) 
>  
>   [MDN: undefined](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/undefined) 
> 
>  [MDN: NaN](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/NaN)
>  
>   [小雕雕的家: Javascript 基礎打底系列 (二) - null、undefined、NaN 的差異與檢查方式](https://sweeteason.pixnet.net/blog/post/43007183-javascript-%E5%9F%BA%E7%A4%8E%E6%89%93%E5%BA%95%E7%B3%BB%E5%88%97-%28%E4%BA%8C%29---%E9%97%9C%E6%96%BC-null%E3%80%81undefine)
> 
>  [Summer。桑莫。夏天: 你懂 JavaScript 嗎？#4 型別（Types）](https://cythilya.github.io/2018/10/11/types/)
> 
> [Elaine's Blog: JavaScript null、undefined 與 undeclared](https://kim85326.github.io/2019/09/09/JavaScript-null-undefined-%E8%88%87-undeclared/)
>   
>  [itread01: null，undefined，undeclared的區別Script](https://www.itread01.com/p/987326.html)