Skip to content
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 5 additions & 5 deletions 1-js/04-object-basics/07-optional-chaining/article.md
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ alert(user.address.street); // помилка!
let html = document.querySelector('.elem').innerHTML; // помилка оскільки null
```

Для закріплення. Якщо елемента немає на вебсторінці, ми отримаємо помилку при спробі доступитися до властивості `.innerHTML` від `null`. І в деяких випадках, коли відсутність елемента для нас є нормою, ми хотіли б просто отримати `.innerHTML = null` (тобто `html = null`).
Для закріплення. Якщо елемента немає на вебсторінці, ми отримаємо помилку при спробі доступу до властивості `.innerHTML` від `null`. І в деяких випадках, коли відсутність елемента для нас є нормою, ми хотіли б просто отримати `.innerHTML = null` (тобто `html = null`).

Як ми можемо це реалізувати?

Expand Down Expand Up @@ -64,7 +64,7 @@ let user = {}; // користувач без властивості "address"
alert(user.address ? user.address.street ? user.address.street.name : null : null);
```

Виглядає просто жахливо і нечитабельно
Виглядає просто жахливо і нечитабельно.

Але не хвилюйтесь, існує кращий варіант реалізації такої задачі за допомогою логічного оператора `&&`:

Expand All @@ -90,7 +90,7 @@ alert( user.address && user.address.street && user.address.street.name ); // und
- працює як `value.prop`, якщо `value` існує,
- інакше (коли `value` є `undefined/null`) воно повертає `undefined`.

Ось безпечний спосіб доступитись до властивості `user.address.street` за допомогою `?.`:
Ось безпечний спосіб доступу до властивості `user.address.street` за допомогою `?.`:

```js run
let user = {}; // користувач без властивості "address"
Expand Down Expand Up @@ -122,7 +122,7 @@ alert( user?.address.street ); // undefined
````warn header="Не зловживайте опціональним ланцюжком"
Нам слід використовувати `?.` тільки в тих ситуаціях коли ми припускаємо що значення може не існувати.

Наприклад, якщо по нашій логіці об’єкт `user` точно існує, але його властивість `address` є необов’язковою, тоді нам слід використовувати конструкцію `user.address?.street`. Проте аж ніяк не `user?.address?.street`.
Наприклад, якщо за нашою логікою об’єкт `user` точно існує, але його властивість `address` є необов’язковою, тоді нам слід використовувати конструкцію `user.address?.street`. Проте аж ніяк не `user?.address?.street`.

Тоді якщо помилково змінна `user` виявиться пустою, ми побачимо програмну помилку і зможемо це виправити. В іншому випадку, якщо ми зловживаємо `?.`, помилки можуть замовчуватися там де це непотрібно й ускладнювати процес налагодження.
````
Expand Down Expand Up @@ -184,7 +184,7 @@ userGuest.admin?.(); // нічого (немає такого методу)

Вже потім `?.()` перевіряє ліву частину: якщо функція `admin` існує, то вона виконається (у випадку з `userAdmin`). Інакше (для `userGuest`) обчислення припиниться без помилок.

Також існує синтаксис `?.[]`, якщо ми хочемо отримати доступ до властивості за допомогою квадратних дужок `[]`, а не через крапку `.`. Як і в решті випадків, таких спосіб дає змогу безпечно читати властивості об’єкту яких може не існувати.
Також існує синтаксис `?.[]`, якщо ми хочемо отримати доступ до властивості за допомогою квадратних дужок `[]`, а не через крапку `.`. Як і в решті випадків, такий спосіб дає змогу безпечно читати властивості об’єкту яких може не існувати.

```js run
let key = "firstName";
Expand Down