پارامترهای تابع Nullish Coalescing در جاوااسکریپت: بهبود پارامترهای پیش‌فرض

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

درک مشکل: پارامترهای پیش‌فرض سنتی و مقادیر Falsy

پیش از معرفی عملگر nullish coalescing، توسعه‌دهندگان جاوااسکریپت معمولاً از عملگر منطقی OR (||) برای تخصیص مقادیر پیش‌فرض به پارامترهای تابع استفاده می‌کردند. اگرچه این رویکرد در بسیاری از موارد کارساز بود، اما یک محدودیت قابل توجه داشت: عملگر منطقی OR هر مقدار falsy (0، ''، false، null، undefined، NaN) را معادل false در نظر می‌گیرد که منجر به رفتار غیرمنتظره می‌شود.

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

            function greet(name) {
  name = name || 'Guest';
  console.log(`Hello, ${name}!`);
}

greet('Alice'); // Output: Hello, Alice!
greet('');    // Output: Hello, Guest!
greet(null);  // Output: Hello, Guest!
greet(undefined); // Output: Hello, Guest!

            

              
                Copy
              
            
          

در این مثال، اگر پارامتر name یک رشته خالی ('') باشد، عملگر منطقی OR آن را به عنوان false در نظر گرفته و مقدار پیش‌فرض 'Guest' را تخصیص می‌دهد. در حالی که این ممکن است در برخی سناریوها قابل قبول باشد، شرایطی وجود دارد که یک رشته خالی یک ورودی معتبر است و نباید با مقدار پیش‌فرض جایگزین شود. به طور مشابه، اگر انتظار داشته باشید که صفر (`0`) یک ورودی معتبر باشد، `||` آنطور که انتظار می‌رود عمل نخواهد کرد.

راه حل: عملگر Nullish Coalescing (??)

عملگر nullish coalescing (??) روش دقیق‌تری برای تخصیص مقادیر پیش‌فرض ارائه می‌دهد. این عملگر فقط null یا undefined را به عنوان مقادیر “nullish” در نظر می‌گیرد و به سایر مقادیر falsy مانند 0، '' و false اجازه می‌دهد تا به عنوان ورودی‌های معتبر در نظر گرفته شوند.

در اینجا نحوه بازنویسی تابع greet با استفاده از عملگر nullish coalescing آمده است:

            function greet(name) {
  name = name ?? 'Guest';
  console.log(`Hello, ${name}!`);
}

greet('Alice'); // Output: Hello, Alice!
greet('');    // Output: Hello, !
greet(null);  // Output: Hello, Guest!
greet(undefined); // Output: Hello, Guest!
greet(0); // Output: Hello, 0!

            

              
                Copy
              
            
          

اکنون، پارامتر name تنها زمانی به 'Guest' پیش‌فرض می‌شود که صراحتاً null یا undefined باشد. یک رشته خالی، صفر، یا هر مقدار falsy دیگری به عنوان یک ورودی معتبر در نظر گرفته می‌شود.

استفاده مستقیم از Nullish Coalescing در پارامترهای تابع

جاوااسکریپت همچنین به شما اجازه می‌دهد مقادیر پیش‌فرض را مستقیماً در لیست پارامترهای تابع مشخص کنید. ترکیب این ویژگی با عملگر nullish coalescing روشی زیبا و مختصر برای مدیریت مقادیر پیش‌فرض فراهم می‌کند.

            function greet(name = 'Guest') {
  console.log(`Hello, ${name}!`);
}

greet('Alice'); // Output: Hello, Alice!
greet();    // Output: Hello, Guest!
greet(undefined); // Output: Hello, Guest!
greet(null); // Output: Hello, null!

            

              
                Copy
              
            
          

در این مثال، اگر name ارائه نشود یا undefined باشد، مقدار پیش‌فرض 'Guest' به طور خودکار تخصیص داده می‌شود. با این حال، تخصیص صریح null منجر به "Hello, null!" خواهد شد.

            function greet(name) {
  name ??= 'Guest';
  console.log(`Hello, ${name}!`);
}

greet('Alice'); // Output: Hello, Alice!
greet('');    // Output: Hello, !
greet(null);  // Output: Hello, Guest!
greet(undefined); // Output: Hello, Guest!
greet(0); // Output: Hello, 0!

            

              
                Copy
              
            
          

