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


در این مقاله، نحوه مدیریت پارامترهای پیش فرض در جاوا اسکریپت(ES6 ) را خواهید آموخت.
1 2 3 4 5 6 |
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 در مثال زیر توجه کنید
1 2 3 4 5 |
function add(x, y) { return x + y; } add(100,200); |
در مثال فوق، x و y پارامترهای تابع ()add هستند و مقادیر پاس داده شده به تابع ()add یعنی 100 و 200 آرگومان های(arguments) این تابع هستند.
مشخص کردن پارامترهای پیش فرض جاوا اسکریپت برای یک تابع
مقدار پیش فرض یک پارامتر در جاوا اسکریپت undefined است.یعنی اگر شما هیچ arguments را به یک function پاس ندهید به پارامترهای undefined به عنوان value پیش فرض اختصاص داده می شود.
به مثال زیر توجه کنید
1 2 3 4 5 |
function say(message) { console.log(message); } say(); // undefined |
تابع ()say یک پارامتر به نام message می گیرد.به این دلیل که ما هیچ argument به تابع ()say پاس ندادیم،به پارامتر message
مقدار undefined اختصاص داده خواهد شد.
فرض کنید می خواهید به پارامتر message مقدار پیش فرض Hi بدهید.یک روش معمول برای دستیابی به این هدف ، تست مقدار پارامتر و تعیین مقدار پیش فرض است با استفاده از عملگر ternary operator است:
1 2 3 4 5 |
function say(message) { message = typeof message !== 'undefined' ? message : 'Hi'; console.log(message); } say(); // 'Hi' |
در این مثال ما هیچ value را به تابع ()say پاس ندادیم.بنابراین مقدار پیش فرض message برابر با undefined است.درون تابع ما مجدد Hi
را به message
اختصاص می دهیم.
ES6 یک روش راحت تر برای set کردن مقادیر پیش فرض پارامترهای توابع مشابه زیر فراهم کرده است:
1 2 |
function fn(param1=default1, param2=default2,..) { } |
در syntax بالا ما از assignment operator (=
) و مقدار پیش فرض بعد از نام پارامتر برای set کردن مقادیر پیش فرض پارامترها استفاده کردیم.برای مثال:
1 2 3 4 5 6 7 |
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 مشخص ایجاد می کند:
1 2 3 4 5 6 7 8 |
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 فراخوانی می کنیم،بنابراین این تابع از مقادیر پیش فرض پارامتر های خود استفاده می کند:
1 |
createDiv(); |
فرض کنید می خواهید از مقادیر پیش فرض برای پارامترهای height و width و border-style مشخص استفاده کنید. در این مورد ، باید مقدار undefined
را برای دو argument اول در نظر بگیرید:
1 |
createDiv(undefined,undefined,'solid 5px blue'); |
2) Evaluating default parameters
موتور جاوا اسکریپت آرگومان های پیش فرض را در زمان فراخوانی تابع evaluates می کند. مثال زیر را ببینید:
1 2 3 4 5 6 7 8 9 |
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'] |
مقدار پیش فرض یک پارامتر می توانید نتیجه یک تابع باشد.به مثال زیر توجه کنید:
1 2 3 4 5 6 7 |
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 پاس داده نشد ، خطایی را به صورت زیر نمایش می دهیم:
1 2 3 4 5 6 7 8 9 |
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
شما می توانید مقدار پیش قرض یک پارامتر را برابر با مقدار دیگر پارامترها مشابه مثال زیر قرار دهید:
1 2 3 4 5 |
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 نشده است ارجاع دهید ، خطایی دریافت خواهید کرد. مثلا:
1 2 3 4 |
function subtract( x = y, y = 1 ) { return x - y; } subtract(10); |
خطا دریافتی
1 |
Uncaught ReferenceError: Cannot access 'y' before initialization |
استفاده از توابع
شما می توانید از مقدار برگشتی یک تابع به عنوان مقدار پیش فرض یک پارامتر استفاده کنید.برای مثال :
1 2 3 4 5 6 7 |
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 های واقعی پاس داده شده به تابع است.برای مثال:
1 2 3 4 5 6 7 8 |
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 رو ثبت نام کنید.
دیدگاهتان را بنویسید