درود دوستان! توی قسمت قبل به طور کلی با توابع آشنا شدیم. توی این قسمت میخوایم ورودیها یا به قول معروف پارامترهای توابع رو بررسی کنیم.
توی این قسمت یاد میگیریم که:
ورودی یا پارامتر چیه؟ 🤔
تابع درونی جاوااسکریپت alert رو در نظر بگیرید:
alert("I learn JavaScript 😍");
بین پرانتزهای باز و بسته این تابع، متنی رو نوشتیم. با اجرا شدن این کد، همین متن به ما نمایش داده میشه. این متن، ورودی تابع alert هست.
ورودی یک تابع، اطلاعاتی هست که هنگام صدا زدن تابع، به تابع ارسال میشه. با این ویژگی میتونیم تابع رو شخصیسازی کنیم و کاربردپذیری اون رو افزایش بدیم.
تابع welcome از قسمت قبل رو درنظر بگیرین:
function welcome() { const message = "Welcome to our app, <<Mario>>!"; alert(message); }
پیامی که این تابع نمایش میده فقط برای Mario هست. پس نمیتونه برای اسمهای دیگه استفاده بشه. ما با استفاده از ورودیهای تابع میتونیم کاری کنیم که این تابع برای هر اسم دیگهای مورد استفاده قرار بگیره.
توی قسمت قبل گفتیم که پرانتزهایی که جلوی اسم تابع قرار گرفته، محل قرارگیری ورودیهای تابع هست. ما یک ورودی به اسم name به تابع welcome صورت زیر اضافه میکنیم:
function welcome(<<name>>) { // ...
حالا وقتی که داریم تابع welcome رو فراخونی میکنیم، ورودی name رو باید پاس بدیم. هنگام فراخونی تابع، پاس دادن یک ورودی به صورت زیر هست:
welcome(<<'Emily'>>);
توی این کد، مقدار Emily در نظر گرفته میشه برای وردی name و تابع welcome با این ورودی اجرا میشه. بیاید تابع welcome رو بازنویسی کنیم تا بتونیم از این ورودیها استفاده کنیم:
function welcome(name) { const message = "Welcome to our app, "<< + name>>; alert(message); } welcome('Emily'); welcome('John'); welcome('Mario');
همونطور که میبینیم، ورودی name مثل یک متغیر داخل تابع در دسترس هست. با این روش، برای تابع welcome دیگه مهم نیست چه اسمی نمایش داده میشه و این تابع میتونه برای بینهایت اسم دیگه مورد استفاده قرار بگیره. هنگام فراخونی تابع مثل خطهای ۷ تا ۹ تصمیم میگیریم که چه اسمی رو پاس بدیم.
به ورودیهایی که برای تابع تعریف میکنیم به اصطلاح پارامتر (Parameter) و به مقدارهایی که از بیرون به تابع پاس میدیم، به اصطلاح آرگومان (Argument) گفته میشه.
توابع میتونن ورودیهای بیشتری هم داشته باشن:
function welcome(name, age, degree) { // ... }
همونطور که میبینیم، اسم هر ورودی رو با حرف کاما , جدا کردیم. این تابع ۳ ورودی داره که هنگام فراخونی تابع باید اونها رو به صورت زیر پاس بدیم:
welcome("Emily", 7, "MA"); welcome("John", 4, "BA"); welcome("Mario", 3, "PhD");
توی صدا زدن توابع هم باید ورودیها رو با کاما جدا کنیم. چیزی که اهمیت داره، حفظ ترتیب توی پاس دادن ورودیها هست. توی خط ۳ کد زیر:
function welcome(param1, param2, param3) { } ↑ ↑ ↑ welcome("val1", "val2", "val3");
اولین ورودی (val1) در نظر گرفته میشه برای param1
دومین ورودی در نظر گرفته میشه برای param2
و سومین ورودی در نظر گرفته میشه برای param3
ورودی (پارامتر) های پیشفرض
ورودی یک تابع میتونه هنگام تعریف شدن تابع مقداردهی بشه:
function greeting(name, <<type = "Welcome">>) { alert(type + " " + name); }
توی این کد ورودی دوم (type) یک مقدار پیشفرض داره. اگه هنگام صدا زدن تابع greeting ورودی دوم رو مشخص نکنیم، مقدار Welcome در نظر گرفته میشه برای این پارامتر:
greeting("Mario"); // Welcome Mario
اما با مشخص کردن ورودی type هنگام صدا زدن تابع، مقدار پیشفرض این ورودی نادیده گرفته میشه و مقداری که پاس میدیم در نظر گرفته میشه برای ورودی type:
greeting("Emily", "Goodbye"); // Goodbye Emily
برای مشاهده خروجیها، کد زیر رو اجرا کنین:
function greeting(name, type = "Welcome") { alert(type + " " + name); } greeting("Mario"); // Welcome Mario greeting("Emily", "Goodbye"); // Goodbye Emily
متغیر arugments توی توابع چیه؟
برای درک بهتر لازمه اطلاعاتی از آرایهها و آبجکتهای جاوااسکریپت داشته باشیم که توی قسمتهای بعد مفصل با اونها آشنا میشیم.
arguments یک لیست شامل آرگومانهایی هست که به تابع پاس داده شده:
function w() { alert(arguments[0]); // a alert(arguments[1]); // b alert(arguments[2]); // c } w("a", "b", "c");
استفاده از اون برای زمانی خوبه که میخوایم تابعمون تعداد ورودیهای دلخواهی داشته باشه. به arguments گفته میشه آبجکت شبیه آرایه. این دلیل که شبیه به یک آرایه هست که ایندکس اون از صفر شروع میشه و همچنین شامل پراپرتی length هست. اما متدهایی که یک آرایه داره مثل foreEach و map رو نداره.
خب دوستان با ورودیهای تابع آشنا شدیم و دیدیم که چطوری میتونیم با این ویژگی، توابعی با کارایی بیشتری داشته باشیم. توی قسمت بعدی با موضوع خروجی توابع آشنا میشیم.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions
https://www.w3schools.com/js/js_functions.asp
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Functions
https://dev.to/macmacky/70-javascript-interview-questions-5gfi
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/arguments