چگونه کد خود را با استفاده از عملگر گسترش، ساده‌سازی کنیم؟

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

const transformSomeData = ({

  fulfillmentStatus,

  foo,

  bar,

  message,

}) => ({

  someGenericStuff: buildGenericStuff(fulfillmentStatus),

  foo: foo === 'just a' ? 'contrived' : 'example',

  bar,

  message,

})

و برگرداندن bar: parseBar(bar) وقتی که bar منتقل می‌شود، وجود دارد یا خیر؟ اما به گونه‌ای از برگرداندن bar به عنوان undefined‌ وقتی که bar‌ منتقل نشده است، جلوگیری کنیم؛ زیرا در برخی موارد استفاده از این کد، bar را منتقل نمی‌کند. همکار من به دنبال این بود که دقیقا همین کار را انجام دهد، به گونه‌ای که نیاز به هیچ گونه بازسازی نداشته باشد.

پس از کمی وارد شدن به کنسول JavaScript، پی بردم که انجام این کار ممکن است:

const transformSomeData = ({

  fulfillmentStatus,

  foo,

  bar,

  message,

}) => ({

  someGenericStuff: buildGenericStuff(fulfillmentStatus),

  foo: foo === 'just a' ? 'contrived' : 'example',

  ...(bar && { bar: parseBar(bar) }),

  message,

})

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

const bar = 'some value'

const parseBar = bar => bar.toUpperCase()

const a = { 

  foo: 'asdf',

  ...(bar && { bar: parseBar(bar) }),

  baz: 123,

}


a // { foo: "asdf", bar: "SOME VALUE", baz: 123 }

این کار، به علت دو چیز ممکن است. اول این که با این که عملگر گسترش در هر جایی به عنوان یک token (نشانه) بروز نمی‌دهد، اما می‌تواند به هر نوع داده‌ای در کل زبان اعمال شود.

اکثر مردم می‌دانند که Object، Array، Set و موارد مشابه قابل تکرار هستند. این که تمام انواع اولیه هم operandهای معتبر عملگر گسترش هستند، ما را قادر می‌سازد تا عملا هر عبارتی را گسترش دهیم؛ زیرا تمام عبارات پس از اجرا شدن، در قبال برخی مقادیر ارزیابی خواهند شد.

اگر حرف من را باور نمی‌کنید، این کد را در کنسول اجرا کنید:

{ ...null }

{ ...undefined }

{ ...true }

{ ...false }

{ ...123 }

{ ...'' }

{ ...Symbol() }

دومین چیز که ما را کمک می‌کند هم این است که گسترش دادن یک مقدار خالی، به یک موقعیت بدون operand ختم می‌شود.

دو مثال ساده از این که این میان‌بر JavaScript ممکن است استفاده شود:

• عبارت Gurad (مانند JSX و همچنین موردی که از آن برای رفع مشکل اصلی که در این پست به آن اشاره شد، استفاده کردیم): …(foo && parseFoo(foo))
• عبارت پیشفرض (Default): …(someValue || someDefault)

یک راه عمومی برای ارجاع به این موارد می‌توانند «عملگر گسترش» باشد. گرچه، به نظر من این عملگر بهتر است که یک پیشنهاد باشد تا یک اجبار. با این تفکر پیش بروید که می‌توانید تمام عبارات را گسترش دهید. (به عبارتی می‌توانید در همه جا از عملگر گسترش استفاده کنید)

منبع