تفاوت توابع Arrow و توابع معمولی - آزمون آنلاین جاوااسکریپت
آزمون جاوااسکریپت: تفاوت توابع Arrow و توابع معمولی
یه آزمون در مورد زبان برنامه نویسی جاوااسکریپت داریم که قراره بهمون کمک کنه تفاوتهای مهم بین توابع Arrow و توابع معمولی رو بهتر بفهمیم.
این دو نوع تابع از مهمترین بخشهای جاوااسکریپت مدرن هستن و هر برنامهنویسی باید بهشون مسلط باشه. در این کوییز میتونی میزان مهارت و تسلط خودت رو درباره این موضوع بسنجی و همزمان اطلاعات خوبی به دست بیاری و با جزئیات بیشتری آشنا بشی.

توابع معمولی در جاوااسکریپت
قبل از اینکه سراغ توابع Arrow بریم، بهتره یه مرور کوتاه روی توابع معمولی داشته باشیم. این توابع از قدیم توی جاوااسکریپت بودن و خیلی از برنامهنویسها باهاشون کار کردن.
یه تابع معمولی با کلمه کلیدی function تعریف میشه و کاربردهای گستردهای داره.
ساختار و استفاده توابع معمولی
توابع معمولی خیلی انعطافپذیر هستن. میشه اونها رو به دو شکل تعریف کرد: یکی به صورت Declaration و دیگری به صورت Expression.
توابع Declaration قابل Hoisting هستن، یعنی میتونی اونها رو قبل از اینکه تعریف بشن، فراخوانی کنی. اما توابع Expression این قابلیت رو ندارن.
// Function Declaration
function sum(a, b) {
return a + b;
}
// Function Expression
const multiply = function(a, b) {
return a * b;
};
توابع Arrow و ویژگیهای کلیدی
توابع Arrow با معرفی ES6 (ECMAScript 2015) وارد جاوااسکریپت شدن. این توابع به خاطر سینتکس کوتاهشون و رفتار متفاوتی که با this دارن، خیلی محبوب شدن. یه تابع Arrow با نماد => تعریف میشه.
تفاوتهای مهم توابع Arrow و توابع معمولی
یکی از مهمترین تفاوتها، نحوه مدیریت کلمه کلیدی this هست. توابع معمولی بسته به اینکه چطور فراخوانی بشن، مقدار thisشون عوض میشه (Dynamic Scope).
ولی توابع Arrow مقدار this رو از Scope والدشون به ارث میبرن (Lexical Scope) و مقدارش ثابت میمونه. این ویژگی کار رو توی خیلی از سناریوها، مخصوصاً با Callback Functions، خیلی راحت میکنه.
یکی دیگه از تفاوتها اینه که توابع Arrow آرگومانهای تکراری قبول نمیکنن. همچنین، توابع معمولی یه آبجکت arguments دارن که میشه بهش دسترسی داشت، اما توابع Arrow این آبجکت رو ندارن و باید از Rest Parameters استفاده کنی.
چند نمونه از کاربردهای توابع Arrow:
- برای نوشتن توابع کوتاه و تک خطی که کد رو خواناتر میکنه.
- در مواقعی که نیاز داری مقدار
thisثابت بمونه و تغییر نکنه. - به عنوان Callback Functions در متدهای آرایهها مثل
map(),filter(), وforEach().
const numbers = [1, 2, 3, 4, 5];
// Arrow function used in map()
const doubledNumbers = numbers.map(num => num * 2);
console.log(doubledNumbers); // Output: [2, 4, 6, 8, 10]
مقایسه جامع توابع جاوااسکریپت
اینجا یه جدول داریم که تفاوتهای اصلی این دو نوع تابع رو به صورت خلاصه و دقیق نشون میده. با مقایسه این موارد، بهتر میتونی بفهمی که هر کدوم از این توابع برای چه کاری مناسبترن.
| ویژگی | توابع معمولی (Regular Functions) | توابع Arrow (Arrow Functions) |
|---|---|---|
| نحوه تعریف | با کلمه کلیدی function |
با نماد => |
مدیریت this |
Dynamic Scope (مقدار this تغییر میکند) |
Lexical Scope (مقدار this ثابت میماند) |
دسترسی به arguments |
دارای آبجکت arguments هستند |
آبجکت arguments ندارند |
| Hoisting | بله، در نوع Declaration | خیر، فقط پس از تعریف قابل فراخوانی هستند |
| استفاده به عنوان Constructor | بله، با کلمه کلیدی new |
خیر، نمیتوان از new استفاده کرد |
سوالاتی که در این آزمون با آنها روبرو میشی در مورد تفاوت توابع Arrow و توابع معمولی هستن. مثلاً ممکنه با سوالاتی در مورد رفتار this در هر دو نوع تابع، نحوه استفاده از اونها در متدهای آرایهها، یا تفاوت در سینتکس و تعریفشون مواجه بشی.
با شرکت در این آزمون، متوجه میشی که در کدام بخشها نیاز به تمرین بیشتری داری و چه اطلاعاتی در این زمینه به دست میاری.
آمادهای؟
اگه آمادهای که دانش خودت رو بسنجی و اطلاعاتت رو تکمیل کنی، روی دکمه شروع کلیک کن و وارد این چالش جذاب شو.