پارامتر پیشفرض (default parameter) در جاوااسکریپت


کد زیر را در نظر بگیرید:

function getCandy(kind, size, upperKind, callback) {
  if (!kind) {
    requiredParam('kind')
  }
  if (!size) {
   requiredParam('size')
  }
  upperKind = upperKind || kind.toUpperCase()
  callback = callback || function noop() {}
  const result = {kind, size, upperKind}
  callback(result)
  return result
}
function requiredParam(argName) {
  throw new Error(`${argName} is required`)
}

این کد کاملا ساده است، اما برخی باگ‌های احتمالی و boilerplateهای آزار دهنده در آن وجود دارند. خوشبختانه، ES6 سینتکس جدیدی به نام پارامترهای پیشفرض در JavaScript معرفی کرده است که می‌توانید برای ساده‌سازی کد از آن استفاده کنیم. بیایید ببینیم که نوشتن کد بالا به همراه این ویژگی چگونه خواهد بود.

function getCandy( 
  kind = requiredParam('kind'),
  size = requiredParam('size'),
  upperKind = kind.toUpperCase(),
  callback = function noop() {},
 ) {
  const result = {kind, size, upperKind}
  callback(result)
  return result
}
function requiredParam(argName) {
  throw new Error(`${argName} is required`)
}

دقت کنید که ما می‌توانیم هر عبارت را بگیریم و آن را در سمت راست علامت مساوی قرار دهیم. اگر این پارامتر تعریف نشده (undefined) باشد، عبارت سمت راست ارزیابی می‌شود. این ما را قادر می‌سازد تا فقط وقتی که kind و size برابر با undefined هستند، تابع requireParam را فراخوانی کنیم. همچنین ما قادر به استفاده از مقدار یک پارامتر در عبارت خود، به مانند کاری که در پارامتر پیشفرض برای upperKind کرده‌ایم، هستیم.

به علاوه، همین عمل را نیز، می‌توان برای تخریب آبجکت (چه به عنوان یک پارامتر، یا غیر پارامتر) استفاده کرد. برای مثال، اگر آرگومان‌های یک آبجکت تنظیمات را تغییر دهیم، باید به این گونه عمل کنیم:

function getCandy(options = {}) {
  const {
    kind = requiredParam('kind'),
    size = requiredParam('size'),
    upperKind = kind.toUpperCase(),
    callback = function noop() {},
  } = options
  // etc...
}

یا اگر می‌خواهیم آبجکت تنظیمات را مستقیما در لیست پارامتر تخریب کنیم، باید به این گونه عمل کنیم:

function getCandy({
  kind = requiredParam('kind'),
  size = requiredParam('size'),
  upperKind = kind.toUpperCase(),
  callback = function noop() {},
} = {}) {
  // etc...
}


نتیجه گیری

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


منبع:

kentcdodds



همچنین بخوانید:

اسکوپ (scope) در جاوااسکریپت چیست؟

هویستینگ (Hoisting) در جاوااسکریپت چیست؟

بررسی (let - var - const) در جاوااسکریپت

تفاوت دو مساوی (==) و سه مساوی (===) در جاوااسکریپت

بررسی متدهای تعامل با کاربر در جاوااسکریپت : alert , prompt, confirm

استفاده از عبارت 'use strict' در جاوااسکریپت

کار با توابع یا Functions در جاوااسکریپت

مقایسه توابع Declarations و Expressions در جاوااسکریپت

بررسی Callback Function در جاوااسکریپت

تفاوت عملگرهای Spread و Rest در جاوااسکریپت

پارامتر پیشفرض(Default Parameter) در جاوااسکریپت

بررسی arguments در توابع جاوااسکریپت

بررسی پروتوتایپ (Prototype) در جاوااسکریپت

بررسی Arrow Functions در جاوااسکریپت

بررسی Functions Calling Other Functions در جاوااسکریپت

بررسی آرایه (Array) در جاوااسکریپت

بررسی اشیاء یا آبجکت (objects) در جاوااسکریپت

بررسی حلقه‌ها (Loops) در جاوااسکریپت

بررسی انتخابگرها (Selectors) در جاوااسکریپت

بررسی innerHTML در جاوااسکریپت

بررسی DOM در جاوااسکریپت، آموزش متد querySelector

بررسی نحوه عملکرد جاوا اسکریپت در پشت صحنه

بررسی مفهوم Execution Context در جاوااسکریپت - پشت‌ پرده جاوااسکریپت (بخش اول)

بررسی مفهوم Execution Context در جاوااسکریپت - پشت‌ پرده جاوااسکریپت (بخش دوم)

تعریف API (Application Programming Interface) به زبان ساده!

دِستراکچرینگ (Destructuring) در جاوااسکریپت یعنی چه؟

بررسی عملگر (...) Spread در جاوااسکریپت

بررسی پارامترهای Rest در جاوااسکریپت

اتصال کوتاه (Short Circuiting) با عملگرهای منطقی AND (&&) و OR (||) در جاوااسکریپت

اتصال کوتاه (Short Circuiting) با عملگر منطقی Nullish coalescing (??) در جاوااسکریپت

حلقه for ... of در جاوااسکریپت

بررسی Enhanced Object literals در جاوااسکریپ

بررسی Optional Chaining (_.) در جاوااسکریپت

بررسی کاربرد Map و Set در جاوااسکریپت (مقدماتی)

بررسی کاربرد Map و Set در جاوااسکریپت (پیشرفته)