Optional Chaining (زنجیره اختیاری)

یکی از مشکلاتی که هممون توی جاوااسکریپت باهاش روبه‌رو شدیم، زمانی هست که می‌خوایم به یه پراپرتی از یه آبجکت دسترسی پیدا کنیم، اما اون آبجکت یا یکی از بخش‌هاش ممکنه null یا undefined باشه.

این اتفاق معمولاً زمانی می‌افته که داریم از یه API داده می‌گیریم؛ جایی که بعضی فیلدها همیشه قابل اعتماد نیستن و ممکنه توی بعضی شرایط اصلاً وجود نداشته باشن که در این صورت ممکنه موقع دسترسی به اون داده‌ها با خطا مواجه بشیم.

❌ قبل از Optional Chaining

قبل‌تر، برای اینکه مطمئن بشیم هر سطح از داده‌ها وجود داره، مجبور بودیم کلی شرط پشت سر هم بنویسیم:

if (user && user.profile && user.profile.address && user.profile.address.city) {
  console.log(user.profile.address.city)
}

این کد:

• هم طولانیه

• هم خوندنش سخته

• و اگه بخوایم این بررسی رو برای چند پراپرتی مختلف انجام بدیم، خیلی زود کدمون شلوغ و غیرقابل‌نگهداری میشه.

✅ Optional Chaining (?.)

Optional Chaining اومد تا این مشکل رو خیلی تمیز حل کنه.
با استفاده از ?. می‌تونیم به جاوااسکریپت بگیم:

اگه این بخش وجود داشت برو مرحله بعد، اگه نه، همون‌جا متوقف شو.

اینطوری دیگه لازم نیست برای هر سطح، شرط جداگانه بنویسیم.

راه‌حل با Optional Chaining

const city = user?.profile?.address?.city ?? 'نامشخص'
console.log(city)

اینجا چه اتفاقی می‌افته؟

• ?. بررسی می‌کنه که آیا هر سطح از آبجکت وجود داره یا نه

• اگه هر کدوم از این بخش‌ها (user یا profile یا address) null یا undefined باشه، کل عبارت undefined برمی‌گرده

• با ?? (Nullish Coalescing) هم می‌تونیم یه مقدار پیش‌فرض مثل 'نامشخص' در نظر بگیریم

مثال کاربردی

فرض کنید همچین آبجکتی داریم:

const user = {
  profile: {
    address: {
      city: 'تهران',
    },
  },
}

const city = user?.profile?.address?.city ?? 'نامشخص'
console.log(city) // خروجی: تهران

حالا اگه address وجود نداشته باشه:

const user = { profile: {} }

const city = user?.profile?.address?.city ?? 'نامشخص'
console.log(city) // خروجی: نامشخص

بدون هیچ خطایی، کد به‌درستی اجرا میشه و مقدار پیش‌فرض نمایش داده میشه.

جمع‌بندی

با استفاده از Optional Chaining (?.) می‌تونیم جلوی خطاهای رایج موقع دسترسی به پراپرتی‌های null یا undefined رو بگیریم و کدمون رو تمیزتر و خواناتر بنویسیم.

در کنار اون، Nullish Coalescing (??) کمک می‌کنه وقتی واقعاً مقداری وجود نداره، یه مقدار منطقی و پیش‌فرض نمایش بدیم.

ترکیب این دوتا، مخصوصاً موقع کار با داده‌های API، باعث می‌شه کدها امن‌تر و خواناتر نوشته بشن..