زنجیره‌بندی اختیاری (Optional Chaining) جاوااسکریپت برای تودرتویی عمیق: دسترسی ایمن چند سطحی

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

مشکل: پیمایش داده‌های تودرتو بدون خطا

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

            const order = {
  id: 'ORD12345',
  customer: {
    profile: {
      name: 'Anya Sharma',
      contact: {
        email: 'anya.sharma@example.com',
        phoneNumbers: [
          { type: 'mobile', number: '+91 98765 43210' },
          { type: 'work', number: '+91 11 2345 6789' }
        ]
      }
    },
    preferences: {
      language: 'en-IN'
    }
  },
  items: [
    { productId: 'PROD001', quantity: 2, price: 50.00 },
    { productId: 'PROD002', quantity: 1, price: 120.50 }
  ],
  shippingAddress: {
    street: '123 Gandhi Road',
    city: 'Mumbai',
    country: 'India'
  }
};

            

              
                Copy
              
            
          

حالا، فرض کنید می‌خواهید شماره تلفن همراه مشتری را بازیابی کنید. بدون زنجیره‌بندی اختیاری، ممکن است بنویسید:

            let mobileNumber;
if (order && order.customer && order.customer.profile && order.customer.profile.contact && order.customer.profile.contact.phoneNumbers) {
  mobileNumber = order.customer.profile.contact.phoneNumbers.find(phone => phone.type === 'mobile')?.number;
}
console.log(mobileNumber); // Output: '+91 98765 43210'

            

              
                Copy
              
            
          

این کد کار می‌کند، اما طولانی است. چه اتفاقی می‌افتد اگر هر یک از خواص میانی (مانند contact یا phoneNumbers) وجود نداشته باشند؟ کد یک خطای TypeError ایجاد می‌کند: "Cannot read properties of undefined (reading '...')". این یک منبع مکرر برای باگ‌ها است، به خصوص هنگام کار با داده‌هایی از منابع مختلف یا APIهایی که ممکن است همیشه اطلاعات کاملی را برنگردانند.

معرفی زنجیره‌بندی اختیاری (?.)

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

استفاده پایه

بیایید مثال قبلی را با استفاده از زنجیره‌بندی اختیاری بازنویسی کنیم:

            const order = {
  id: 'ORD12345',
  customer: {
    profile: {
      name: 'Anya Sharma',
      contact: {
        email: 'anya.sharma@example.com',
        phoneNumbers: [
          { type: 'mobile', number: '+91 98765 43210' },
          { type: 'work', number: '+91 11 2345 6789' }
        ]
      }
    },
    preferences: {
      language: 'en-IN'
    }
  },
  items: [
    { productId: 'PROD001', quantity: 2, price: 50.00 },
    { productId: 'PROD002', quantity: 1, price: 120.50 }
  ],
  shippingAddress: {
    street: '123 Gandhi Road',
    city: 'Mumbai',
    country: 'India'
  }
};

const mobileNumber = order?.customer?.profile?.contact?.phoneNumbers?.find(phone => phone.type === 'mobile')?.number;

console.log(mobileNumber); // Output: '+91 98765 43210'

            

              
                Copy
              
            
          

این به طور قابل توجهی خواناتر است. اگر هر بخشی از زنجیره (مثلاً order.customer.profile.contact) null یا undefined باشد، کل عبارت بدون خطا به undefined ارزیابی می‌شود.

مدیریت زیبا و روان خواص گمشده

سناریویی را در نظر بگیرید که در آن ممکن است یک مشتری شماره تماسی نداشته باشد:

            const orderWithoutContact = {
  id: 'ORD67890',
  customer: {
    profile: {
      name: 'Kenji Tanaka'
      // No contact information here
    }
  }
};

const mobileNumberForKenji = orderWithoutContact?.customer?.profile?.contact?.phoneNumbers?.find(phone => phone.type === 'mobile')?.number;

console.log(mobileNumberForKenji); // Output: undefined

            

              
                Copy
              
            
          

به جای کرش کردن، کد به زیبایی undefined را برمی‌گرداند. این به ما امکان می‌دهد مقادیر پیش‌فرض ارائه دهیم یا عدم وجود داده را به طور مناسب مدیریت کنیم.

تودرتویی عمیق: زنجیره‌بندی چندین عملگر اختیاری

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

مثال: دسترسی به یک اولویت تودرتو

