کار با توابع یا Functions در جاوااسکریپت

خب اصلا تابع چیه؟ و به چه درد میخوره؟ ببینید دوستان بطور کلی به مجموعه ای از کدها در کنار هم، که قراره یه کار خاصی رو انجام بدن میگیم تابع .

خب حالا به چه درد می‌خوره؟ از مهمترین مزایای تابع نویسی می‌تونیم به بالارفتن سرعت و خوانایی برنامه ، جلوگیری از اجرای کدهای تکراری و در نهایت داشتن کدنویسی تمیز اشاره کرد.

بفرض مثال من می‌خوام چندین متغیر رو باهمدیگه جمع کنم، خب در حالت عادی و بدون استفاده از تابع میایم مثلا چنتا متغیر با مقدار مشخص تعریف می‌کنیم و بعدش متغیرهارو با همدیگه جمع می‌کنیم. ( چیزی شبیه به دستورات زیر )

let a = 5;
let b = 5; 
let c = 7; 
let d = 7; 

console.log(a + b); 
console.log(c + d);

خب حالا فکرشو کنید شاید بخوایم ۱۰۰۰ تا عدد رو باهم جمع کنیم خب اونوقت باید چکار کرد، می‌تونیم همانند دستورات بالا عمل کنیم ولی خب میدونید چقد حجم برناممون میره بالا...

اینجاست که تابع بدردمون میخوره و میتونه از استفاده تکراری ( همینکه بخوایم تعداد زیادی متغیر تعریف و مقدار بدیم بهشون ) دستورات جلوگیری کنه در نتیجه سرعت اجرای برناممون رو بالا ببره.

نحوه تعریف تابع در جاوااسکریپت

برای ایجاد یا تعریف یک تابع در جاوااسکریپت ما باید از کلمه کلیدی function استفاده نماییم بعدش نام تابع مون رو مشخص کنیم و در نهایت یه پرانتز باز و بسته ایجاد کنیم.

