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

در این مقاله، نحوه مدیریت پارامترهای پیش فرض در جاوا اسکریپت(ES6 ) را خواهید آموخت.

function say(message='Hi') {
    console.log(message);
}

say(); // 'Hi'
say('Hello') // 'Hello'

function say(message='Hi') {

console.log(message);

}

say(); // 'Hi'

say('Hello') // 'Hello'

پارامتر message در تابع ()say مقدار پیش فرض ‘Hi’ را دارا است.

در جاوا اسکریپت، پارامترهای پیش فرض به شما اجازه می دهد تا پارامترهای مشخص شده برای تابع را در صورتی که هیچ value یا undefined به تابع پاس داده شود، را مقداردهی کنید.

← در یک ویدئو هم به طور کامل این مبحث رو بررسی کردیم که اگه علاقه مند بودید میتونید ویدئو “ پارامتر های پیش فرض در جاوا اسکریپت ” رو در کانال یوتیوب مشاهده کنید. برای مشاهده ویدئو در یوتیوب حتما وی *ی انتون روشن باشه.

تفاوت Arguments و Parameters

گاهی اوقات شما از اصطلاح argument و parameter به جای یکدیگر به اشتباه استفاده می کنید.با این حال ، طبق تعریف ، پارامترها (parameters)همان چیزی هستند که شما در هنگام function declaration مشخص می کنید در حالی که آرگومان ها(arguments) همان چیزی هستند که به تابع پاس می دهید.

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

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

add(100,200);

function add(x, y) {

return x + y;

}

add(100,200);

در مثال فوق، x و y پارامترهای تابع ()add هستند و مقادیر پاس داده شده به تابع ()add یعنی 100 و 200 آرگومان های(arguments) این تابع هستند.

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

مقدار پیش فرض یک پارامتر در جاوا اسکریپت undefined است.یعنی اگر شما هیچ arguments را به یک function پاس ندهید به پارامترهای undefined به عنوان value پیش فرض اختصاص داده می شود.

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

function say(message) {
    console.log(message);
}

say(); // undefined

function say(message) {

console.log(message);

}

say(); // undefined

تابع ()say یک پارامتر به نام message می گیرد.به این دلیل که ما هیچ argument به تابع ()say پاس ندادیم،به پارامتر message مقدار undefined اختصاص داده خواهد شد.

فرض کنید می خواهید به پارامتر message مقدار پیش فرض Hi بدهید.یک روش معمول برای دستیابی به این هدف ، تست مقدار پارامتر و تعیین مقدار پیش فرض است با استفاده از عملگر ternary operator است:

function say(message) {
    message = typeof message !== 'undefined' ? message : 'Hi';
    console.log(message);
}
say(); // 'Hi'

function say(message) {

message = typeof message !== 'undefined' ? message : 'Hi';

console.log(message);

}

say(); // 'Hi'

در این مثال ما هیچ value را به تابع ()say پاس ندادیم.بنابراین مقدار پیش فرض message برابر با undefined است.درون تابع ما مجدد Hi را به message اختصاص می دهیم.

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

function fn(param1=default1, param2=default2,..) {
}

1 2	function fn(param1=default1, param2=default2,..) { }

در syntax بالا ما از assignment operator (=) و مقدار پیش فرض بعد از نام پارامتر برای set کردن مقادیر پیش فرض پارامترها استفاده کردیم.برای مثال:

function say(message='Hi') {
    console.log(message);
}

say(); // 'Hi'
say(undefined); // 'Hi'
say('Hello'); // 'Hello'

function say(message='Hi') {

console.log(message);

}

say(); // 'Hi'

say(undefined); // 'Hi'

say('Hello'); // 'Hello'

در اولین فراخوانی تابع ما هیچ argument را به تابع ()say پاس ندادیم، بنابراین پارامتر message مقدار پیش فرض ‘Hi’ را می گیرد.
در دومین فراخوانی تابع ما undefined را به تابع ()say پاس دادیم، از این رو پارامتر message مقدار پیش فرض ‘Hi’ را می گیرد.
در سومین فراخوانی تابع ما رشته ‘Hello’ را به تابع ()say پاس دادیم، از این رو پارامتر message مقدار ‘Hello’ را به عنوان value پیش فرض می گیرد.

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

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

