Библиотека фронтендера | Frontend, JS, JavaScript, React.js, Angular.js, Vue.js
21.6K subscribers
2.9K photos
208 videos
48 files
5.2K links
Все самое полезное для фронтенда в одном канале.

По рекламе: @proglib_adv

Учиться у нас: https://proglib.io/w/77178ed4

Для обратной связи: @proglibrary_feeedback_bot

РКН: https://gosuslugi.ru/snet/67a5b6884689c2151c820bb4
Download Telegram
🛡️ TypeScript: безопасный доступ к вложенным свойствам

Никаких больше “Cannot read property of undefined”!


// Опасно
const city = user.address.city;
// Ошибка, если address === undefined

// Многословно
const city = user && user.address && user.address.city;

// Безопасно и элегантно
const city = user?.address?.city ?? 'Не указан’;


🔴 Optional chaining (?.)
Возвращает undefined, если слева null или undefined, и не пытается читать свойство дальше.

🔴 Nullish coalescing (??)
Возвращает правую часть только если слева null или undefined.

💡 Чем отличается от ||:


const volume = settings.volume ?? 0.5;
// Если volume = 0, вернёт 0 — корректно

const volume = settings.volume || 0.5;
// Если volume = 0, вернёт 0.5 — нежелательное поведение


Где использовать:

— ответы API
— вложенные объекты конфигурации
— поля форм, которые могут отсутствовать
— опциональные коллбэки

🈁 Примеры:


// Массивы
const first = users?.[0]?.name ?? 'Гость';

// Функции
onClick?.();

// Сложные цепочки
const price = product?.variants?.[0]?.price?.amount ?? 0;


🐸 Библиотека фронтендера

#hotfix #ts
Please open Telegram to view this post
VIEW IN TELEGRAM
🥰65