ترکیبی از عملگر تخصیص nullish `??=` با تعریف تابع سنتی می‌تواند کد را بیشتر ساده کند. در اینجا، تنها اگر متغیر `name` نالیش باشد، مقدار `Guest` به آن تخصیص داده خواهد شد.

            function processData(data, options = {}) {
  const timeout = options.timeout ?? 5000; // Default timeout of 5 seconds
  const maxRetries = options.maxRetries ?? 3; // Default maximum retries of 3
  const debugMode = options.debugMode ?? false; // Default debug mode is off

  console.log(`Timeout: ${timeout}ms, Max Retries: ${maxRetries}, Debug Mode: ${debugMode}`);
  // ... (Data processing logic)
}

processData({ name: 'Example' }); // Output: Timeout: 5000ms, Max Retries: 3, Debug Mode: false
processData({ name: 'Example' }, { timeout: 10000 }); // Output: Timeout: 10000ms, Max Retries: 3, Debug Mode: false
processData({ name: 'Example' }, { timeout: 0, maxRetries: 5, debugMode: true }); // Output: Timeout: 0ms, Max Retries: 5, Debug Mode: true

            

              
                Copy
              
            
          

این به ویژه هنگام کار با اشیاء پیکربندی اختیاری مفید است. عملگر nullish coalescing تضمین می‌کند که مقادیر پیش‌فرض فقط زمانی استفاده می‌شوند که ویژگی‌های مربوطه وجود نداشته باشند یا به صراحت روی null یا undefined تنظیم شده باشند.

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

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

هنگام توسعه برنامه‌های چندزبانه، اغلب نیاز به ارائه ترجمه‌های پیش‌فرض برای زبان‌های خاص دارید. عملگر nullish coalescing می‌تواند برای مدیریت زیبا و روان ترجمه‌های گمشده استفاده شود.

            const translations = {
  en: {
    greeting: 'Hello, {name}!'
  },
  fr: {
    greeting: 'Bonjour, {name} !'
  }
};

function translate(key, language = 'en', params = {}) {
  const translation = translations[language]?.[key] ?? translations['en'][key] ?? 'Translation not found';
  
  return translation.replace(/{(\w+)}/g, (_, placeholder) => params[placeholder] ?? '');
}

console.log(translate('greeting', 'en', { name: 'Alice' })); // Output: Hello, Alice!
console.log(translate('greeting', 'fr', { name: 'Alice' })); // Output: Bonjour, Alice !
console.log(translate('greeting', 'de', { name: 'Alice' })); // Output: Hello, Alice! (falls back to English)
console.log(translate('nonExistentKey', 'en')); // Output: Translation not found (falls back to default message)

            

              
                Copy
              
            
          

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

۲. مدیریت داده‌های API

هنگام کار با داده‌های API، مواجهه با شرایطی که برخی فیلدها وجود ندارند یا مقادیر null دارند، معمول است. عملگر nullish coalescing می‌تواند برای ارائه مقادیر پیش‌فرض برای این فیلدها استفاده شود، که از خطاها جلوگیری کرده و تجربه کاربری را بهبود می‌بخشد.

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

    const userName = data.name ?? 'Unknown User';
    const userEmail = data.email ?? 'No email provided';
    const userAvatar = data.avatar_url ?? '/default-avatar.png';

    console.log(`User Name: ${userName}, Email: ${userEmail}, Avatar: ${userAvatar}`);
  } catch (error) {
    console.error('Error fetching user data:', error);
  }
}

// Assuming the API might return data like this:
// { name: 'Bob', email: 'bob@example.com' }
// { name: 'Charlie' }
// { email: null }

fetchUserData(123); // Output: User Name: Bob, Email: bob@example.com, Avatar: /default-avatar.png
fetchUserData(456); // Output: User Name: Charlie, Email: No email provided, Avatar: /default-avatar.png

            

              
                Copy
              
            
          

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

۳. پرچم‌های ویژگی و پیکربندی