بیایید سعی کنیم به زبان ترجیحی مشتری دسترسی پیدا کنیم که در چندین سطح تودرتو قرار دارد:

            const customerLanguage = order?.customer?.preferences?.language;
console.log(customerLanguage); // Output: 'en-IN'

            

              
                Copy
              
            
          

اگر شیء preferences وجود نداشت، یا اگر خاصیت language در آن وجود نداشت، customerLanguage برابر با undefined می‌شد.

کار با آرایه‌ها در ساختارهای تودرتو

هنگام کار با آرایه‌هایی که بخشی از یک ساختار تودرتو هستند، می‌توانید زنجیره‌بندی اختیاری را با متدهای آرایه مانند find، map یا دسترسی به عناصر با ایندکس ترکیب کنید.

بیایید نوع اولین شماره تلفن را دریافت کنیم، با فرض اینکه وجود داشته باشد:

            const firstPhoneNumberType = order?.customer?.profile?.contact?.phoneNumbers?.[0]?.type;
console.log(firstPhoneNumberType); // Output: 'mobile'

            

              
                Copy
              
            
          

در اینجا، ?.[0] به طور ایمن به اولین عنصر آرایه phoneNumbers دسترسی پیدا می‌کند. اگر phoneNumbers null، undefined یا یک آرایه خالی باشد، به undefined ارزیابی می‌شود.

ترکیب زنجیره‌بندی اختیاری با ادغام پوچ (??)

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

فرض کنید می‌خواهیم ایمیل مشتری را بازیابی کنیم و اگر در دسترس نبود، مقدار پیش‌فرض «ارائه نشده» را قرار دهیم:

            const customerEmail = order?.customer?.profile?.contact?.email ?? 'Not provided';
console.log(customerEmail); // Output: 'anya.sharma@example.com'

// Example with missing email:
const orderWithoutEmail = {
  id: 'ORD11223',
  customer: {
    profile: {
      name: 'Li Wei',
      contact: {
        // No email property
      }
    }
  }
};

const liWeiEmail = orderWithoutEmail?.customer?.profile?.contact?.email ?? 'Not provided';
console.log(liWeiEmail); // Output: 'Not provided'

            

              
                Copy
              
            
          

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

موارد استفاده در توسعه جهانی

زنجیره‌بندی اختیاری و ادغام پوچ ابزارهای بسیار ارزشمندی برای توسعه‌دهندگانی هستند که روی برنامه‌های جهانی کار می‌کنند:

• برنامه‌های بین‌المللی‌شده (i18n): هنگام واکشی محتوای محلی‌شده یا ترجیحات کاربر، ساختارهای داده می‌توانند به شدت تودرتو شوند. زنجیره‌بندی اختیاری تضمین می‌کند که اگر یک منبع زبان یا تنظیم خاصی وجود نداشته باشد، برنامه کرش نکند. به عنوان مثال، دسترسی به یک ترجمه ممکن است به این شکل باشد: translations[locale]?.messages?.welcome ?? 'Welcome'.
• یکپارچه‌سازی با API: APIها از ارائه‌دهندگان یا مناطق مختلف ممکن است ساختارهای پاسخ متفاوتی داشته باشند. برخی فیلدها ممکن است اختیاری یا به صورت شرطی موجود باشند. زنجیره‌بندی اختیاری به شما امکان می‌دهد تا داده‌ها را از این APIهای متنوع به طور ایمن استخراج کنید بدون نیاز به مدیریت خطای گسترده.

  واکشی داده‌های کاربر از چندین سرویس را در نظر بگیرید:

              const userProfile = serviceA.getUser(userId)?.profile?.details ?? serviceB.getProfile(userId)?.data?.attributes;
  
              
  
                
                  Copy
                
              
            

• فایل‌های پیکربندی: فایل‌های پیکربندی پیچیده، به ویژه آنهایی که به صورت پویا یا از منابع راه دور بارگذاری می‌شوند، می‌توانند از دسترسی ایمن بهره‌مند شوند. اگر یک تنظیم پیکربندی به شدت تودرتو باشد و ممکن است همیشه وجود نداشته باشد، زنجیره‌بندی اختیاری از خطاهای زمان اجرا جلوگیری می‌کند.
• کتابخانه‌های شخص ثالث: هنگام تعامل با کتابخانه‌های جاوااسکریپت شخص ثالث، ساختارهای داده داخلی آنها ممکن است همیشه به طور کامل مستند یا قابل پیش‌بینی نباشند. زنجیره‌بندی اختیاری یک شبکه ایمنی فراهم می‌کند.

