M

MLOG

فارسی

بر عملگر زنجیره اختیاری (?.) جاوا اسکریپت مسلط شوید تا کدی تمیزتر، ایمن‌تر و قوی‌تر بنویسید. یاد بگیرید چگونه از خطاها جلوگیری کرده و خصوصیات تودرتو را به راحتی مدیریت کنید.

زنجیره اختیاری جاوا اسکریپت: دسترسی ایمن و زیبا به خصوصیات

پیمایش در شبکه پیچیده خصوصیات تودرتو در جاوا اسکریپت اغلب می‌تواند مانند عبور از یک میدان مین باشد. یک خصوصیت ناموجود می‌تواند خطای وحشتناک "Cannot read property 'x' of undefined" را ایجاد کند و برنامه شما را به طور کامل متوقف کند. روش‌های سنتی برای بررسی دفاعی مقادیر null یا undefined قبل از دسترسی به هر خصوصیت، می‌تواند منجر به کدی طولانی و دست‌وپاگیر شود. خوشبختانه، جاوا اسکریپت یک راه‌حل زیباتر و مختصرتر ارائه می‌دهد: زنجیره اختیاری (optional chaining).

زنجیره اختیاری چیست؟

زنجیره اختیاری، که با عملگر ?. نمایش داده می‌شود، راهی برای دسترسی به خصوصیات شیئی فراهم می‌کند که ممکن است null یا undefined باشند، بدون اینکه خطایی ایجاد شود. به جای پرتاب خطا هنگام مواجهه با یک مقدار nullish (یعنی null یا undefined) در زنجیره، به سادگی مقدار undefined را برمی‌گرداند. این به شما اجازه می‌دهد تا با خیال راحت به خصوصیات تودرتو دسترسی پیدا کرده و مقادیر بالقوه ناموجود را به زیبایی مدیریت کنید.

آن را به عنوان یک راهنمای ایمن برای ساختارهای شیء خود در نظر بگیرید. این به شما امکان می‌دهد تا از طریق خصوصیات «زنجیره» بسازید، و اگر در هر نقطه‌ای یک خصوصیت موجود نبود (null یا undefined)، زنجیره به سرعت متوقف شده و بدون ایجاد خطا، undefined را برمی‌گرداند.

چگونه کار می‌کند؟

عملگر ?. بعد از نام یک خصوصیت قرار می‌گیرد. اگر مقدار خصوصیتی که در سمت چپ عملگر قرار دارد null یا undefined باشد، کل عبارت بلافاصله به undefined ارزیابی می‌شود. در غیر این صورت، دسترسی به خصوصیت به طور معمول ادامه می‌یابد.

این مثال را در نظر بگیرید:

const user = {
  profile: {
    address: {
      city: "London"
    }
  }
};

// بدون زنجیره اختیاری، اگر user.profile یا user.profile.address تعریف نشده باشد، این کد می‌تواند خطا ایجاد کند
const city = user.profile.address.city; // London

// با زنجیره اختیاری، می‌توانیم با خیال راحت به شهر دسترسی پیدا کنیم حتی اگر profile یا address موجود نباشد
const citySafe = user?.profile?.address?.city; // London

const userWithoutAddress = {
  profile: {},
};

const citySafeUndefined = userWithoutAddress?.profile?.address?.city; // undefined (بدون خطا)

در مثال اول، هم با و هم بدون زنجیره اختیاری، ما "London" را دریافت می‌کنیم زیرا همه خصوصیات وجود دارند.

در مثال دوم، userWithoutAddress.profile وجود دارد اما userWithoutAddress.profile.address وجود ندارد. بدون زنجیره اختیاری، دسترسی به userWithoutAddress.profile.address.city باعث خطا می‌شود. با زنجیره اختیاری، ما بدون هیچ خطایی undefined دریافت می‌کنیم.

مزایای استفاده از زنجیره اختیاری

مثال‌ها و موارد استفاده عملی

۱. دسترسی به داده‌های API

هنگام دریافت داده از یک API، شما اغلب کنترل کاملی بر ساختار داده ندارید. برخی فیلدها ممکن است موجود نباشند یا مقادیر null داشته باشند. زنجیره اختیاری در مدیریت این سناریوها به زیبایی بسیار ارزشمند است.

async function fetchData(userId) {
  const response = await fetch(`https://api.example.com/users/${userId}`);
  const data = await response.json();

  // دسترسی ایمن به ایمیل کاربر، حتی اگر خصوصیت 'email' موجود نباشد
  const email = data?.profile?.email;
  console.log("Email:", email || "Email not available"); // از nullish coalescing برای ارائه یک مقدار پیش‌فرض استفاده کنید

  //دسترسی ایمن به شهر آدرس کاربر
  const city = data?.address?.city;
  console.log("City: ", city || "City not available");


}

fetchData(123); // نمونه استفاده

۲. کار با تنظیمات کاربر

تنظیمات کاربر اغلب در اشیاء تودرتو ذخیره می‌شوند. زنجیره اختیاری می‌تواند دسترسی به این تنظیمات را ساده کند، حتی اگر برخی از تنظیمات تعریف نشده باشند.

const userPreferences = {
  theme: {
    color: "dark",
  },
};