که توی این پرانتز هم اگه بخوایم می‌تونیم پارامترهای دلخواه‌مون رو برای تابع مشخص و یا تعریف نماییم، و در نهایت باید براکت } باز و براکت { بسته رو بنویسیم.

در آخرم هرچی داخل این براکت { } نوشته شه میشه تابع ما که قرار اجرا بشه، شکل کلی یه تابع رو می‌تونیم بصورت زیر نمایش دهیم :

function Name ( Parameter1 , Parameter2 , Parameter3 , ... ) {
// code 
}

تعریف تابع بدون پارامتر

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

مثال : تعریف یک تابع بدون پارامتر

function test(){
console.log(&quotسلام خوبی؟&quot);
}

متغیرهای محلی یا Local Variables در توابع

متغیرهایی که درون یک تابع تعریف می‌شوند بصورت محلی یا لوکال یا Local هستند، یعنی اون متغیرها فقط درون همون تابع قابل دسترسی هستند، یعنی بیرون از تابع به اون متغیرها نمیشه دسترسی داشت؛ همین تموم شد رفت.

let myname=&quotSadegh&quot // این میشه متغیر سراسری

// این یک تابع هست
function test(){
let mysite=&quotFree-Learn &quot // این میشه متغیر محلی
console.log(mysite);
console.log(myname);
}

// چون متغیر مای سایت درون تابع می باشد پس اینجا قابل دسترسی نیست
console.log(mysite);

نحوه فراخوانی یا اجرای یک تابع

خب ما مثلا در مثال های قبلی تابع نوشتیم، حال باید چجوری این تابع رو اجراش کنیم؟ یعنی برای اجرا یا فراخوانی یا صدازدن یه تابع باید چکار کنیم؟

چندین روش برای اجرا ( فراخوانی یا صدا زدن یا Call ) یه تابع وجود داره :

• استفاده از تابع در رویدادهای عمومی HTML ( مثلا وقتی بروی یه دکمه کلیک شد )
• فراخوانی یا اجرای تابع بصورت مستقیم در دستورات جاوااسکریپت

مثال شماره ۱ : فراخوانی تابع در رویدادهای عمومی HTML ( یعنی می‌خوایم وقتی بروی یه دکمه کلیک شد تابع اجرا بشه )

<button =&quottest();&quot>کلیک کنید</button>



function test(){
 (&quotسلام خوبی؟&quot);
}

مثال شماره ۲ : فراخوانی تابع بصورت مستقیم در خوده دستورات جاوااسکریپت ( تو این حالت دیگه لازم نیست حتما بروی چیزی کلیک شه، بلکه با لود شدن صفحه تابع هم درجا اجرا میشه )

function test(){
console.log(&quotسلام خوبی؟&quot);
}
test();

پارامتر ها و آرگومان ها در توابع

بنظره شما پارامتر یا Parameter و آرگومنت ( یا خودمونی آرگومان ) یا Argument در توابع به چه چیزهایی گفته میشه؟ یعنی بطور کلی می‌خوایم ببینیم پارامترها و آرگومان ها چی هستند!؟

خب بطور کلی به اون چیزی که درون پرانتز تابع تعریف می‌شود و می‌تونه عملی ( کاری ) رو انجام بده میگیم پارامتر و به مقداری که باید برای همین پارامتر وارد می‌شود میگیم آرگومان.

function test( Parameter1 , Parameter2 ){
// ....
}

test( Argument1 , Argument2 );

مثال : تابعی که ۲ عدد می‌گیرد و آنها را با هم جمع می‌کند.

function sum(Number1 , Number2){
let result = Number1 + Number2;
console.log(result);
}

sum(4,6);

توضیح مثال بالا :

خب ما در خط 1 یه تابع با نام sum و با ۲ پارامتر با نام های Number1 و Number2 تعریف کردیم. بعدش داخل تابع عملیات مورد نظرمون رو وارد کردیم.( یعنی گفتیم ۲ پارامتر با هم جمع بشن و نتیجش داخل متغیر result ریخته شه و در نهایت گفتیم مقدار result رو در خروجی چاپ کنه )

و در آخر در خط 6 اومدیم تابع رو صدا زدیم ( یا فراخوانی کردیم ) و ۲ آرگومان ( برای همون ۲ پارامتر Number1 و Number2 ) بهش دادیم.

تموم شد رفت به این میگن تابع تعریف کردن ، حالا شما بجای اون ۲ عدد، هر عددی دوس داری وارد کن، در هر صورت تابع اون ۲ عدد رو با هم جمع می‌کنه و در خروجی نمایشش میده.

کلمه کلیدی Return در توابع

یه کلمه کلیدی بنام Return ( به فارسی یعنی بازگشت/ برگشتی ) داریم که می‌تونه یه مقدار رو در تابع به خروجی برگشت بده ، یعنی بطور کلی میگه آقا تو این فلان مقدار رو به خروجی برای نمایش بده.

فرض می‌کنیم تابعی داریم برای محاسبه حاصل جمع ۲ عدد ( یعنی دقیقا همون مثالی که کمی بالاتر دیدیم )، خب در حالت عادی ما باید تابع رو تعریف کنیم بعدش حاصل جمع رو درون یه متغیر نگهداری و در نهایت اونو در خروجی چاپ کنیم. ( یعنی بصورت زیر میشه )

function sum(Number1 , Number2){
let result = Number1 + Number2;
console.log(result);
}

ولی اگه بخوایم از کلمه کلیدی Return استفاده کنیم، دیگه نیاز نیست حتما بیایم و حاصل جمع رو بزاریم داخل یه متغیر، بلکه خیلی راحتتر و سریع نتیجه رو به خروجی می‌فرستیم.

مثال شماره ۱ : بازگشت دادن ۲ پارامتر به خروجی برای محاسبه حاصل جمع

function sum(Number1 , Number2){
return Number1 + Number2;
}
console.log( sum(4,6) );

مثال شماره ۲ : بازگشت دادن یه تابع درون تابع دیگر با استفاده از کلمه کلیدی Return

function t1(Number1){

    function t2(Number2){
        return Number1 + Number2;
    }

    return t2;
}

let result = t1(5); // عدد اول
let b = result(3); // عدد دوم که با عدد اول جمع میشه
let c = result(5); // عدد های بیشتر که با عدد اول جمع میشه
let d = result(4); // عدد های بیشتر که با عدد اول جمع میشه

console.log(b);
console.log(c);
console.log(d);

توضیح مثال بالا :

خب ما در خط 1 یه تابع با نام t1 و پارامتر Number1 ، بعدش داخل همین تابع یه تابع دیگه بنام t2 و پارامتر Number2 تعریف کردیم.

بعد در خط 4 اومدیم گفتیم بازگشت بده حاصل جمع Number1 و Number2 رو ، و در نهایت در خارج از تابع t2 و در داخل تابع t1 ، گفتیم که تابع t2 رو بازگشت بده به خروجی ( یعنی میشه نتیجه حاصل جمع )

در نهایت در خط 10 یه متغیر بنام result تعریف کردیم و مقدار پارامتر تابع t1 رو بهش دادیم ( یعنی این میشه عدد اول ) و در ادامه یسری متغیر دیگه تعریف کردیم که هر کدوم میتونن با عدد اول جمع بشن ( یعنی اعداد بیشتر برای جمع کردن با اون عدد اول )

تعریف تابع در درون متغیر

ما می‌تونیم در جاوااسکریپت تابع رو در درون یک متغیر نیز تعریف کنیم، یعنی در واقع مثه اینه که تابع رو بریزیم تو یه متغیر و بعد دیگه می‌تونیم همون متغیر رو فراخوانی و در خروجی نشونش بدیم.

مثال شماره ۱ : تعریف یک تابع بدون نام ( چون می‌خوایم بریزیمش تو متغیر پس می‌تونه نام نداشته باشه )

let test = function (Number1 , Number2){
let result = Number1 + Number2;
(result);
}

test(4,6);

توضیح مثال بالا :

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

نحوه تعریف توابع تودرتو در جاوااسکریپت

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

مثال شماره ۱ : ایجاد یک تابع در درون یه تابع دیگه

function ShowMessage(name , family){  

    function show(){ 
        (name + family);
    }  

    return show(); 
}  

ShowMessage(&quotHossein&quot , &quotShahmohammadi&quot);

توضیح مثال بالا :

خب ما در خط 1 تابعی با نام ShowMessage تعریف کردیم با ۲ پارامتر name و family

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

منبع : free-learn