JS Minion | Frontend с нами
7 подписчиков
Привет, друг!

Сегодня мы поговорим об опциональной цепочке '?.' в JavaScript.

Ты наверняка сталкивался с ситуациями, когда твой код выводил ошибки, если обращался к свойствам или методам несуществующих объектов. Это неприятно, но мы можем упростить себе жизнь с помощью опциональной цепочки '?.'.

Допустим, у нас есть объект "person", который содержит информацию о человеке:

const person = {
name: 'John',
age: 25,
hobbies: ['football', 'basketball']
};

И мы хотим вывести в консоль информацию о любимом хобби человека:

console.log(person.hobbies[0].toUpperCase());

Но если у нашего объекта нет свойства "hobbies", то вместо желаемого результата мы получим ошибку. Чтобы избежать этого, мы можем использовать опциональную цепочку '?.'.

console.log(person.hobbies?.[0]?.toUpperCase());

Здесь мы добавили оператор '?.' после свойства "hobbies" и индекса "[0]". Это означает, что если свойства "hobbies" или элемента с индексом "[0]" нет, то код не будет бросать ошибку, а вернет undefined.
Теперь наш код будет безопасно работать даже на объектах, которые не имеют нужных свойств.

Кроме того, опциональная цепочка '?.' также может использоваться для вызова методов объектов, которые могут не существовать:

const person = {
name: 'John',
age: 25,
greet() {
console.log(`Привет, меня зовут ${this.name}`);
}
};

person.unknownMethod?.(); // код не будет бросать ошибку, если метод не существует

Здесь мы вызываем несуществующий метод "unknownMethod" с помощью опциональной цепочки '?.'.

Если метод не существует, код не будет бросать ошибку и выполнение программы продолжится.

Вот и все, друг! Теперь ты знаешь, что такое опциональная цепочка '?.' и как использовать ее для безопасной работы с объектами в JavaScript.

Надеюсь, эта статья была полезной и интересной для тебя! Так что ставь лайк) 👍
9 месяцев назад
JS Minion | Frontend с нами
7 подписчиков
ОПЦИОНАЛЬНАЯ ЦЕПОЧКА ‘?.’ В JS

Оператор опциональной цепочки ?. в JavaScript позволяет безопасно обращаться к вложенным свойствам или вызывать вложенные методы объектов, структур данных или массивов, проверяя наличие их существования.

let user = {
name: 'John',
address: {
street: '123 Main St.'
}
};

console.log(user.address?.street); // 123 Main St.
console.log(user.address?.city); // undefined

В примере выше мы пытаемся получить доступ к свойству street объекта address. Если свойство address существует и имеет свойство street, то будет возвращено его значение. Если же свойства address или street не существует, то будет возвращено значение undefined.
Оператор опциональной цепочки особенно полезен, когда неизвестно, будет ли некоторое свойство или метод присутствовать в исходном объекте, и нужно избежать ошибки, если оно отсутствует.
10 месяцев назад
Nuances of programming
13,7K подписчиков
Источник: Nuances of Programming Курс SkillFactory Frontend-разработчик PRO. Получите перспективную творческую профессию. Изучите JavaScript и TypeScript. Выполните 13 проектов в портфолио. Самая большая ответственность каждого программиста заключается в том, чтобы написанный им код был легко тестируемым и сохранял работоспособность с течением времени. Даже незначительные мелочи могут оказывать негативное влияние на код, а в итоге  —  и на программный продукт. Подобные проблемы я испытал на собственном опыте...
1 год назад