پرچم‌های ویژگی به شما امکان می‌دهند تا ویژگی‌ها را در برنامه خود بدون استقرار کد جدید فعال یا غیرفعال کنید. عملگر nullish coalescing می‌تواند برای ارائه مقادیر پیش‌فرض برای پرچم‌های ویژگی استفاده شود و به شما امکان کنترل رفتار برنامه در محیط‌های مختلف را می‌دهد.

            const featureFlags = {
  darkModeEnabled: true,
  newDashboardEnabled: false
};

function isFeatureEnabled(featureName) {
  const isEnabled = featureFlags[featureName] ?? false;
  return isEnabled;
}

if (isFeatureEnabled('darkModeEnabled')) {
  console.log('Dark mode is enabled!');
}

if (isFeatureEnabled('newDashboardEnabled')) {
  console.log('New dashboard is enabled!');
} else {
  console.log('Using the old dashboard.');
}

            

              
                Copy
              
            
          

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

۴. مدیریت موقعیت جغرافیایی

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

            function showMap(latitude, longitude) {
  const defaultLatitude = 40.7128; // New York City
  const defaultLongitude = -74.0060;

  const lat = latitude ?? defaultLatitude;
  const lon = longitude ?? defaultLongitude;

  console.log(`Showing map at: Latitude ${lat}, Longitude ${lon}`);
  // Assume showMapOnUI(lat, lon) exists and renders map
}

showMap(34.0522, -118.2437); // Shows LA coordinates
showMap(null, null); // Shows NYC coordinates
showMap(undefined, undefined); // Shows NYC coordinates

            

              
                Copy
              
            
          

مزایای استفاده از Nullish Coalescing

• خوانایی بهتر کد: عملگر ?? مختصرتر و گویاتر از عملگر سنتی || است و درک کد شما را آسان‌تر می‌کند.
• مقادیر پیش‌فرض دقیق‌تر: عملگر ?? فقط null و undefined را به عنوان nullish در نظر می‌گیرد و از رفتار غیرمنتظره هنگام کار با سایر مقادیر falsy جلوگیری می‌کند.
• استحکام بیشتر کد: با ارائه مقادیر پیش‌فرض برای مقادیر گمشده یا null، عملگر ?? به جلوگیری از خطاها کمک کرده و پایداری کلی برنامه شما را بهبود می‌بخشد.
• پیکربندی ساده‌تر: عملگر ?? مدیریت اشیاء پیکربندی اختیاری و پرچم‌های ویژگی را آسان‌تر می‌کند.

ملاحظات و بهترین شیوه‌ها

• سازگاری مرورگر: اطمینان حاصل کنید که مرورگرهای هدف شما از عملگر nullish coalescing پشتیبانی می‌کنند. اکثر مرورگرهای مدرن از آن پشتیبانی می‌کنند، اما مرورگرهای قدیمی‌تر ممکن است به ترنسپایل (به عنوان مثال، با استفاده از Babel) نیاز داشته باشند.
• بررسی صریح برای Null: در حالی که عملگر nullish coalescing روش مناسبی برای مدیریت مقادیر پیش‌فرض ارائه می‌دهد، هنوز هم مهم است که در صورت لزوم، به ویژه هنگام کار با ساختارهای داده پیچیده یا APIهای خارجی، بررسی‌های صریح برای null را انجام دهید.
• خوانایی و قابلیت نگهداری: از عملگر nullish coalescing با احتیاط استفاده کنید. از آن به گونه‌ای استفاده نکنید که درک کد شما را دشوارتر کند. به دنبال تعادل بین اختصار و وضوح باشید.
• از زنجیره‌سازی با عملگرهای AND یا OR خودداری کنید: به دلیل اولویت عملگرها، ترکیب مستقیم عملگر nullish coalescing با عملگرهای AND (&&) یا OR (||) بدون پرانتز مجاز نیست. این از سوء استفاده تصادفی جلوگیری می‌کند. به عنوان مثال، (a || b) ?? c معتبر است در حالی که a || b ?? c یک SyntaxError ایجاد می‌کند. همین امر در مورد AND نیز صدق می‌کند: a && b ?? c نامعتبر است و به پرانتز نیاز دارد.

نتیجه‌گیری

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

برای مطالعه بیشتر

• مستندات وب MDN: عملگر nullish coalescing (??)
• وبلاگ V8: JavaScript Nullish Coalescing