// دسترسی ایمن به اندازه فونت کاربر، با ارائه یک مقدار پیش‌فرض در صورت عدم تنظیم
const fontSize = userPreferences?.font?.size || 16;
console.log("Font Size:", fontSize); // خروجی: 16 (مقدار پیش‌فرض)

const color = userPreferences?.theme?.color || "light";
console.log("Color Theme:", color); // خروجی: dark

۳. مدیریت Event Listenerها

هنگام کار با event listenerها، ممکن است نیاز به دسترسی به خصوصیات شیء event داشته باشید. زنجیره اختیاری می‌تواند از خطاها جلوگیری کند اگر شیء event یا خصوصیات آن تعریف نشده باشند.

document.getElementById('myButton').addEventListener('click', function(event) {
  // دسترسی ایمن به ID عنصر هدف
  const targetId = event?.target?.id;
  console.log("Target ID:", targetId);
});

۴. بین‌المللی‌سازی (i18n)

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

const translations = {
  en: {
    greeting: "Hello",
    farewell: "Goodbye"
  },
  fr: {
    greeting: "Bonjour",
    //farewell: "Au Revoir" - برای نمایش حذف شده است
  }
};

const locale = "fr";

// دسترسی ایمن به تبریک ترجمه‌شده
const greeting = translations?.[locale]?.greeting || "Hello";
console.log("Greeting:", greeting); // خروجی: Bonjour

//دسترسی ایمن به خداحافظی ترجمه‌شده
const farewell = translations?.[locale]?.farewell || "Goodbye";
console.log("Farewell:", farewell); //خروجی: Goodbye (به انگلیسی پیش‌فرض می‌شود)

زنجیره اختیاری با فراخوانی توابع

زنجیره اختیاری همچنین می‌تواند برای فراخوانی ایمن توابعی که ممکن است وجود نداشته باشند استفاده شود. برای این کار از سینتکس ?.() استفاده کنید.

const myObject = {
  myMethod: function() {
    console.log("Method called!");
  }
};

// فراخوانی ایمن متد در صورت وجود
myObject?.myMethod?.(); // خروجی: Method called!

const myObject2 = {};

//فراخوانی ایمن متد، اما وجود ندارد
myObject2?.myMethod?.(); // بدون خطا، هیچ اتفاقی نمی‌افتد

زنجیره اختیاری با دسترسی به آرایه

زنجیره اختیاری می‌تواند با دسترسی به آرایه نیز استفاده شود، با استفاده از سینتکس ?.[index]. این کار هنگام کار با آرایه‌هایی که ممکن است خالی یا کاملاً پر نشده باشند مفید است.

const myArray = ["apple", "banana", "cherry"];

//دسترسی ایمن به یک عنصر آرایه
const firstElement = myArray?.[0]; // "apple"

const myArray2 = [];

//دسترسی ایمن به یک عنصر آرایه، undefined خواهد بود.
const firstElement2 = myArray2?.[0]; // undefined

const secondElement = myArray?.[10]; // undefined (بدون خطا)

ترکیب زنجیره اختیاری با Nullish Coalescing

زنجیره اختیاری اغلب با عملگر nullish coalescing (??) دست به دست هم می‌دهد. عملگر nullish coalescing یک مقدار پیش‌فرض را زمانی ارائه می‌دهد که سمت چپ عملگر null یا undefined باشد. این به شما امکان می‌دهد تا مقادیر جایگزین را هنگام عدم وجود یک خصوصیت ارائه دهید.

const user = {};

// دسترسی ایمن به نام کاربر، با ارائه یک مقدار پیش‌فرض در صورت عدم تنظیم
const name = user?.profile?.name ?? "Unknown User";
console.log("Name:", name); // خروجی: Unknown User

در این مثال، اگر user.profile یا user.profile.name برابر با null یا undefined باشد، به متغیر name مقدار "Unknown User" اختصاص داده می‌شود.

سازگاری مرورگرها

زنجیره اختیاری یک ویژگی نسبتاً جدید در جاوا اسکریپت است (در ECMAScript 2020 معرفی شده است). این ویژگی توسط تمام مرورگرهای مدرن پشتیبانی می‌شود. اگر نیاز به پشتیبانی از مرورگرهای قدیمی‌تر دارید، ممکن است لازم باشد از یک ترانسپایلر مانند Babel برای تبدیل کد خود به نسخه سازگار جاوا اسکریپت استفاده کنید.

محدودیت‌ها

بهترین شیوه‌ها

نتیجه‌گیری

عملگر زنجیره اختیاری جاوا اسکریپت ابزاری قدرتمند برای نوشتن کدی تمیزتر، ایمن‌تر و قوی‌تر است. با ارائه روشی مختصر برای دسترسی به خصوصیات بالقوه ناموجود، به جلوگیری از خطاها، کاهش کدهای تکراری و بهبود خوانایی کد کمک می‌کند. با درک نحوه کار آن و پیروی از بهترین شیوه‌ها، می‌توانید از زنجیره اختیاری برای ساخت برنامه‌های جاوا اسکریپت مقاوم‌تر و قابل نگهداری‌تر بهره‌مند شوید.

زنجیره اختیاری را در پروژه‌های خود به کار بگیرید و مزایای دسترسی ایمن و زیبا به خصوصیات را تجربه کنید. این کار کد شما را خواناتر، کمتر مستعد خطا و در نهایت، نگهداری آن را آسان‌تر خواهد کرد. کدنویسی خوبی داشته باشید!