---
description: 🚧 under construction -> flowchart
---

# optional invocation ?.()

* [JS](../../../..) ⟩ [statement](../../../../grammar/statement) ⟩ [expression](../../../../grammar/statement/expr) ⟩ [operator](../../../../grammar/op) ⟩ [optional chaining](optional-chaining) ⟩ optional invocation ?.()
* [JS](../../../..) ⟩ [value](../../..) ⟩ [object](../..) ⟩ [property](..) ⟩ [access]() ⟩ optional invocation ?.()

{% hint style="success" %}
<mark style="color:yellow;">**(**</mark>[es2020](../../../../feature/es2020 "mention")<mark style="color:yellow;">**)**</mark>  (:star2: [**chaining rules**](chaining-rules) <mark style="color:yellow;">**|**</mark> [**table of operators** ](../../../../grammar/op/table-of-operators))

**`f`**<mark style="color:purple;">**`?.`**</mark>**`(args)`** <mark style="color:yellow;">**returns**</mark> [<mark style="color:orange;">**undefined**</mark>](../../../prim/undefined) if <mark style="color:yellow;">**`f`**</mark> is [<mark style="color:red;">**nullish**</mark>](../../../prim/nullish).

:u6307: synonyms："<mark style="color:purple;">**conditional invocation**</mark>", "<mark style="color:purple;">**optional invocation**</mark>"
{% endhint %}

{% tabs %}
{% tab title="🗺️ 圖表" %}
<img src="https://2527454625-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MfvEFZnSBhKT6fJmus0%2Fuploads%2Fauv2rCR82rzf4SpIfZxw%2Foptional.invocation.svg?alt=media&#x26;token=dd9bbf5b-d0c4-4a5b-9152-86836a984ff0" alt="" class="gitbook-drawing">
{% endtab %}

{% tab title="🧨 雷區" %}
{% hint style="danger" %}
<mark style="color:purple;">**`f ?.()`**</mark>&#x20;

* <mark style="color:red;">**only**</mark>**&#x20;**<mark style="color:yellow;">**checks**</mark> whether <mark style="color:blue;">**`f`**</mark> is [<mark style="color:red;">**nullish**</mark>](../../../prim/nullish):exclamation:
* <mark style="color:yellow;">**does**</mark>**&#x20;**<mark style="color:red;">**not**</mark>**&#x20;**<mark style="color:yellow;">**verify**</mark> that <mark style="color:blue;">**`f`**</mark> is <mark style="color:yellow;">**actually**</mark> a [**function**](../../../func):exclamation:
{% endhint %}
{% endtab %}

{% tab title="👥" %}
* :star2:[chaining-rules](chaining-rules "mention")
* [conditional-operator](../../../../grammar/op/ternary/conditional-operator "mention")
* [dot-notation-.](dot-notation-. "mention") &#x20;
* [bracket-notation](bracket-notation "mention")&#x20;
* :information\_source:[question-dot-.](../../../../grammar/token/punctuator/question-dot-. "mention") / [parentheses](../../../../grammar/token/punctuator/parentheses "mention") punctuators are used in this operator.
{% endtab %}

{% tab title="💈" %}
*

```javascript
```
{% endtab %}

{% tab title="📗" %}
* [x] JS.info ⟩ [Optional chaining '?.'](https://javascript.info/optional-chaining)
* [ ] freeCodeCamp ⟩ [10 New JavaScript Features in ES2020 That You Should Know](https://www.freecodecamp.org/news/javascript-new-features-es2020/)
* [ ] [javascript-the-definitive-guide](../../../../../master/ref/javascript-the-definitive-guide "mention") ⟩ 4.5.1 Conditional Invocation
{% endtab %}

{% tab title="📘" %}
* [Optional chaining (?.)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining)
{% endtab %}

{% tab title="🚧" %}
* [x] flowchart
* [ ] example
{% endtab %}
{% endtabs %}
