GeezerVisonThe World Wide Web, restored to 800 pixels of glory. | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Home|About|Gaming cabinet|Archives|How it works|Starter sites | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
GeezerVison is showing github.com — Optional chaining ?. by didostap · Pull Request #146 · javascript-tutorial/uk.javascript.info Conversation
|
There was an error while loading. Please reload this page.
| [recent browser="new"] | ||
|
|
||
| The optional chaining `?.` is a safe way to access nested object properties, even if an intermediate property doesn't exist. | ||
| Опціональний ланцюжок `?.` - це безпечний спосіб доступу до влатсивостей об'єктів з вкладеностями, навіть якщо проміжних властивостей не існує. |
There was a problem hiding this comment.
The reason will be displayed to describe this comment to others. Learn more.
| Опціональний ланцюжок `?.` - це безпечний спосіб доступу до влатсивостей об'єктів з вкладеностями, навіть якщо проміжних властивостей не існує. | |
| Опціональний ланцюжок `?.` -- це безпечний спосіб доступу до вкладених властивостей об'єктів, навіть якщо проміжних властивостей не існує. |
Sorry, something went wrong.
There was an error while loading. Please reload this page.
| В більшості наших користувачів є адреса `user.address` з вулицею `user.address.street`, проте дехто вирішив взагалі не вказувати адресу. | ||
|
|
||
| In such case, when we attempt to get `user.address.street`, and the user happens to be without an address, we get an error: | ||
| Отож якщо користувач не вказав адресу, а ми в свою чергу намагаємось отримати доступ до властивості `user.address.street` отримаємо помилку. |
There was a problem hiding this comment.
The reason will be displayed to describe this comment to others. Learn more.
| Отож якщо користувач не вказав адресу, а ми в свою чергу намагаємось отримати доступ до властивості `user.address.street` отримаємо помилку. | |
| Отож якщо користувач не вказав адресу, а ми в свою чергу спробуємо отримати доступ до властивості `user.address.street`, то отримаємо помилку. |
Sorry, something went wrong.
There was an error while loading. Please reload this page.
| Це очікуваний розвиток подій, так працює JavaScript. Оскільки `user.address` є `undefined`, то і спроба отримати `user.address.street` закінчується помилкою. | ||
|
|
||
| In many practical cases we'd prefer to get `undefined` instead of an error here (meaning "no street"). | ||
| Проте в багатьох життєвих ситуаціях було б набагато зручніше отримати просто `undefined` ("немає вулиці"). |
There was a problem hiding this comment.
The reason will be displayed to describe this comment to others. Learn more.
| Проте в багатьох життєвих ситуаціях було б набагато зручніше отримати просто `undefined` ("немає вулиці"). | |
| Проте в багатьох життєвих ситуаціях було б набагато зручніше отримати просто `undefined`, що буде означати "немає вулиці". |
Sorry, something went wrong.
There was an error while loading. Please reload this page.
| Проте в багатьох життєвих ситуаціях було б набагато зручніше отримати просто `undefined` ("немає вулиці"). | ||
|
|
||
| ...And another example. In the web development, we can get an object that corresponds to a web page element using a special method call, such as `document.querySelector('.elem')`, and it returns `null` when there's no such element. | ||
| Ще один приклад. У веб розробці ми можемо отримати об'єкт котрий відповідає елементу на веб сторінці за допомогою стеціальних методів, наприклад: `document.querySelector('.elem')`. Проте якщо ми намагатимось отримати елемент якого немає на сторінці, то нам вернеться `null`. |
There was a problem hiding this comment.
The reason will be displayed to describe this comment to others. Learn more.
| Ще один приклад. У веб розробці ми можемо отримати об'єкт котрий відповідає елементу на веб сторінці за допомогою стеціальних методів, наприклад: `document.querySelector('.elem')`. Проте якщо ми намагатимось отримати елемент якого немає на сторінці, то нам вернеться `null`. | |
| Ще один приклад. У веб розробці ми можемо отримати об'єкт котрий відповідає елементу на веб сторінці за допомогою спеціальних методів, наприклад: `document.querySelector('.elem')`. Проте якщо ми намагатимось отримати елемент якого немає на сторінці, то нам вернеться `null`. |
Sorry, something went wrong.
There was an error while loading. Please reload this page.
| // document.querySelector('.elem') is null if there's no element | ||
| let html = document.querySelector('.elem').innerHTML; // error if it's null | ||
| // document.querySelector('.elem') рівний null якщо такого елемента не існує | ||
| let html = document.querySelector('.elem').innerHTML; // помилка осткільки null |
There was a problem hiding this comment.
The reason will be displayed to describe this comment to others. Learn more.
| let html = document.querySelector('.elem').innerHTML; // помилка осткільки null | |
| let html = document.querySelector('.elem').innerHTML; // помилка оскільки null |
Sorry, something went wrong.
There was an error while loading. Please reload this page.
| }; | ||
|
|
||
| let user2 = null; | ||
| let user2 = null; // уявимо що користувач не авторизувався |
There was a problem hiding this comment.
The reason will be displayed to describe this comment to others. Learn more.
| let user2 = null; // уявимо що користувач не авторизувався | |
| let user2 = null; // уявімо, що користувач не авторизувався |
Sorry, something went wrong.
There was an error while loading. Please reload this page.
|
|
||
| ```js run | ||
| delete user?.name; // delete user.name if user exists | ||
| delete user?.name; // видалити user.name якщо користувач існує |
There was a problem hiding this comment.
The reason will be displayed to describe this comment to others. Learn more.
| delete user?.name; // видалити user.name якщо користувач існує | |
| delete user?.name; // видалити user.name, якщо користувач існує |
Sorry, something went wrong.
There was an error while loading. Please reload this page.
| ````warn header="We can use `?.` for safe reading and deleting, but not writing" | ||
| The optional chaining `?.` has no use at the left side of an assignment. | ||
| ````warn header="Ми можемо використовувати `?.` для безпечного читання і видалення властивостей, але не для запису" | ||
| Опціональний ланцюжок `?.` не має сенсу лівій частині просвоювання. |
There was a problem hiding this comment.
The reason will be displayed to describe this comment to others. Learn more.
| Опціональний ланцюжок `?.` не має сенсу лівій частині просвоювання. | |
| Опціональний ланцюжок `?.` не має сенсу у лівій частині просвоювання. |
Sorry, something went wrong.
There was an error while loading. Please reload this page.
There was an error while loading. Please reload this page.
| Ланцюжок `?.` дозволяє без виникнення помилок звертатись до вкладених властивостей. | ||
|
|
||
| Still, we should apply `?.` carefully, only where it's acceptable that the left part doesn't exist. So that it won't hide programming errors from us, if they occur. | ||
| Тим не менш, потрібно розумно застосовувати `?.`, тільки в тих випах де допустимо що ліва частина не існує. Щоб таким чином не приховувати потенційні помилки програмування. No newline at end of file |
There was a problem hiding this comment.
The reason will be displayed to describe this comment to others. Learn more.
| Тим не менш, потрібно розумно застосовувати `?.`, тільки в тих випах де допустимо що ліва частина не існує. Щоб таким чином не приховувати потенційні помилки програмування. | |
| Тим не менш, потрібно розумно застосовувати `?.`, тільки в тих випадках де допустимо що ліва частина не існує. Щоб таким чином не приховувати потенційні помилки програмування. |
Sorry, something went wrong.
There was an error while loading. Please reload this page.
|
@stas-dolgachov дякую за коментарі, все поправив |
Sorry, something went wrong.
There was an error while loading. Please reload this page.
|
@all-contributors add @didostap for translation |
Sorry, something went wrong.
There was an error while loading. Please reload this page.
|
I've put up a pull request to add @didostap! 🎉 |
Sorry, something went wrong.
There was an error while loading. Please reload this page.
|
@all-contributors add @stas-dolgachov for review |
Sorry, something went wrong.
There was an error while loading. Please reload this page.
|
I've put up a pull request to add @stas-dolgachov! 🎉 |
Sorry, something went wrong.
There was an error while loading. Please reload this page.
There was an error while loading. Please reload this page.
Successfully merging this pull request may close these issues.
There was an error while loading. Please reload this page.