پارامترهای پیش فرض جاوا اسکریپت

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

نشانگرها در برابر پارامترها

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

به تابع add() زیر توجه کنید:

function add(x,y) {
   return x + y;
}
 
add(100,200);

در این مثال، x و y پارامترهای تابع هستند و مقداری که به تابع add() منتقل کرده ایم (۱۰۰ و ۲۰۰) نشانگرها هستند.

تنظیمات پارامترهای پیش فرض جاوا اسکریپت برای تابع

در جاوا اسکریپت پارامتر دارای یک مقدار پیش فرض تعریف نشده است. به این معنی که اگر نشانگر را به تابع منتقل نکنید، پارامتر تابع مقدار پیش فرض undefined را خواهد داشت.

مثال زیر را مشاهده کنید:

function foo(bar) {
    console.log(bar);
}
 
foo(); // undefined

تابع foo() پارامتر bar را می گیرد. چون هنگام فراخوانی تابع foo() هیچ نشانگری به تابع انتقال نداده ایم، مقدار نشانگر bar برابر است با undefined.

فرض کنیم می خواهید به پارامتر bar ‌مقدار پیش فرض ۱۰ اختصاص دهید.

یک راه حل معمول برای دستیابی به این موضوع آزمایش مقدار پارامتر و تعیین یک مقدار پیش فرض درصورتی که undefined باشد.

function foo(bar) {
    bar = typeof bar !== 'undefined' ? bar : 10;
    console.log(bar);
}
foo(); // 10

در این مثال، هیچ مقداری برای bar در فراخوانی تابع معین نکرده ایم، بنابراین مقدار آن undefined است. اما در تابع، ما مقدار ۱۰ متغیر bar را تعیین کرده ایم چون مقدارش undefined است، پس دستور ۱۰ را به عنوان خروجی را نشان خواهد داد.

ES6 یک روش راحت تر برای تنظیم مقدار پیش فرض برای پارامترهای یک تابع تعریف کرده است، مانند مثال زیر:

function function_name(param1=value1,param2=value2,..) {
}

همانطور که در دستور بالا به خوبی نشان داده شده، از عملگر (=) و مقدار پیش فرض بعد از نام پارامتر برای تنظیم یک ‌مقدار پیش فرض برای پارامتر استفاده می کنید

مثال زیر را مشاهده کنید:

function foo(bar = 10) {
    console.log(bar);
}
 
foo(); // 10
foo(undefined); // 10
foo(20); //20

روش کار :

۱- در فراخوانی تابع اول، هیچ نشانگری را به تابع foo() انتقال ندادیم. بنابراین پارامتر bar  دارای مقدار پیش فرض ۱۰ است.

۲- در دومین فراخوانی تابع، undefined را به تابع foo() انتقال دادیم، بنابراین پارامتر bar هم دارای مقدار پیش فرض ۱۰ است.

۳- در سومین فراخوانی، مقدار پیش فرض ۲۰ را به تابع foo() انتقال دادیم، بنابراین پارامتر bar عدد ۲۰ را به عنوان مقدار می گیرد.

مثال های بیشتر پارامترهای پیش فرض جاوااسکریپت

برای مشاهده گزینه های بیشتر تنظیمات مقدارهای پیش فرض برای پارامترهای یک تابع مثال های بیشتری را امتحان می کنیم.

انتقال مقدار تعریف نشده

تابع createDiv() در مثال زیر یک عنصر جدید div با طول، عرض و کادر ویژه در سند ایجاد می کند.

function createDiv(height = '100px', width = '100px', border = 'solid 1px red') {
    let div = document.createElement('div');
    div.style.height = height;
    div.style.width = width;
    div.style.border = border;
    document.getElementsByTagName('body')[0].appendChild(div);
    return div;
}

فراخوانی تابع زیر هیچ نشانگری را انتقال نمی دهد، پس تابع createDiv() برای پارامترها از مقدار پیش فرض استفاده می کند.

createDiv();

فرض کنیم می خواهید از مقدار پیش فرض برای پارامترهای طول و عرض استفاده کنید و آن را به یک مقدار برای پارامتر کادر انتقال دهید. در این صورت، لازم است که آن را به مقدار undefined برای طول و عرض منتقل کنید:

createDiv(undefined,undefined,'solid 5px blue');

ارزیابی پارامترهای پیش فرض

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

function put(toy, toyBox = []) {
    toyBox.push(toy);
    return toyBox;
}
 
console.log(put('Toy Car'));
// -> ['Toy Car']
console.log(put('Teddy Bear'));
// -> ['Teddy Bear'], not ['Toy Car','Teddy Bear']

پارامتر می تواند مقدار پیش فرضی که نتیجه یک تابع است را بگیرد.

به مثال زیر توجه کنید:

function date(d = today()) {
    console.log(d);
}
 
function today() {
    return (new Date()).toLocaleDateString("en-US");
}
 
date();

تابع date() یک پارامتر می گیرد که مقدار پیش فرض مقدار تابع today() را بازگردانده. تابع today() اطلاعات امروز را در ساختار رشته بازمی گرداند.

وقتی تابع date()را مشخص می کنیم، تابع today() تا وقتی که تابع date() را فرانخوانده ایم ارزیابی نمی شود.

می توانیم از این ویژگی برای ساخت نشانگرهای الزامی استفاده کنیم‌.

اگر فراخوانی، نشانگر را انتقال ندهد، مانند مثال زیر با خطا روبرو می شویم:

function requiredArg() {
   throw new Error('The argument is required');
}
function add(x = requiredArg(), y = requiredArg()){
   return x + y;
}
 
add(10); // error
add(10,20); // OK

استفاده از پارامترهای دیگر در مقدار پیش فرض

می توانید یک پارامتر مقدار پیش فرض که مانند مثال زیر بازتابی برای پارامترهای پیش فرض دیگر باشد تعیین کنید:

function bar(x = 1, y = a, z = x + y) {
    return x + y + z;
}
 
console.log(bar()); // 4

در تابع bar() مقدار پیش فرض y مقدار پارامتر x است و مقدار پیش فرض پارامتر  z، جمع x و y ، تابع bar() جمع x و y و  z  را باز می گرداند.

 

1 Star2 Stars3 Stars4 Stars5 Stars (3 votes, average: 4٫67 out of 5)
Loading...
counter customizable free hit