تفاوت Function Expression، Function Declaration و Arrow Function
23 خرداد 1403 1403-05-01 18:30تفاوت Function Expression، Function Declaration و Arrow Function
انواع function در جاوااسکریپت! یکی از روش‌های تعریف توابع در جاوا اسکریپت، Function Declaration است. در این روش، تابع با استفاده از کلمه کلیدی function تعریف می‌شود و می‌تواند قبل از تعریف آن نیز فراخوانی شود، زیرا جاوا اسکریپت در زمان اجرای اسکریپت، این توابع را بالا می‌برد (Hoisting).
روش دیگر، Function Expression است که در آن تابع به‌عنوان یک عبارت تعریف می‌شود و می‌تواند در متغیری ذخیره شود. برخلاف Function Declaration، توابعی که به این شکل تعریف می‌شوند، قبل از تعریف‌شان قابل فراخوانی نیستند. آخرین روش، Arrow Function است که یک روش جدید و مختصر برای تعریف توابع در ES6 می‌باشد.
لیست توابع جاوا اسکریپت (انواع function در جاوااسکریپت)
JavaScript دارای تعداد زیادی توابع داخلی است که برای انجام وظایف مختلف طراحی شده‌اند. در اینجا لیستی از انواع توابع در جاوا اسکریپت را معرفی کرده‌ایم:
توابع مرتبط با دستکاری آرایه‌ها
- Array.prototype.push()
- Array.prototype.pop()
- Array.prototype.shift()
- Array.prototype.unshift()
- Array.prototype.slice()
- Array.prototype.splice()
- Array.prototype.concat()
- Array.prototype.join()
- Array.prototype.indexOf()
- Array.prototype.lastIndexOf()
توابع مرتبط با رشته‌ها
- String.prototype.charAt()
- String.prototype.charCodeAt()
- String.prototype.concat()
- String.prototype.includes()
- String.prototype.endsWith()
- String.prototype.startsWith()
- String.prototype.indexOf()
- String.prototype.lastIndexOf()
- String.prototype.match()
- String.prototype.replace()
توابع مرتبط با اعداد
- Number.isFinite()
- Number.isInteger()
- Number.isNaN()
- Number.isSafeInteger()
- Number.parseFloat()
- Number.parseInt()
- Number.prototype.toExponential()
- Number.prototype.toFixed()
- Number.prototype.toLocaleString()
- Number.prototype.toPrecision()
توابع مرتبط با شیء‌ها
- Object.create()
- Object.assign()
- Object.keys()
- Object.values()
- Object.entries()
- Object.freeze()
- Object.seal()
- Object.preventExtensions()
- Object.isFrozen()
- Object.isSealed()
انواع function در جاوااسکریپت را مطالعه کردیم، در ادامه روش فراخوانی آن‌ها را نیز مطالعه می‌کنیم.
فراخوانی توابع جاوا اسکریپت در html
فراخوانی توابع جاوا اسکریپت در HTML یکی از پایه‌های اساسی توسعه وب است. می‌توانید توابع جاوا اسکریپت را به چندین روش مختلف در HTML فراخوانی کنید. در زیر چند مثال و روش مختلف برای انجام این کار آورده شده است:
1. اضافه کردن اسکریپت جاوا اسکریپت به فایل HTML
می‌توانید کد جاوا اسکریپت خود را مستقیماً در تگ <script> درون فایل HTML قرار دهید.
مثال:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>JavaScript Function Call</title>
</head>
<body>
<button onclick=”greet()”>Click me</button>
<script>
function greet() {
alert(“Hello, world!”);
}
</script>
</body>
</html>
در این مثال، هنگامی که کاربر روی دکمه کلیک می‌کند، تابع greet فراخوانی می‌شود و یک پیام هشدار نمایش می‌دهد.
2. استفاده از فایل جاوا اسکریپت خارجی
می‌توانید کد جاوا اسکریپت خود را در یک فایل جداگانه (مثلاً script.js) قرار دهید و آن‌را در فایل HTML خود وارد کنید.
مثال:
index.html:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>JavaScript Function Call</title>
</head>
<body>
<button onclick=”greet()”>Click me</button>
<script src=”script.js”></script>
</body>
</html>
script.js:
function greet() {
alert(“Hello, world!”);
}
در این مثال، فایل script.js شامل تعریف تابع greet است و وقتی کاربر روی دکمه کلیک می‌کند، این تابع فراخوانی می‌شود.
3. فراخوانی توابع از رویدادهای مختلف
می‌توانید توابع جاوا اسکریپت را از رویدادهای مختلف HTML مانند onload, onmouseover, onmouseout, onchange و غیره فراخوانی کنید.
مثال:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>JavaScript Function Call</title>
<script>
function greet() {
alert(“Hello, world!”);
}
function pageLoaded() {
alert(“Page is fully loaded!”);
}
function changeText(element) {
element.innerHTML = “Mouse over!”;
}
function revertText(element) {
element.innerHTML = “Mouse out!”;
}
</script>
</head>
<body onload=”pageLoaded()”>
<button onclick=”greet()”>Click me</button>
<p onmouseover=”changeText(this)” onmouseout=”revertText(this)”>Hover over this text</p>
</body>
</html>
در این مثال، سه تابع مختلف داریم که از رویدادهای مختلف فراخوانی می‌شوند:
- pageLoaded: هنگام بارگذاری کامل صفحه فراخوانی می‌شود.
- greet: با کلیک بر روی دکمه فراخوانی می‌شود.
- changeText و revertText: با حرکت ماوس بر روی متن و خارج شدن از آن فراخوانی می‌شوند.
4. استفاده از جاوا اسکریپت برای اضافه کردن رویدادها به عناصر HTML
می‌توانید رویدادهای جاوا اسکریپت را به‌صورت برنامه‌نویسی به عناصر HTML اضافه کنید.
مثال:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>JavaScript Function Call</title>
</head>
<body>
<button id=”myButton”>Click me</button>
<p id=”myText”>Hover over this text</p>
<script>
document.getElementById(“myButton”).onclick = function() {
alert(“Hello, world!”);
};
document.getElementById(“myText”).onmouseover = function() {
this.innerHTML = “Mouse over!”;
};
document.getElementById(“myText”).onmouseout = function() {
this.innerHTML = “Mouse out!”;
};
</script>
</body>
</html>
در این مثال، از جاوا اسکریپت برای اضافه کردن رویدادها به عناصر HTML استفاده شده است:
- با کلیک بر روی دکمه، یک پیام هشدار نمایش داده می‌شود.
- با حرکت ماوس بر روی متن و خارج شدن از آن، متن تغییر می‌کند.
تفاوت Function Expression ،Function Declaration و Arrow Function
در جاوا اسکریپت، سه روش مختلف برای تعریف توابع وجود دارد: Function Declaration ،Function Expression و Arrow Function. هر یک از این روش‌ها خصوصیات خاص خود را دارد. در اینجا تفاوت‌ها و مثال‌هایی برای هر یک ارائه شده است:
1. Function Declaration
توضیحات:
توابع با استفاده از کلمه کلیدی function تعریف می‌شوند.
هوستینگ (Hoisting): می‌توان قبل از تعریف تابع، آن‌را فراخوانی کرد.
مثال:
// Function Declaration
function greet() {
console.log(“Hello, world!”);
}
// فراخوانی تابع
greet(); // Output: Hello, world!
ویژگی‌ها:
هوستینگ: تابع greet می‌تواند قبل از تعریف خود فراخوانی شود.
این نوع تعریف تابع معمولاً در بالاترین سطح اسکریپت یا درون بلوک‌های کد استفاده می‌شود.
2. Function Expression
توضیحات:
توابع به یک متغیر تخصیص داده می‌شوند.
تابع تنها پس از تعریف خود قابل استفاده است.
مثال:
// Function Expression
const greet = function() {
console.log(“Hello, world!”);
};
// فراخوانی تابع
greet(); // Output: Hello, world!
ویژگی‌ها:
بدون هوستینگ: تابع greet تنها پس از تعریف خود قابل فراخوانی است.
این روش معمولاً برای تعریف توابع به‌عنوان مقادیر استفاده می‌شود و می‌تواند برای تعریف توابع ناشناس مفید باشد.
3. Arrow Function
توضیحات:
تعریف توابع با استفاده از نماد پیکان (=>).
نحو مختصرتر و تمیزتر.
این توابع به‌صورت خودکار this را از محدوده والد خود می‌گیرند و به‌همین دلیل برای استفاده در توابع بازگشتی یا درون آبجکت‌ها و کلاس‌ها بسیار مفید هستند.
مثال:
// Arrow Function
const greet = () => {
console.log(“Hello, world!”);
};
// فراخوانی تابع
greet(); // Output: Hello, world!
ویژگی‌ها:
- بدون هوستینگ: مشابه Function Expression، این توابع تنها پس از تعریف خود قابل فراخوانی هستند.
- مختصر و تمیز: نحو کوتاه‌تر و ساده‌تر.
- this محدود: Arrow Functions مقدار this را از محدوده والد خود به ارث می‌برند، که آن‌ها را برای استفاده در توابع بازگشتی مناسب می‌سازد.
بررسی تفاوت‌ها
1. هوستینگ
Function Declaration: قابل فراخوانی قبل از تعریف.
Function Expression و Arrow Function: تنها پس از تعریف قابل فراخوانی هستند.
2. this
Function Declaration و Function Expression: مقدار this به نحوه فراخوانی تابع بستگی دارد.
Arrow Function: مقدار this از محدوده والد به ارث می‌برد.
3. نحو
- Function Declaration: function name() { … }
- Function Expression: const name = function() { … }
- Arrow Function: const name = () => { … }
سخن پایانی
توابع در جاوا اسکریپت ابزارهای قدرتمندی هستند که به توسعه‌دهندگان اجازه می‌دهند کدهای خود را سازماندهی کنند، قابلیت استفاده مجدد از کد را افزایش دهند و منطق پیچیده را به بخش‌های قابل مدیریت تقسیم کنند. با استفاده از توابع می‌توانیم کدهای تمیزتر و خواناتری بنویسیم و از قابلیت‌های مدرن جاوا اسکریپت به بهترین نحو بهره‌مند شویم. آکادمی چابک در زمینه برگزاری دوره‌های آموزشی برای نیروهای فنی فعالیت دارد. این دوره‌ها شامل موضوعات مختلفی مانند برنامه‌نویسی، توسعه کسب و کار و سایر مهارت‌های مرتبط می‌باشد.
منابع