1) Passing undefined arguments

تابع ()createDiv یک <div> جدید را با height, width, و border-style مشخص ایجاد می کند:

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.body.appendChild(div);
    return 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.body.appendChild(div);

return div;

}

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

بهترین فریمورک های UI برای استفاده در 2021

createDiv();

1	createDiv();

فرض کنید می خواهید از مقادیر پیش فرض برای پارامترهای height و width و border-style مشخص استفاده کنید. در این مورد ، باید مقدار undefined را برای دو argument اول در نظر بگیرید:

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

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

2) Evaluating default parameters

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

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 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("fa-IR");
}
date();

function date(d = today()) {

console.log(d);

}

function today() {

return (new Date()).toLocaleDateString("fa-IR");

}

date();

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

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

ما می توانیم از این ویژگی برای اجباری بودن arguments ها استفاده کنیم. اگر در زمان فراخوانی تابع هیچ argument پاس داده نشد ، خطایی را به صورت زیر نمایش می دهیم:

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 requiredArg() {

throw new Error('The argument is required');

}

function add(x = requiredArg(), y = requiredArg()){

return x + y;

}

add(10); // error

add(10,20); // OK

3) Using other parameters in default values

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

function add(x = 1, y = x, z = x + y) {
    return x + y + z;
}

console.log(add()); // 4

function add(x = 1, y = x, z = x + y) {

return x + y + z;

}

console.log(add()); // 4

در تابع ()add :

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

به نظر می رسد لیست پارامترها scope خاص خود را دارد. اگر پارامتری را که هنوز initialized نشده است ارجاع دهید ، خطایی دریافت خواهید کرد. مثلا:

function subtract( x = y, y = 1 ) {
    return x - y;
}
subtract(10);

function subtract( x = y, y = 1 ) {

return x - y;

}

subtract(10);

خطا دریافتی

Uncaught ReferenceError: Cannot access 'y' before initialization

1	Uncaught ReferenceError: Cannot access 'y' before initialization

استفاده از توابع

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

let taxRate = () => 0.1;
let getPrice = function( price, tax = price * taxRate() ) {
    return price + tax;
}

let fullPrice = getPrice(100);
console.log(fullPrice); // 110

let taxRate = () => 0.1;

let getPrice = function( price, tax = price * taxRate() ) {

return price + tax;

}

let fullPrice = getPrice(100);

console.log(fullPrice); // 110

تابع ()getPrice برای گرفتن نرخ مالیات و محاسبه میزان مالیات، تابع ()taxRate را فراخوانی می کند.

The arguments object

مقدار arguments object درون تابع برابر با تعداد arguments های واقعی پاس داده شده به تابع است.برای مثال:

function add(x, y = 1, z = 2) {
    console.log( arguments.length );
    return x + y + z;
}

add(10); // 1
add(10, 20); // 2
add(10, 20, 30); // 3

function add(x, y = 1, z = 2) {

console.log( arguments.length );

return x + y + z;

}

add(10); // 1

add(10, 20); // 2

add(10, 20, 30); // 3

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

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

تفاوت Arguments و Parameters

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

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

1) Passing undefined arguments

2) Evaluating default parameters

3) Using other parameters in default values

استفاده از توابع

The arguments object

مطالب زیر را حتما مطالعه کنید

دیدگاهتان را بنویسید لغو پاسخ

تفاوت Arguments و Parameters

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

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

1) Passing undefined arguments

2) Evaluating default parameters

3) Using other parameters in default values

استفاده از توابع

The arguments object

مطالب زیر را حتما مطالعه کنید

Reflection در جاوا اسکریپت

Proxy در جاوا اسکریپت

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

endsWith در جاوا اسکریپت

startsWith در جاوا اسکریپت

()Object.is در جاوا اسکریپت

دیدگاهتان را بنویسید لغو پاسخ