توابع - قسمت 4 | مفهوم Function Expression

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

• Function Expression چیه؟
• Function Expression چه کاربردهایی داره؟

Function Expression چیه؟ 🤔

Function Expression یک روش دیگه برای داشتن توابع توی جاوااسکریپت هست:

// Function Expression
const welcome = function () {
  // ...
};

همونطور که می‌بینیم، تابعی ساختیم که بدون اسم هست و اون رو به یک متغیر نسبت دادیم. به توابعی که بدون اسم ساخته میشن به طوری که بتونیم اونها رو به یک متغیر نسبت بدیم و یا به عنوان ورودی یا خروجی یک تابع دیگه در نظر بگیریم می‌گیم Function Expression.

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

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

welcome();

این توابع، مثل توابع عادی می‌تونن به همون صورت ورودی و خروجی داشته باشن:

const welcome = function (name) {
  return `Welcome to our app, ` + name;
};

alert(welcome("Emily"));

نکته‌ای که باید در نظر داشته باشیم اینه که welcome یک تابع نیست، بلکه متغیری هست که مقدار اون یک تابع هست.

// Function Declaration
function welcome() {
  // ...
}

نکته: خوندن ادامه مطلب اختیاری هست و اگه هنوز اطلاعاتی از مفاهیمی مثل Hoisting و Scope جاوااسکریپت ندارین، می‌تونین بعد از آشنایی با این مفاهیم (که توی قسمت‌های بعد مفصل با اونها آشنا می‌شیم) برگردین و ادامه رو بخونین 😉

Function Expression چه کاربردهایی داره؟

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

۱. زمانی که می‌خوایم یک تابع موقت داشته باشیم

خیلی وقت‌ها لازمه توابعی داشته باشیم که نمی‌خوایم به صورت دائمی و همچنین سرتاسر برنامه در دسترس باشن. توی این مواقع بهتره که از Function Expression استفاده کنیم:

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

الان متغیر add علاوه بر اینکه محصور به حوزه خودش هست، به دلیل خاصیت Hoisting و اسکوپ‌ها، قابل دسترس از بیرون از اسکوپ خودش نیست و همچنین قبل از تعریف نمی‌تونه مورد استفاده قرار بگیره.

۲. تابعی که بلافاصله بعد از تعریف اجرا بشه

به این توابع گفته میشه IIFE که با اونها می‌تونین از این پست آشنا بشین. این توابع ساختاری به صورت زیر دارن:

(function () {
  alert('I learn JS 😃');
})();

اصلی‌ترین کاربرد اونها پیاده‌سازی مفهوم Encapsulation با استفاده از اسکوپ‌ها هست.

۳. توابع کال‌بک یا Callback Functions

توابع کال‌بک هم نوعی از Function Expression هستن. به تابعی که به یک تابع دیگه پاس داده میشه و داخل همون تابع اجرا میشه می‌گیم Callback function:

setTimeout(function () {
  alert("Hello after 2sec!");
}, 2000);

توی کد بالا، آرگومان اول تابع setTimeout یک Callback function هست. تابع setTimeout این تابع رو بعد از ۲۰۰۰ میلی‌ثانیه (۲ ثانیه) اجرا می‌کنه. اگه روی دکمه ► بزنیم، پیام بعد از ۲ ثانیه به ما نمایش داده میشه.

توی کدهای بالا اگه نمی‌خواستیم از قابلیت Function Expression استفاده کنیم، باید کدهامون رو به این صورت می‌نوشتیم:

function sayHello() {
  alert("Hello after 2sec!");
}

setTimeout(sayHello, 2000);

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

خب دوستان با Function Expression و کاربرد اونها در مقایسه با توابع معمولی آشنا شدیم. باید بدونیم که Function Expression هم یک تابع معمولی هست که توی قسمت‌های قبلی با اونها آشنا شدیم، با این تفاوت که فقط با یک روش دیگه تعریف میشه. ما نوع دیگه‌ای از توابع داریم به اسم Arrow Functions که یک ساختار کاملاً جدید برای داشتن تابع توی جاوااسکریپت هست که توی قسمت بعد با اونها آشنا می‌شیم. روزتون خوش 😉✌️