توابع | آموزش جاوااسکریپت به زبان ساده

سلام دوستان! می‌خوایم با یک ویژگی به اسم تابع یا Function آشنا بشیم. توابع یکی از پرکاربردترین ویژگی‌های هر زبان هست و تا همین جای آموزش کلی از توابع استفاده کردیم. برای مثال تابعی مثل alert:

alert("I am learning JS 💪");
// Click ►

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

توی این قسمت موارد زیر رو یاد می‌گیریم:

• تابع (Function) چیه؟
• چطوری یک تابع بسازیم؟
• چطوری از تابع استفاده کنیم؟
• اعضای درون تابع

تابع (Function) چیه؟ 🤔

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

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

مثلاً یک برنامه فروشگاهی داریم و می‌خوایم قیمت یک محصول رو با ۳۰٪ تخفیف بدست بیاریم. کدی داریم به صورت زیر:

const price = 1500;
const discountPrice = price - (price * 30 / 100);

کدی که توی خط ۲ نوشتیم برای محاسبه قیمت محصول با تخفیف هست. ما توی یک برنامه فروشگاهی معمولاً جاهای زیادی قیمت تخفیفی یک محصول رو نمایش می‌دیم. اگه بخوایم هر جایی از برنامه چنین کدی بنویسیم تا تخفیف رو محاسبه کنیم، به دلیل نوشتن کدهای تکراری، حجم کدهای ما بالا میره و توسعه برنامه سخت میشه. یک راه بهتر اینه که ما عملیاتِ محاسبه تخفیف رو فقط یک‌بار بنویسیم و هر جایی از برنامه از اون استفاده کنیم. برای این کار توابع به کار ما میان 👌

چطوری یک تابع بسازیم؟

تابعی مثل alert یک تابع درونی جاوااسکریپت هست که از قبل ساخته شده و ما فقط از اون استفاده می‌کنیم. اما این امکان وجود داره که ما توابع دلخواه خودمون رو بسازیم!

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

function welcome() { }

خب اولین تابعمون رو ساختیم 👋

توی این کد:

1. ابتدا از کلمه‌کلیدی function استفاده کردیم تا به جاوااسکریپت بگیم می‌خوایم یک تابع بسازیم
2. جلوی کلمه‌کلیدی function اسم دلخواهمون رو می‌نویسیم. ما اینجا از welcome استفاده کردیم
3. بعد از اسم تابع، یک جفت پرانتز باز و بسته نوشتیم. بین پرانتزها ورودی‌های تابع قرار می‌گیره که توی ادامه با اونها آشنا می‌شیم
4. نهایتاً قسمت بدنه تابع هست. کاری که قراره تابع انجام بده رو بین براکت‌ها { } می‌نویسیم. به این قسمت می‌گیم بدنهٔ تابع

چطوری از توابع استفاده کنیم؟

وقتی می‌خوایم از یک تابع استفاده کنیم، باید اون رو به اصطلاح صدا بزنیم و یا فراخوانی و Call کنیم. برای فراخونی یک تابع، کافیه اسم تابع رو به صورت زیر صدا بزنیم:

welcome();

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

function welcome() {
  const message = "Welcome to our app, Mario!";

  alert(message);
}

welcome();
welcome();
welcome();
welcome();

ما بعد از نوشتن تابع welcome، اون رو ۴ بار صدا زدیم. روی دکمه ► کلیک کنین تا خروجی این کد رو ببینین. همونطور که می‌بینیم، متنی که توی خط ۲ برای آقای Mario نوشتیم ۴ بار برای ما نمایش داده میشه. این یعنی ما تونستیم از کدی که اون رو یک‌بار نوشتیم ۴ بار استفاده کنیم 👌

نکته‌ای که باید درنظر داشته باشیم اینه که اگه تابع رو بدون پرانتزها فراخونی کنیم، تابع اجرا نمیشه:

function welcome() {
  const message = "Welcome to our app, Mario!";

  alert(message);
}

>> welcome; // Nothing happens

اعضای درون تابع

همونطور که دیدیم می‌تونیم توی توابع کدهامون رو بنویسیم. توی یک تابع می‌تونیم متغیر و همچنین توابع داشته باشیم:

function welcome() {
  const message = "...";

  function inner() {
    // ...
  }
}

توی کد بالا، یک متغیر به اسم message و یک تابع داخلی به اسم inner داریم. نکته‌ای که باید در نظر داشته باشیم اینه که این اعضا فقط داخل تابع welcome قابل دسترسی هستن و از بیرون از تابع نمی‌تونیم به اونها دسترسی داشته باشیم:

function welcome() {
  const message = "...";

  function inner() {
    // ...
  }
}

alert(message); // ReferenceError: message is not defined

با اجرای این کد خطا می‌گیریم که متغیر message تعریف نشده. توی قسمت حوزه‌ها (Scopes) با جزییات بیشتری از این موضوع آشنا می‌شیم.

خب دوستان این هم از این قسمت. اینجا به طور کلی با توابع آشنا شدیم و دیدیم که چطوری یک تابع رو تعریف و از اون استفاده کنیم. توی قسمت بعدی می‌خوایم ورودی‌های توابع رو بررسی کنیم 😉✌️