پارامتر پیشفرض (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استفاده از عبارت &amp;amp;#x27;use strict&amp;amp;#x27; در جاوااسکریپتکار با توابع یا 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 (&amp;amp;amp;&amp;amp;amp;) و OR (||) در جاوااسکریپتاتصال کوتاه (Short Circuiting) با عملگر منطقی Nullish coalescing (??) در جاوااسکریپتحلقه for ... of در جاوااسکریپتبررسی Enhanced Object literals در جاوااسکریپبررسی Optional Chaining (_.) در جاوااسکریپتبررسی کاربرد Map و Set در جاوااسکریپت (مقدماتی)بررسی کاربرد Map و Set در جاوااسکریپت (پیشرفته)