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

گردآوری و تالیف : ارسطو عباسی
تاریخ انتشار : 30 مهر 1397
دسته بندی ها : جاوا اسکریپت

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

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)

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

منبع

مقالات پیشنهادی

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

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

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

در چند سال اخیر طراحی صفحات فرود یا Landing Page به یک عرصه بسیار مهم در طراحی وبسایت تبدیل شده و تقریبا برای ساخت آن تمام موارد مورد نیاز فراهم شده ا...

چگونه با استفاده از جاوااسکریپت پیش‌نمایش‌های چندگانه ایجاد کنیم؟

در این مطلب آموزشی قصد داریم با استفاده از جاوااسکریپت و رویدادهای ماوس یک چیز جالب و مفید را درست کنیم: قصد داریم تصاویر بندانگشتی را ایجاد کنیم که ب...

چگونه با استفاده از Meteor و Vuejs یک پیشخوان بلادرنگ ایجاد کنیم؟

در این آموزش ما از دو ابزار کاملا متفاوت استفاده می‌کنیم، مطمئنا با ویوجی‌اس آشنایی دارید، اما در کنار ویوجی‌اس می‌خواهیم با Meteor نیز کار کنیم. ما ا...