> For the complete documentation index, see [llms.txt](https://lochiwei.gitbook.io/web/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://lochiwei.gitbook.io/web/js/val/obj/prop/access/chaining-rules/jane.boyfriend-.money.more.md).

# jane.boyfriend?.money.more

chaining example.

[JS](/web/js.md) ⟩ [value](/web/js/val.md) ⟩ [object](/web/js/val/obj.md) ⟩ [accessing properties](/web/js/val/obj/prop/access.md) ⟩ [chaining rules](/web/js/val/obj/prop/access/chaining-rules.md) ⟩ example (jane)

{% hint style="success" %}
:point\_right: see [chaining rules](/web/js/val/obj/prop/access/chaining-rules.md) for more info.
{% endhint %}

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

* replit：[optional chaining (example: jane)](https://replit.com/@pegasusroe/optional-chaining-only-protect-direct-property#index.js)

```javascript
// jane
let jane = { 
    home: null,
    boyfriend: { name: 'Joe' }
};

//  ⭐ chaining methods       N     NN    // N: nullish,   NN: non-nullish
// ------------------------------------
//           chaining  ( .)  ⛔     ✅    // ⛔: TypeError (cannot read property)
//  optional chaining  (?.)  🈚     ✅    // 🈚: undefined (⭐ short-circuiting)
//      leaf property  (P )  ✅     ✅    // ✅: OK (no error)
// ------------------------------------

jane. boyfriend?. money. more,   // jane     : (NN. ) -> ✅
//    ╰──NN ?.──╯                // boyfriend: (NN?.) -> ✅
//                ╰─N.─╯         // money    : (N.  ) -> ⛔
                             
jane. boyfriend?. money?. more, 
//                ╰─N?.─╯        // money    : (N?. ) -> 🈚 (⭐ short-circuiting)
                                 // more     : ignored
```

<img src="https://2527454625-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MfvEFZnSBhKT6fJmus0%2Fuploads%2FLfos1AjNUu0OlPieUEFV%2Foptional.chaining.jane.svg?alt=media&amp;token=9ae8c1b9-9936-4822-8f71-3d7e9f7d2d32" alt="" class="gitbook-drawing">
{% endtab %}

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

* <mark style="color:yellow;">**chaining methods**</mark>
  * [dot notation (.)](/web/js/val/obj/prop/access/dot-notation-..md) - chaining
  * [optional chaining (?., ?.\[\])](/web/js/val/obj/prop/access/optional-chaining.md)
* :no\_entry: <mark style="color:yellow;">**possible**</mark>**&#x20;**<mark style="color:red;">**errors**</mark><mark style="color:yellow;">**：**</mark>
  * [<mark style="color:red;">**ReferenceError**</mark>](/web/js/err/ref.md)：[<mark style="color:yellow;">**'xxx' is not defined**</mark>](/web/js/err/ref/not-defined.md):exclamation: (:point\_right:[undeclared identifier](/web/js/grammar/token/id/undeclared.md))
  * [<mark style="color:red;">**SyntaxError**</mark>](/web/js/err/syntax.md)：[<mark style="color:yellow;">**unexpected number**</mark>](/web/js/err/syntax/unexpected-number.md):exclamation: (:point\_right: needs valid [identifier](/web/js/grammar/token/id.md))
  * [<mark style="color:red;">**TypeError**</mark>](/web/js/err/type.md)：[<mark style="color:yellow;">**cannot read properties of nullish**</mark>](/web/js/err/type/cannot-read-properties-of-nullish.md):exclamation: (:point\_right:[nullish](/web/js/val/prim/nullish.md))
    {% endtab %}

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

* [ ] [JavaScript: The Definitive Guide](/web/master/ref/javascript-the-definitive-guide.md) ⟩&#x20;
  * [ ] 4.4 Property Access Expressions
    {% endtab %}

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

* [ ] [Expressions and operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators) ⟩ [Property accessors](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Property_Accessors)
  {% endtab %}
  {% endtabs %}