موارد خاص و ملاحظات

زنجیره‌بندی اختیاری در مقابل عملگر منطقی AND (&&)

قبل از زنجیره‌بندی اختیاری، توسعه‌دهندگان اغلب از عملگر منطقی AND برای بررسی‌ها استفاده می‌کردند:

            const userEmail = order && order.customer && order.customer.profile && order.customer.profile.contact && order.customer.profile.contact.email;

            

              
                Copy
              
            
          

اگرچه این کار می‌کند، اما یک تفاوت کلیدی دارد: عملگر && مقدار آخرین عملوند truthy یا اولین عملوند falsy را برمی‌گرداند. این بدان معناست که اگر order.customer.profile.contact.email یک رشته خالی ('') بود، که falsy است، کل عبارت به '' ارزیابی می‌شد. از طرف دیگر، زنجیره‌بندی اختیاری به طور خاص null یا undefined را بررسی می‌کند. عملگر ادغام پوچ (??) روش مدرن و ترجیح داده شده برای مدیریت مقادیر پیش‌فرض است، زیرا فقط برای null یا undefined فعال می‌شود.

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

زنجیره‌بندی اختیاری همچنین می‌تواند برای فراخوانی شرطی توابع استفاده شود:

            const userSettings = {
  theme: 'dark',
  updatePreferences: function(prefs) { console.log('Updating preferences:', prefs); }
};

// Safely call updatePreferences if it exists
userSettings?.updatePreferences?.({ theme: 'light' });

const noUpdateSettings = {};
noUpdateSettings?.updatePreferences?.({ theme: 'dark' }); // Does nothing, no error

            

              
                Copy
              
            
          

در اینجا، userSettings?.updatePreferences?.() ابتدا بررسی می‌کند که آیا updatePreferences روی userSettings وجود دارد یا خیر، و سپس بررسی می‌کند که آیا نتیجه یک تابعی است که می‌توان آن را فراخوانی کرد. این برای متدهای اختیاری یا callbackها مفید است.

زنجیره‌بندی اختیاری و عملگر `delete`

زنجیره‌بندی اختیاری با عملگر delete تعامل ندارد. شما نمی‌توانید از ?. برای حذف شرطی یک خاصیت استفاده کنید.

پیامدهای عملکردی

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

بهترین شیوه‌ها برای تودرتویی عمیق

1. از ?. به طور مداوم استفاده کنید: هر زمان که به یک خاصیت تودرتوی بالقوه گمشده دسترسی پیدا می‌کنید، از عملگر زنجیره‌بندی اختیاری استفاده کنید.
2. برای مقادیر پیش‌فرض با ?? ترکیب کنید: از عملگر ادغام پوچ (??) برای ارائه مقادیر پیش‌فرض معقول زمانی که یک خاصیت null یا undefined است، استفاده کنید.
3. از زنجیره‌بندی بیش از حد در موارد غیرضروری خودداری کنید: اگر کاملاً مطمئن هستید که یک خاصیت وجود دارد (مثلاً یک خاصیت اولیه در یک شیء عمیقاً تودرتو که خودتان با اعتبارسنجی دقیق ساخته‌اید)، ممکن است برای یک افزایش عملکرد ناچیز از زنجیره‌بندی اختیاری صرف نظر کنید، اما این کار باید با احتیاط انجام شود.
4. خوانایی بر ابهام ارجح است: در حالی که زنجیره‌بندی اختیاری کد را مختصر می‌کند، از زنجیره‌بندی به قدری عمیق که درک آن دشوار شود، خودداری کنید. برای سناریوهای بسیار پیچیده، استفاده از destructuring یا توابع کمکی را در نظر بگیرید.
5. به طور کامل تست کنید: اطمینان حاصل کنید که منطق زنجیره‌بندی اختیاری شما تمام موارد مورد انتظار از داده‌های گمشده را پوشش می‌دهد، به ویژه هنگام یکپارچه‌سازی با سیستم‌های خارجی.
6. تایپ‌اسکریپت را در نظر بگیرید: برای برنامه‌های بزرگ، تایپ‌اسکریپت تایپ‌دهی استاتیک را ارائه می‌دهد که می‌تواند بسیاری از این خطاهای بالقوه را در حین توسعه شناسایی کند و ویژگی‌های ایمنی زمان اجرای جاوااسکریپت را تکمیل کند.

نتیجه‌گیری

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