زمان استفاده از یک عبارت تابع در مقابل تابع اعلانی

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

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

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

function funcDeclaration() {
    return 'A function declaration';
}

let funcExpression = function () {
    return 'A function expression';
}

توابع اعلانی چیست؟

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

function myFunction() {
  // do something
};

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

در اینجا یک مثال از یک توابع اعلانی آورده شده است:

function add (a, b) {
  return a + b;
};

عبارات تابع چیست؟

عبارات تابع زمانی هستند که شما یک تابع ایجاد می کنید و آن را به یک متغیر اختصاص می دهید. تابع ناشناس است، به این معنی که نامی ندارد. مثلا:

let myFunction = function() {
  // do something
};

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

در اینجا یک مثال از یک عبارت تابع است:

let add = function (a, b) {
  return a + b;
};

تفاوت بین عبارات تابع و اعلان ها

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

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

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

مشابه دستور let، توابع اعلانی در بالای کدهای دیگر قرار می‌گیرند.

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

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

نحوه انتخاب بین عبارات و اعلان ها

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

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

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

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

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

مزایای توابع اعلانی

چند مزیت کلیدی برای استفاده از توابع اعلانی وجود دارد.

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

مزایای عبارات تابع

عبارات تابع نیز چند مزیت دارند.

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

چه زمانی یک توابع اعلانی در مقابل عبارت تابع انتخاب کنیم؟

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

از یک توابع اعلانی زمانی استفاده کنید که:

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

وقتی از یک عبارت تابع استفاده می کنید:

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

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

باز کردن قفل عبارت تابع: تفاوت های بالا بردن جاوا اسکریپت

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

• کلاسور شدن Closures
• آرگومان هایی برای توابع دیگر
• عبارات تابع فوری فراخوانی شده (IIFE)

ایجاد Closures با عبارات تابع

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

Closure شدن به شما امکان می‌دهد اطلاعات دیگری مانند index را در شرایطی که پس از اجرای تابع در دسترس نیست، حفظ کنید.

function tabsHandler(index) {
    return function tabClickEvent(evt) {
        // Do stuff with tab.
        // The index variable can be accessed from within here.
    };
}

let tabs = document.querySelectorAll('.tab'),
    i;

for (i = 0; i < tabs.length; i += 1) {
    tabs[i].onclick = tabsHandler(i);
}

کنترل‌کننده‌های رویداد پیوست شده در زمان دیگری (پس از اتمام حلقه) اجرا می‌شوند، بنابراین برای حفظ مقدار مناسب حلقه for نیاز به Closure شدن است.

// Bad code, demonstrating why a closure is needed
let i;

for (i = 0; i < list.length; i += 1) {
    document.querySelector('#item' + i).onclick = function doSomething(evt) {
        // Do something with item i
        // But, by the time this function executes, the value of i is always list.length
    }
}

با استخراج تابع ()doSomething از داخل حلقه for، درک اینکه چرا مشکل رخ می دهد آسان تر است.

// Bad code, demonstrating why a closure is needed

let list = document.querySelectorAll('.item'),
    i,
    doSomething = function (evt) {
        // Do something with item i.
        // But, by the time this function executes, the value of i is not what it was in the loop.
    };

for (i = 0; i < list.length; i += 1) {
    item[i].onclick = doSomething;
}

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

// The following is good code, demonstrating the use of a closure

let list = ['item1', 'item2', 'item3'],
    i,
    doSomethingHandler = function (itemIndex) {
        return function doSomething(evt) {
            // now this doSomething function can retain knowledge of
            // the index variable via the itemIndex parameter,
            // along with other variables that may be available too.
            console.log('Doing something with ' + list[itemIndex]);
        };
    };

for (i = 0; i < list.length; i += 1) {
    list[i].onclick = doSomethingHandler(i);
}

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

عبارات توابع را می توان مستقیماً به توابع ارسال کرد، بدون اینکه نیازی به انتساب به یک متغیر موقت میانی باشد.

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

$(document).ready(function () {
    console.log('An anonymous function');
});

هنگام استفاده از متدهایی مانند ()forEach از عبارت تابع نیز برای مدیریت آیتم های آرایه استفاده می شود.

آنها نیز نباید توابع ناشناس بی نام باشند. این ایده خوبی است که برای کمک به بیان آنچه که تابع قرار است انجام دهد و برای کمک به دیباگ کردن، عبارت تابع را نامگذاری کنید:

let productIds = ['12356', '13771', '15492'];

productIds.forEach(function showProduct(productId) {
    ...
});

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

IIFEها به جلوگیری از تأثیرگذاری توابع و متغیرهای شما بر دامنه گلوبال کمک می کنند.

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

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

در اینجا یک مثال ساده از IIFE آورده شده است:

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

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

let myModule = (function () {
    let privateMethod = function () {
        console.log('A private method');
    },
    someMethod = function () {
        console.log('A public method');
    },
    anotherMethod = function () {
        console.log('Another public method');
    };

    return {
        someMethod: someMethod,
        anotherMethod: anotherMethod
    };
}());

نتیجه

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

استفاده گسترده از آنها آنها را به بخشی ضروری از جعبه ابزار هر توسعه دهنده تبدیل می کند. آیا از عبارات تابع در کد خود به روش های جالبی که در بالا ذکر نکرده ام استفاده می کنید؟ نظر بدهید.