# nullish coalescing (??)

[JS](https://lochiwei.gitbook.io/web/js) ⟩ [statement](https://lochiwei.gitbook.io/web/js/grammar/statement) ⟩ [expression](https://lochiwei.gitbook.io/web/js/grammar/statement/expr) ⟩ [operator](https://lochiwei.gitbook.io/web/js/grammar/op) ⟩ [logical](https://lochiwei.gitbook.io/web/js/grammar/op/logical) ⟩ nullish coalescing operator (??)

{% hint style="success" %} <img src="https://2527454625-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MfvEFZnSBhKT6fJmus0%2Fuploads%2FELrAplOSSb20jArzxcFc%2Fes2020.png?alt=media&#x26;token=d85a6225-f5f6-4a78-89ec-4ef60bad98f9" alt="" data-size="line"> ([es2020](https://lochiwei.gitbook.io/web/js/feature/es2020 "mention"))

```javascript
expr ?? default    // nullish coalescing
```

:point\_right: [table-of-operators](https://lochiwei.gitbook.io/web/js/grammar/op/table-of-operators "mention")
{% endhint %}

{% tabs %}
{% tab title="⭐️ 重點" %}
{% hint style="warning" %} <mark style="color:purple;">**`?? operator`**</mark>

* the <mark style="color:yellow;">**precedence**</mark> of <mark style="color:purple;">**`??`**</mark> <mark style="color:yellow;">**relative to**</mark><mark style="color:yellow;">**&#x20;**</mark><mark style="color:yellow;"><mark style="color:blue;">**`||`**<mark style="color:blue;"></mark><mark style="color:yellow;">**,**</mark><mark style="color:yellow;">**&#x20;**</mark><mark style="color:yellow;"><mark style="color:blue;">**`&&`**<mark style="color:blue;"></mark><mark style="color:yellow;">**&#x20;**</mark><mark style="color:yellow;">**is**</mark>**&#x20;**<mark style="color:red;">**not**</mark>**&#x20;**<mark style="color:yellow;">**defined**</mark>.
* <mark style="color:red;">**explicitly**</mark>**&#x20;use** [**parentheses**](https://lochiwei.gitbook.io/web/js/grammar/token/punctuator/parentheses) **if&#x20;**<mark style="color:purple;">**`??`**</mark>**&#x20;is&#x20;**<mark style="color:yellow;">**mixed**</mark>**&#x20;with&#x20;**<mark style="color:yellow;"><mark style="color:blue;">**`||`**<mark style="color:blue;"></mark><mark style="color:yellow;">**,**</mark><mark style="color:yellow;">**&#x20;**</mark><mark style="color:yellow;"><mark style="color:blue;">**`&&`**<mark style="color:blue;"></mark>**.**

:point\_right: [table-of-operators](https://lochiwei.gitbook.io/web/js/grammar/op/table-of-operators "mention")
{% endhint %}
{% endtab %}

{% tab title="👥 相關" %}

* [nullish](https://lochiwei.gitbook.io/web/js/val/prim/nullish "mention") means [null](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/null) or [undefined](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/undefined).&#x20;
* [conditional-operator](https://lochiwei.gitbook.io/web/js/grammar/op/ternary/conditional-operator "mention")
* <mark style="color:purple;">**`??`**</mark> may be used <mark style="color:orange;">**after**</mark> [optional-chaining](https://lochiwei.gitbook.io/web/js/val/obj/prop/access/optional-chaining "mention") to provide a <mark style="color:orange;">**default value**</mark>.
* [](https://lochiwei.gitbook.io/web/js/grammar/op/logical "mention")
  {% endtab %}

{% tab title="💈範例" %}

```javascript
// ⭐️ nullish coalescing
x = x ?? 100;

// polyfill
x = (x !== undefined && x !== null) ? x : 100;

// ❗️ slightly different from:
x = x || 100;
```

{% endtab %}

{% tab title="📗 參考" %}

* [ ] JS.info ⟩ polyfill ⟩ [transpiler](https://javascript.info/polyfills#transpilers)
  {% endtab %}

{% tab title="📘 手冊" %}

* [Nullish coalescing operator (??)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator)
  {% endtab %}

{% tab title="❓" %}
{% hint style="success" %}
問：「 [gas](https://lochiwei.gitbook.io/web/appendix/gas "mention") 支援 nullish coalescing 嗎？」

答：「 測試過，看來是支援的。」
{% endhint %}
{% endtab %}

{% tab title="🚧" %}

* [ ] ||
* [ ] &&
  {% endtab %}
  {% endtabs %}