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

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

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

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

اعلامیه های عملکرد: راه مستقیم

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

function functionName(parameters) {
  // code goes here...
  return "This is a function declaration";
}

اجزای بلوک کد بالا عبارتند از:

کلمه کلیدی تابع: این کلمه کلیدی یک تابع را اعلام می کند.
functionName: این نام تابع است. در عمل، باید تا حد امکان توصیفی و معنادار باشد و نشان دهد که عملکرد چه کاری انجام می دهد.
پارامترها: این نشان دهنده پارامترهای تابع است. پارامترها یک لیست اختیاری از متغیرها هستند که می توانید هنگام فراخوانی یک تابع به آن ارسال کنید.
بدنه تابع: این شامل کدی است که هنگام فراخوانی تابع اجرا می شود. اطراف آن توسط پرانتزهای مجعد {} احاطه شده است و می تواند حاوی هر کد جاوا اسکریپت معتبر باشد.
دستور return: این دستور اجرای یک تابع را متوقف می کند و مقدار مشخص شده را برمی گرداند. در مورد بالا، فراخوانی تابع رشته “This is a function declaration” را برمی گرداند.

برای مثال، اعلان تابع زیر سه عدد را به عنوان پارامتر می گیرد و مجموع آنها را برمی گرداند.

function addThreeNumbers(a, b, c) {
  return a + b + c;
}

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

مطلب مرتبط: چگونه Google Analytics را به وب سایت Next.js اضافه کنیم

مثلا:

addThreeNumbers(1, 2, 3) // 6

بلوک کد بالا توابع addThreeNumber را فراخوانی می کند و 1، 2 و 3 را به عنوان آرگومان به تابع ارسال می کند. اگر این کد را اجرا کنید، مقدار 6 را برمی گرداند.

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

مثلا:

isHoisted(); // Function is hoisted

function isHoisted() {
  console.log("Function is hoisted");
  return true;
}

همانطور که در بلوک کد بالا نشان داده شده است، فراخوانی isHoisted قبل از تعریف آن خطایی ایجاد نمی کند.

عبارات تابع: توابع به عنوان ارزش

در جاوا اسکریپت می توانید یک تابع را به عنوان یک عبارت تعریف کنید. سپس می توانید مقدار تابع را به یک متغیر اختصاص دهید یا از آن به عنوان آرگومان برای تابع دیگری استفاده کنید.

آنها همچنین به عنوان توابع ناشناس شناخته می شوند زیرا هیچ نامی ندارند و شما فقط می توانید آنها را از متغیری که به آنها اختصاص داده اید فراخوانی کنید.

در زیر دستور یک عبارت تابع آمده است:

const functionName = function () {
  return "Function expression";
};

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

مثلا:

functionName(); // Function expression

عبارات تابع هنگام ایجاد توابعی که در سایر توابع اجرا می شوند مفید هستند. نمونه‌های معمولی شامل کنترل‌کننده‌های رویداد و تماس‌های آنهاست.

مثلا:

button.addEventListener("click", function (event) {
  console.log("You clicked a button!");
});

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

مطلب مرتبط: 7 زبان برنامه نویسی که می توانند شما را بیکار کنند

در مورد بالا، زمانی که شنونده رویداد یک رویداد کلیک را دریافت می کند، تابع callback را فراخوانی می کند و شی رویداد را به عنوان آرگومان ارسال می کند.

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

مثلا:

isHoisted(); // ReferenceError: Cannot access 'isHoisted' before initialization

const isHoisted = function () {
  console.log("Function is hoisted");
};

عملکردهای پیکان: فشرده و محدود

ES6 مختصری برای نوشتن توابع ناشناس در جاوا اسکریپت به نام توابع arrow معرفی کرد. آنها یک نحو مختصر دارند که می تواند کد شما را خواناتر کند، به خصوص وقتی با توابع کوتاه و تک خطی سروکار دارید.

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

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

مثلا:

// Single parameter, implicit return
const functionName = parameter => console.log("Single parameter arrow function")

// Multiple parameters, explicit return
const functionName = (parameter_1, parameter_2) => {
  return "Multiple parameter arrow function"
};

وقتی پرانتزهای فرفری را حذف می کنید، تابع فلش به طور ضمنی عبارت واحد را برمی گرداند، بنابراین نیازی به کلمه کلیدی بازگشتی نیست. از سوی دیگر، اگر مهاربندهای فرفری را حذف نکنید، باید به صراحت یک مقدار را با استفاده از کلمه کلیدی بازگشت برگردانید.

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

مطلب مرتبط: چگونه یک عدد آرمسترانگ را پیدا کنیم

مثلا:

const foo = {
  name: "Dave",
  greet: function () {
    setTimeout(() => {
      console.log(`Hello, my name is ${this.name}`);
    }, 1000);
  },
};

foo.greet(); // Logs "Hello, my name is Dave" after 1 second

در مثال بالا، تابع فلش داخل متد greet به this.name دسترسی دارد، حتی اگر تابع setTimeout آن را فراخوانی کند. یک تابع عادی این را به شی سراسری محدود می کند.

عبارات تابع فوری فراخوانی شده (IIFE)

همانطور که از نام آن پیداست، یک تابع فوری فراخوانی شده (IIFE) تابعی است که به محض تعریف اجرا می شود.

در اینجا ساختار یک IIFE آمده است:

(function () {
  // code here
})();

(() => {
  // code here
})();

(function (param_1, param_2) {
  console.log(param_1 * param_2);
})(2, 3);

یک IIFE شامل یک عبارت تابعی است که درون یک جفت پرانتز پیچیده شده است. آن را با یک جفت پرانتز در خارج از محفظه دنبال کنید تا تابع را فراخوانی کنید.

شما می توانید از IIFE برای ایجاد محدوده، مخفی کردن جزئیات پیاده سازی و به اشتراک گذاری داده ها بین چندین اسکریپت استفاده کنید. آنها زمانی به عنوان یک سیستم ماژول در جاوا اسکریپت استفاده می شدند.

ایجاد یک تابع به روش های مختلف

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

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

Tags: برنامه نويسی جاوا اسکریپت