فهرست مطالب
EcmaScript(اکما اسکریپت) چیست؟
EcmaScript یا به اختصار ES، یک استاندارد برای زبان جاوااسکریپت (JavaScript) است که توسط سازمان Ecma International تعریف شده است. این استاندارد قواعد و روش‌هایی را برای زبان جاوااسکریپت تعریف می‌کند که به توسعه‌دهندگان کمک می‌کند تا بتوانند به راحتی و با پایداری بیشتری برنامه‌های جاوااسکریپت خود را بنویسند.
ES شامل مجموعه‌ای از ویژگی‌ها و تغییراتی است که به زبان جاوااسکریپت اضافه شده‌اند، از جمله مفاهیمی مانند کلاس‌ها، پارامترهای پیش‌فرض، تابع جدید async/await و… که تا زمان ایجاد ES، در زبان جاوااسکریپت موجود نبودند.
از آنجا که ES به عنوان یک استاندارد ارائه شده است، تمامی مرورگرهای وب مدرن این استاندارد را پشتیبانی می‌کنند و برنامه‌نویسان می‌توانند از ویژگی‌های جدید ES در برنامه‌های خود استفاده کنند.
تفاوت جاوا اسکریپت (javascript) و EcmaScript(اکما اسکریپت) چیست؟
JavaScript یا JS یک زبان برنامه‌نویسی است که ابتدا توسعه داده شد و در مرورگرهای وب برای اجرای کدهای سمت کاربر (client-side) استفاده می‌شود. اکما اسکریپت (EcmaScript) همان زبان JavaScript است که به صورت استانداردی برای آن تعریف شده است. به عبارت دیگر، EcmaScript یک استاندارد برای زبان JavaScript است.
از آنجا که JavaScript یک زبان پویا و در حال توسعه است، هر چند مرورگرهای وب مختلف و محیط‌های توسعه مختلفی از JS پشتیبانی می‌کنند، اما همه آنها از تمامی ویژگی‌های JS پشتیبانی نمی‌کنند. بنابراین، استفاده از استاندارد EcmaScript برای تضمین پشتیبانی تمامی محیط‌ها و مرورگرهای وب مختلف، بسیار مهم است.
به عنوان مثال، اگر یک برنامه‌نویس از ویژگی‌های جدید EcmaScript مانند async/await استفاده کند، این ویژگی به‌طور پیش‌فرض در تمامی مرورگرها و محیط‌های توسعه پشتیبانی نخواهد شد. اما با استفاده از ابزارهای مختلفی مانند بابل (Babel)، کد EcmaScript می‌تواند به کد JavaScript قابل اجرا در مرورگرهای قدیمی تبدیل شود.
در کل، JavaScript یک زبان برنامه‌نویسی است و EcmaScript یک استاندارد برای آن است که به توسعه‌دهندگان کمک می‌کند تا بتوانند به راحتی و با پایداری بیشتری برنامه‌های JavaScript خود را بنویسند.
دستور let
let یکی از ویژگی‌های جدیدی است که در استاندارد EcmaScript 2015 (ES6) به زبان JavaScript اضافه شده است. این قابلیت به برنامه‌نویسان کمک می‌کند تا بتوانند متغیرهایی را با استفاده از تعریف let ایجاد کنند که در دسترس فقط در بلوک مشخصی از کد باشند.
با تعریف یک متغیر با let، این متغیر فقط در بلوکی که در آن تعریف شده است و بلوک‌های داخلی آن قابل دسترسی است. به عنوان مثال:
let x = 2;
console.log(x); // 2
}
console.log(x); // ReferenceError: x is not defined
در این مثال، متغیر x با استفاده از let در داخل بلوک {} تعریف شده است و فقط در داخل آن بلوک قابل دسترسی است. در خارج از بلوک، متغیر x تعریف نشده است و برنامه با پیغام خطای ReferenceError مواجه خواهد شد.
تفاوت این روش با استفاده از var در تعریف متغیر به این شکل است که، هنگامی که یک متغیر با استفاده از var تعریف شود، این متغیر در دسترس در سطح تابع (و نه بلوک) قرار می‌گیرد و می‌تواند در هر جای تابع استفاده شود.
استفاده از let به برنامه‌نویسان اجازه می‌دهد که به‌راحتی متغیرهای داخل بلوک را مدیریت کنند و خطاهای مربوط به دسترسی به متغیرهای نامناسب را کاهش دهند.
تفاوت بین let و var
در زبان جاوااسکریپت، var و let دو روش برای تعریف متغیر هستند. اما تفاوت‌های زیادی بین این دو روش وجود دارد. به تفصیل:
- دامنه دید (Scope):
متغیرهایی که با var تعریف می‌شوند، در دامنه دید سطح تابع قرار می‌گیرند، در حالی که متغیرهایی که با let تعریف می‌شوند، در دامنه دید بلوک قرار می‌گیرند. به این معنی که در صورت تعریف یک متغیر با var در داخل یک بلوک، این متغیر در دسترس در بقیه بلوک‌ها و حتی در خارج از تابع قرار می‌گیرد. در حالی که در صورت تعریف با let، متغیر فقط در دامنه دید بلوک قابل دسترسی است.
- هویت (Hoisting):
متغیرهایی که با var تعریف می‌شوند، قبل از اجرای کد به بالا می‌روند و در دسترس می‌باشند. به عبارت دیگر، در صورتی که یک متغیر با var تعریف شود، حتی قبل از تعریف آن در کد، قابل استفاده است. اما متغیرهایی که با let تعریف می‌شوند، قابل دسترسی نیستند تا زمان تعریف آنها.
- تکراری‌بودن (Redeclaration):
در صورت تعریف دوباره یک متغیر با استفاده از var، مقدار آن به‌روزرسانی می‌شود و خطایی رخ نمی‌دهد. اما در صورت تعریف دوباره یک متغیر با استفاده از let، خطایی با پیغام “Identifier has already been declared” رخ می‌دهد.
- قابلیت تعریف دوباره (Reassignment):
در صورت تغییر مقدار یک متغیر، هر دو var و let قابل تغییرند. اما در صورت تعریف مجدد یک متغیر با let، خطایی رخ می‌دهد، در حالی که در صورت تعریف مجدد یک متغیر با var، مقدار آن به‌روزرسانی می‌شود.
به طور کلی، استفاده از let به برنامه‌نویسان اجازه می‌دهد که به‌راحتی متغیرهای داخل بلوک را مدیریت کنند و خطاهای مربوط به دسترسی به متغیرهای نامناسب را کاهش دهند. در عوض، استفاده از var در بعضی موارد می‌تواند به دلیل دسترسی متغیر در سطح تابع، مفید باشد.
دستور const
const یکی از ویژگی‌های جدیدی است که در استاندارد EcmaScript 2015 (ES6) به زبان جاوا اسکریپت اضافه شده است. این دستور برای تعریف متغیرهای ثابت (constant) استفاده می‌شود. به عبارت دیگر، با استفاده از const یک متغیر تعریف می‌شود که مقدار آن در طول زمان تغییر نمی‌کند.
در مقابل با let و var، مقدار یک متغیر تعریف شده با const قابل تغییر نیست. به عنوان مثال:
PI = 3; // TypeError: Assignment to constant variable.
در این مثال، متغیر PI با استفاده از const تعریف شده است و مقدار آن تغییر نمی‌کند. هنگامی که تلاش می‌کنیم که مقدار آن را تغییر دهیم، خطای TypeError: Assignment to constant variable رخ می‌دهد.
استفاده از const به برنامه‌نویسان کمک می‌کند تا برنامه‌های پایدارتری بنویسند، زیرا متغیرهای ثابتی که با const تعریف شده‌اند، نمی‌توانند توسط برنامه تصادفی تغییر کنند. این ویژگی به خصوص برای تعریف ثابت‌هایی مانند ثابت‌های ریاضیاتی، ثابت‌های مربوط به تنظیمات برنامه و غیره بسیار مفید است.
پارامترهای پیش‌فرض یا default parameters، یکی از ویژگی‌های جدیدی هستند که در استاندارد EcmaScript 2015 (ES6) به زبان جاوا اسکریپت اضافه شده است. با استفاده از این ویژگی، می‌توان به تابع‌های خود پارامترهای پیش‌فرضی اختصاص داد تا در صورتی که این پارامترها در فراخوانی تابع مقداری از آنها مشخص نشود، پارامترهای پیش‌فرضی اعمال شوند.
برای تعریف پارامترهای پیش‌فرض، می‌توان در تعریف تابع مقدار پیش‌فرض برای هر پارامتر را مشخص کرد. به عنوان مثال:
function greet(name = ‘World’) {
console.log(`Hello, ${name}!`);
}
greet(); // Hello, World!
greet(‘John’); // Hello, John!
دستور rest parameter
Rest parameter یا پارامترهای باقیمانده، یکی دیگر از ویژگی‌های جدیدی هستند که در EcmaScript 2015 (ES6) به زبان جاوااسکریپت اضافه شده‌اند. با استفاده از این ویژگی، می‌توان در تعریف تابع، یک پارامتر با نام مشخص را به عنوان پارامترهای باقیمانده تعریف کرد. پارامتر باقیمانده، مجموعه‌ای از آرگومان‌های اضافی را که در فراخوانی تابع ممکن است به آن ارسال شوند، در خود ذخیره می‌کند.
برای تعریف پارامتر باقیمانده، از سه نقطه پشت سر نام پارامتر استفاده می‌شود. به عنوان مثال:
function sum(…numbers) {
let total = 0;
for (const number of numbers) {
total += number;
}
return total;
}
console.log(sum(1, 2, 3, 4, 5)); // 15
دستور spread operator
Spread operator یکی از ویژگی‌های جدیدی است که در EcmaScript 2015 (ES6) به زبان جاوااسکریپت اضافه شده است. با استفاده از این ویژگی، می‌توان یک آرایه، یک شیء iterable (مانند رشته یا مجموعه) و یا فهرستی از آرگومان‌ها را به صورت جداگانه در یک مکان استفاده کرد.
برای استفاده از spread operator، از سه نقطه پشت سر شیء مورد نظر استفاده می‌شود. به عنوان مثال:
const numbers = [1, 2, 3, 4, 5];
console.log(…numbers); // 1 2 3 4 5
const str = “Hello”;
console.log(…str); // H e l l o
function sum(x, y, z) {
return x + y + z;
}
const numbers = [1, 2, 3];
console.log(sum(…numbers)); // 6
در این مثال‌ها، با استفاده از spread operator، می‌توانیم آرایه numbers و رشته "Hello" را به صورت جداگانه در یک مکان استفاده کنیم. همچنین، در مثال سوم، با استفاده از spread operator، می‌توانیم آرایه numbers را به عنوان سه آرگومان x، y و z به تابع sum ارسال کنیم.
استفاده از spread operator به برنامه‌نویسان کمک می‌کند تا کد خود را ساده تر و کوتاهتر کنند و از تکرار کد جلوگیری کنند. به علاوه، با استفاده از این ویژگی، می‌توانیم خصوصیات یک شیء را به یک شیء دیگر منتقل کنیم، یا مقدار پیش‌فرضی برای یک آرایه یا شیء را تعیین کنیم.
دستور object literal
Object literal یا شیء حرفه‌ای، یکی از ویژگی‌های جدیدی است که در EcmaScript 2015 (ES6) به زبان جاوااسکریپت اضافه شده است و به برنامه‌نویسان اجازه می‌دهد تا با استفاده از یک نوع خاص از نوشتار، یعنی شیء، اشیاء را بسازند.
برای تعریف یک شیء حرفه‌ای، از دو علامت آکولاد { } استفاده می‌شود و می‌توانیم خصوصیات و مقادیری را که می‌خواهیم در شیء خود داشته باشیم، درون آکولادها قرار دهیم. به عنوان مثال:
const person = {
firstName: ‘John’,
lastName: ‘Doe’,
age: 30,
hobbies: [‘reading’, ‘swimming’, ‘hiking’],
address: {
street: ‘123 Main St’,
city: ‘New York’,
state: ‘NY’
}
};
console.log(person.firstName); // John
console.log(person.address.city); // New York
در این مثال، یک شیء حرفه‌ای با نام person تعریف شده است که شامل چندین خصوصیت است، از جمله نام، نام خانوادگی، سن، سرگرمی‌ها و آدرس. هر یک از خصوصیات یک شیء حرفه‌ای، دارای یک نام و یک مقدار است.
استفاده از شیء حرفه‌ای به برنامه‌نویسان کمک می‌کند تا بتوانند کد خود را ساده‌تر و خواناتر کنند و در عین حال، از تکرار کد جلوگیری کنند. همچنین، با استفاده از شیء حرفه‌ای، می‌توانیم اشیاءی با ساختار پیچیده‌تر تعریف کنیم، از جمله شیء‌هایی که شامل شیء‌های دیگر باشند.
دستور حلقه for-of
حلقه for-of یکی از ویژگی‌های جدیدی است که در EcmaScript 2015 (ES6) به زبان جاوااسکریپت اضافه شده است و به برنامه‌نویسان اجازه می‌دهد تا به راحتی از روی شیء iterable (مانند آرایه یا رشته) حرکت کنند.
برای استفاده از حلقه for-of، از کلیدواژه for به همراه متغیری که در هر مرحله از حلقه به ارزش جدیدی از شیء iterable می‌رسد، استفاده می‌شود. به عنوان مثال:
const numbers = [1, 2, 3, 4, 5];
for (const number of numbers) {
console.log(number);
}
در این مثال، با استفاده از حلقه for-of، به ترتیب هر عضو از آرایه numbers نمایش داده می‌شود.
مزیت استفاده از حلقه for-of این است که کد خواناتر و ساده‌تر می‌شود، زیرا نیازی به استفاده از متغیر شمارنده و یا شاخصی برای دسترسی به هر المان از شیء iterable نیست. همچنین، با استفاده از این حلقه، می‌توانیم به راحتی از روی شیء iterable حرکت کنیم، بدون این که نگران تعداد عناصر آن باشیم.
دستور template literals
Template literals یا رشته متنی قالب‌بندی شده، یکی از ویژگی‌های جدیدی است که در EcmaScript 2015 (ES6) به زبان جاوااسکریپت اضافه شده است و به برنامه‌نویسان اجازه می‌دهد تا رشته‌های متنی خود را با قالب‌بندی بهتر و روش‌های پویا‌تری بسازند.
برای استفاده از template literals، از دو علامت بک‌تیک ` (grave accent) استفاده می‌شود. درون این علامت‌ها، می‌توانیم عبارات جاوااسکریپت را قرار دهیم، که با استفاده از علامت دلار $ و پرانتز کروی، درون رشته قرار می‌گیرند. به عنوان مثال:
const name = ‘John’;
const age = 30;
const message = `My name is ${name} and I’m ${age} years old.`;
console.log(message); // My name is John and I’m 30 years old.
در این مثال، با استفاده از template literals، یک رشته متنی با قالب‌بندی بهتر ساخته شده است. با قرار دادن متغیرهای name و age درون رشته و استفاده از علامت $ و پرانتز کروی، به راحتی می‌توانیم مقدار این متغیرها را درون رشته نمایش دهیم.
مزیت استفاده از template literals، این است که کد خواناتر و ساده‌تر می‌شود، زیرا نیازی به استفاده از علامت‌های تک‌نقطه و دونقطه برای ایجاد رشته‌های متنی با قالب بندی خاص نیست. علاوه بر این، با استفاده از template literals، می‌توانیم رشته‌های بسیار پویا و پویایی با قابلیت تنظیم بالا بسازیم.
دستور array distructuring
Array destructuring یا تجزیه آرایه، یکی از ویژگی‌های جدیدی است که در EcmaScript 2015 (ES6) به زبان جاوااسکریپت اضافه شده است و به برنامه‌نویسان اجازه می‌دهد تا به راحتی از المان‌های آرایه با استفاده از نوشتاری جدیدی به نام pattern matching (الگوی مطابقت) دسترسی پیدا کنند.
برای استفاده از array destructuring، از دو علامت کروشه [ ] استفاده می‌شود و می‌توانیم المان‌های آرایه را با استفاده از نوشتاری جدیدی به نام pattern matching، در متغیرهای مختلف ذخیره کنیم. به عنوان مثال:
const numbers = [1, 2, 3, 4, 5];
const [first, second, …rest] = numbers;
console.log(first); // 1
console.log(second); // 2
console.log(rest); // [3, 4, 5]
در این مثال، با استفاده از array destructuring، المان‌های آرایه numbers در سه متغیر first، second و rest ذخیره شده‌اند. متغیرهای first و second به ترتیب با دو المان اول آرایه مقداردهی شده‌اند و متغیر rest، به باقی المان‌های آرایه (به جز دو المان اول) با استفاده از عملگر spread ذخیره شده است.
مزیت استفاده از array destructuring، این است که کد خواناتر و ساده‌تر می‌شود، زیرا نیازی به استفاده از متغیر شمارنده و یا شاخصی برای دسترسی به هر المان از آرایه نیست. همچنین، با استفاده از این ویژگی، می‌توانیم در کد خود از عملگر spread نیز استفاده کنیم تا باقی المان‌های آرایه را در یک متغیر جداگانه ذخیره کنیم.
دستور object distructuring
Object destructuring یا تجزیه شیء، یکی از ویژگی‌های جدیدی است که در EcmaScript 2015 (ES6) به زبان جاوااسکریپت اضافه شده است و به برنامه‌نویسان اجازه می‌دهد تا به راحتی از ویژگی‌های یک شیء با استفاده از نوشتاری جدیدی به نام pattern matching (الگوی مطابقت) دسترسی پیدا کنند.
برای استفاده از object destructuring، از دو علامت گوشه زده { } استفاده می‌شود و می‌توانیم ویژگی‌های یک شیء را با استفاده از نوشتاری جدیدی به نام pattern matching، در متغیرهای مختلف ذخیره کنیم. به عنوان مثال:
const person = {
name: ‘John’,
age: 30,
address: {
city: ‘New York’,
country: ‘USA’
}
};
const { name, age, address: { city } } = person;
console.log(name); // John
console.log(age); // 30
console.log(city); // New York
در این مثال، با استفاده از object destructuring، ویژگی‌های شیء person در سه متغیر name، age و city ذخیره شده‌اند. متغیرهای name و age به ترتیب با ویژگی‌های name و age شیء person مقداردهی شده‌اند و متغیر city، به ویژگی city شیء address که درون شیء person قرار دارد، مقداردهی شده است.
مزیت استفاده از object destructuring، این است که کد خواناتر و ساده‌تر می‌شود، زیرا نیازی به استفاده از نام شیء در هر بار دسترسی به یک ویژگی آن نیست. همچنین، با استفاده از این ویژگی می‌توانیم به راحتی ویژگی‌های شیء را در متغیرهای جداگانه ذخیره کنیم و در صورت نیاز، می‌توانیم به ویژگی‌های شیء درون شیء‌های دیگر نیز دسترسی پیدا کنیم.
ماژول ها در ES6
ماژول‌ها (Modules) یکی از ویژگی‌های جدیدی هستند که در EcmaScript 2015 (ES6) به زبان جاوااسکریپت اضافه شده‌اند. با استفاده از ماژول‌ها، برنامه‌نویسان می‌توانند کدهای خود را به قسمت‌های کوچکتر و ماژول‌های مجزا تقسیم کنند، که این کار باعث می‌شود که کدهای آنها قابلیت استفاده مجدد بیشتری داشته باشد و کدبندی شان بهبود پیدا کند.
برای استفاده از ماژول‌ها، باید از دو واژه کلیدی import و export استفاده کرد. با استفاده از کلمه کلیدی export، می‌توانیم یک ماژول جدید تعریف کنیم و با استفاده از کلمه کلیدی import، می‌توانیم یک ماژول دیگر را به عنوان وابستگی درون ماژول جاری وارد کنیم.
به عنوان مثال، فرض کنید که یک فایل به نام utils.js داریم که دو تابع sum و multiply را تعریف می‌کند:
export function sum(a, b) {
return a + b;
}
export function multiply(a, b) {
return a * b;
}
و حال در یک فایل دیگر به نام main.js، می‌خواهیم از توابع موجود در فایل utils.js استفاده کنیم:
import { sum, multiply } from ‘./utils.js’;
console.log(sum(2, 3)); // 5
console.log(multiply(2, 3)); // 6
در این مثال، با استفاده از کلمه کلیدی export، دو تابع sum و multiply در فایل utils.js تعریف شده‌اند. سپس با استفاده از کلمه کلیدی import، این دو تابع در فایل main.js وارد شده‌اند و می‌توانیم از آنها استفاده کنیم.
مزیت استفاده از ماژول‌ها، این است که کد خواناتر و ساده‌تر می‌شود، زیرا با استفاده از آنها می‌توانیم قسمت‌های کوچکتر و ماژول‌های مجزا از کد خود را تعریف کنیم که باعث می‌شود کدبندی شان بهبود پیدا کند و کدهای آنها قابلیت استفاده مجدد بیشتری داشته باشد. همچنین، با استفاده از ماژول‌ها می‌توانیم کدهای بزرگتر را به قسمت‌های کوچکتر تقسیم کنیم که این کار باعث می‌شود که کد خواناتر و قابل توسعه‌تر باشد.
دستور getter و setter
Getter و Setter در جاوااسکریپت، دو تابع ویژه هستند که برای دسترسی به ویژگی‌های یک شیء به کار می‌روند. Getter برای خواندن مقدار ویژگی و Setter برای تنظیم مقدار ویژگی استفاده می‌شود. این دو تابع به شیوه‌ای خاص نام‌گذاری شده‌اند و به صورت خودکار توسط مرورگر فراخوانی می‌شوند.
برای تعریف Getter و Setter برای ویژگی‌های یک شیء، باید از نام تابع getter و setter استفاده کرد و نام ویژگی را به آنها اختصاص داد. به عنوان مثال:
class Person {
constructor(name, age) {
this._name = name;
this._age = age;
}
get name() {
return this._name;
}
set name(name) {
this._name = name;
}
get age() {
return this._age;
}
set age(age) {
if (age < 0 || age > 120) {
throw new Error(‘Invalid age’);
}
this._age = age;
}
}
let person = new Person(‘John’, 30);
console.log(person.name); // John
console.log(person.age); // 30
person.name = ‘Mary’;
person.age = 25;
console.log(person.name); // Mary
console.log(person.age); // 25
در این مثال، یک کلاس Person تعریف شده است و برای ویژگی‌های name و age، Getter و Setter تعریف شده است. همچنین، برای ویژگی age، یک شرط نیز تعریف شده است که در صورت عدم اعتبار مقدار، یک خطا رخ می‌دهد.
با استفاده از Getter و Setter، می‌توانیم به راحتی ویژگی‌های یک شیء را خواندن یا تغییر دهیم و در صورت نیاز، قوانین خاصی برای تغییر مقدار آنها تعریف کنیم.
static method ها در ES ۶
در ES6، ما می‌توانیم به روشی ساده و جداگانه، متدهای استاتیک را در کلاس‌ها تعریف کنیم. متد استاتیک، یک متد است که به نمونه‌ای از کلاس وابسته نیست، بلکه مستقیماً به کلاس مربوط می‌شود. به عبارت دیگر، متد استاتیک روی کلاس تعریف می‌شود و نه روی نمونه‌ای از آن کلاس.
برای تعریف متد استاتیک در ES6، باید از کلمه کلیدی static قبل از نام متد استفاده کنیم. به عنوان مثال:
class Circle {
constructor(radius) {
this.radius = radius;
}
area() {
return Math.PI * this.radius * this.radius;
}
static fromDiameter(diameter) {
return new Circle(diameter / 2);
}
}
let circle1 = new Circle(5);
console.log(circle1.area()); // 78.53981633974483
let circle2 = Circle.fromDiameter(10);
console.log(circle2.radius); // 5
console.log(circle2.area()); // 78.53981633974483
در این مثال، کلاس Circle دارای دو متد area و fromDiameter است. متد area درون کلاس تعریف شده است و به نمونه‌ای از کلاس وابسته است. اما متد fromDiameter به کمک کلمه کلیدی static تعریف شده است و به کلاس مربوط می‌شود، نه به نمونه‌ای از آن.
در این مثال، با فراخوانی متد area روی نمونه circle1، می‌توانیم مساحت دایره‌ای با شعاع 5 را محاسبه کنیم. همچنین، با فراخوانی متد استاتیک fromDiameter روی کلاس Circle، با دادن قطر دایره به عنوان پارامتر، یک نمونه از کلاس Circle با شعاع متناظر با آن قطر ایجاد می‌شود.
استفاده از متدهای استاتیک، در بسیاری از موارد مفید است، به عنوان مثال برای ایجاد توابع کمکی که به کلاس وابسته نیستند و یا برای ایجاد توابعی که تعداد زیادی از نمونه‌های کلاس را مدیریت می‌کنند.
arrow function
Arrow function یا تابع‌های پرچمدار در ES6، یک نوع تابع جدید در جاوااسکریپت هستند که به صورت خلاصه‌تری نسبت به توابع معمولی تعریف می‌شوند. این توابع کمک می‌کنند که کد ما به صورت کوتاهتر و خواناتری نوشته شود.
برای تعریف تابع با استفاده از arrow function، باید پارامترهای تابع را در پرانتز قرار داده و بعد از آن عملگر => را قرار دهیم و بدنه تابع را در داخل آکولاد نوشته و در صورت نیاز با return مقدار خروجی تابع را تعیین کنیم. به عنوان مثال:
// تعریف arrow function برای جمع دو عدد
let sum = (a, b) => {
return a + b;
}
console.log(sum(2, 3)); // 5
در این مثال، با استفاده از عملگر =>، یک تابع جدید به نام sum تعریف شده است که دو پارامتر a و b را به عنوان ورودی دریافت می‌کند و مقدار جمع آنها را با استفاده از return به عنوان خروجی تابع باز می‌گرداند.
همچنین، اگر بدنه تابع بسیار کوتاه و ساده باشد، می‌توانیم از روش خلاصه شده arrow function استفاده کنیم. به عنوان مثال:
// تعریف arrow function با روش خلاصه شده برای جمع دو عدد
let sum = (a, b) => a + b;
console.log(sum(2, 3)); // 5
در این حالت، هیچ آکولادی وجود ندارد و با استفاده از علامت =>، خروجی تابع به صورت خودکار بازگردانده می‌شود.
استفاده از arrow function در بسیاری از موارد، به عنوان مثال در تعریف توابع کالبدی کوتاه و ساده، بسیار مفید است و کد را خواناتر و کوتاهتر می‌کند.
