آکادمی چابک | مرجع تخصصی جدیدترین دوره‌های آموزشی
جستجو برای:
سبد خرید 0
  • صفحه اصلی
  • دوره های آموزشی
  • اخبار و مقالات
  • درباره ما
  • تماس با ما
ورود
[suncode_otp_login_form]
گذرواژه خود را فراموش کرده اید؟
عضویت
[suncode_otp_registration_form]

ارسال مجدد کد یکبار مصرف (00:90)
  • 02177010771
  • info@chabokacademy.com
  • اخبار و مقالات
  • علاقمندی ها
آکادمی چابک | مرجع تخصصی جدیدترین دوره‌های آموزشی
  • صفحه اصلی
  • دوره های آموزشی
  • اخبار و مقالات
  • درباره ما
  • تماس با ما
شروع کنید
0

وبلاگ

آکادمی چابک | مرجع تخصصی جدیدترین دوره‌های آموزشی > اخبار و مقالات > برنامه نویسی > تفاوت Function Expression، Function Declaration و Arrow Function

تفاوت Function Expression، Function Declaration و Arrow Function

خرداد 23, 1403
ارسال شده توسط ادمین آکادمی
برنامه نویسی، طراحی وب
انواع function در جاوااسکریپت

فهرست مطالب این نوشته

Toggle
  • انواع function در جاوا اسکریپت
  • لیست توابع جاوا اسکریپت (انواع function در جاوااسکریپت)
    • توابع مرتبط با دستکاری آرایه‌ها
    • توابع مرتبط با رشته‌ها
    • توابع مرتبط با اعداد
    • توابع مرتبط با شیء‌ها
  • function expression در JavaScript
  • فراخوانی توابع جاوا اسکریپت در html
  • تفاوت Function Expression ،Function Declaration و Arrow Function
      • بررسی تفاوت‌ها
  • نقش prototype در جاوا اسکریپت
تعداد بازدید: 185
5/5 امتیاز

آشنایی با انواع توابع در جاوا اسکریپت ( راهنمای کامل فانکشن‌ها): در دنیای توسعه وب، توابع در جاوا اسکریپت یکی از مهم‌ترین بخش‌های زبان محسوب می‌شوند. اما آیا با انواع توابع در جاوا اسکریپت آشنا هستید؟ در این مطلب، با انواع مختلف function در جاوا اسکریپت و نحوه‌ی استفاده از آن‌ها آشنا می‌شویم.

انواع function در جاوااسکریپت! یکی از روش‌های تعریف توابع در جاوا اسکریپت، Function Declaration است. در این روش، تابع با استفاده از کلمه کلیدی function تعریف می‌شود و می‌تواند قبل از تعریف آن نیز فراخوانی شود، زیرا جاوا اسکریپت در زمان اجرای اسکریپت، این توابع را بالا می‌برد (Hoisting).

روش دیگر، Function Expression است که در آن تابع به‌عنوان یک عبارت تعریف می‌شود و می‌تواند در متغیری ذخیره شود. برخلاف Function Declaration، توابعی که به این شکل تعریف می‌شوند، قبل از تعریف‌شان قابل فراخوانی نیستند. آخرین روش، Arrow Function است که یک روش جدید و مختصر برای تعریف توابع در ES6 می‌باشد.

chabokacademy
دوره‌های آموزشی آکادمی چابک
با تخفیف‌های ویژه آکادمی چابک، یادگیری را شروع کنید!
مشاهده دوره‌ها

انواع function در جاوا اسکریپت

  • Function Declaration: تعریف استاندارد تابع
  • Function Expression: تابع به‌صورت یک مقدار که در متغیر ذخیره می‌شود
  • Arrow Function در جاوا اسکریپت: روشی کوتاه‌تر برای نوشتن توابع با حفظ زمینه (context)
  • Constructor Function: توابعی که برای ساخت اشیاء جدید استفاده می‌شوند
  • Generator Function: توابعی با قابلیت توقف و ادامه اجرای کد

لیست توابع جاوا اسکریپت (انواع function در جاوااسکریپت)

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

توابع مرتبط با دستکاری آرایه‌ها

  1. Array.prototype.push()
  2. Array.prototype.pop()
  3. Array.prototype.shift()
  4. Array.prototype.unshift()
  5. Array.prototype.slice()
  6. Array.prototype.splice()
  7. Array.prototype.concat()
  8. Array.prototype.join()
  9. Array.prototype.indexOf()
  10. Array.prototype.lastIndexOf()

توابع مرتبط با رشته‌ها

  1. String.prototype.charAt()
  2. String.prototype.charCodeAt()
  3. String.prototype.concat()
  4. String.prototype.includes()
  5. String.prototype.endsWith()
  6. String.prototype.startsWith()
  7. String.prototype.indexOf()
  8. String.prototype.lastIndexOf()
  9. String.prototype.match()
  10. String.prototype.replace()

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

توابع مرتبط با اعداد

  1. Number.isFinite()
  2. Number.isInteger()
  3. Number.isNaN()
  4. Number.isSafeInteger()
  5. Number.parseFloat()
  6. Number.parseInt()
  7. Number.prototype.toExponential()
  8. Number.prototype.toFixed()
  9. Number.prototype.toLocaleString()
  10. Number.prototype.toPrecision()

توابع مرتبط با شیء‌ها

  1. Object.create()
  2. Object.assign()
  3. Object.keys()
  4. Object.values()
  5. Object.entries()
  6. Object.freeze()
  7. Object.seal()
  8. Object.preventExtensions()
  9. Object.isFrozen()
  10. Object.isSealed()

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

function expression در JavaScript

در function expression javascript، تابع به‌عنوان یک مقدار تعریف می‌شود و معمولاً به یک متغیر نسبت داده می‌شود. این روش در برنامه‌نویسی مدرن بسیار کاربردی است، به‌ویژه هنگام استفاده در توابع ناشناس یا توابع برگشتی.

نگاهی به تکنیک‌های پیشرفته در تولید محتوای الکترونیک و برنامه‌سازی
بخوانید

فراخوانی توابع جاوا اسکریپت در 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 است و وقتی کاربر روی دکمه کلیک می‌کند، این تابع فراخوانی می‌شود.

تفاوت Function Expression ،Function Declaration و Arrow Function

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 استفاده شده است:

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

تفاوت 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

arrow function چیست؟

Arrow function که با علامت => تعریف می‌شود، یک روش خلاصه برای تعریف توابع است. این نوع تابع نه‌تنها کد را تمیزتر می‌کند، بلکه به‌طور خودکار مقدار this را از محیط اطراف به ارث می‌برد، که این ویژگی در بسیاری از موقعیت‌ها بسیار مفید است.

توضیحات:

تعریف توابع با استفاده از نماد پیکان (=>).

نحو مختصرتر و تمیزتر.

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

مثال:

// Arrow Function

const greet = () => {

console.log(“Hello, world!”);

};

// فراخوانی تابع

greet(); // Output: Hello, world!

ویژگی‌ها:

  • بدون هوستینگ: مشابه Function Expression، این توابع تنها پس از تعریف خود قابل فراخوانی هستند.
  • مختصر و تمیز: نحو کوتاه‌تر و ساده‌تر.
  • this محدود: Arrow Functions مقدار this را از محدوده والد خود به ارث می‌برند، که آن‌ها را برای استفاده در توابع بازگشتی مناسب می‌سازد.

استفاده از جاوا اسکریپت برای اضافه کردن رویدادها به عناصر HTML

بررسی تفاوت‌ها

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 = () => { … }
آموزش اصول بهینه‌سازی صفحات AMP برای موبایل
بخوانید

نقش prototype در جاوا اسکریپت

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

سخن پایانی

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

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

chabokacademy
دوره‌های آموزشی آکادمی چابک
با تخفیف‌های ویژه آکادمی چابک، یادگیری را شروع کنید!

مشاهده دوره‌ها

منابع​

w3schools.com

geeksforgeeks.org

قبلی Interpreter چیست؟
بعدی انواع Scopeها در جاوا اسکریپت و پایتون

دیدگاهتان را بنویسید لغو پاسخ

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

ارتباط با ما

  • ۰۲۱۷۷۰۱۰۷۷۱
  • info@chabokacademy.com
  • حکیمیه، بلوار بابائیان، ۱۵ متری امام حسین، بن بست شفاعت، پلاک ۱۵، طبقه ۷

دسترسی سریع

  • خانه
  • دوره ها
  • اخبار و مقالات
  • تماس با ما
  • خانه
  • دوره ها
  • اخبار و مقالات
  • تماس با ما

نماد‌ها و خبرنامه

۱۴۰۲© کلیه حقوق سایت نزد آکادمی چابک محفوظ است.

  • Afghanistan (+93)
  • Albania (+355)
  • Algeria (+213)
  • American Samoa (+1)
  • Andorra (+376)
  • Angola (+244)
  • Anguilla (+1)
  • Antigua (+1)
  • Argentina (+54)
  • Armenia (+374)
  • Aruba (+297)
  • Australia (+61)
  • Austria (+43)
  • Azerbaijan (+994)
  • Bahrain (+973)
  • Bangladesh (+880)
  • Barbados (+1)
  • Belarus (+375)
  • Belgium (+32)
  • Belize (+501)
  • Benin (+229)
  • Bermuda (+1)
  • Bhutan (+975)
  • Bolivia (+591)
  • Bonaire, Sint Eustatius and Saba (+599)
  • Bosnia and Herzegovina (+387)
  • Botswana (+267)
  • Brazil (+55)
  • British Indian Ocean Territory (+246)
  • British Virgin Islands (+1)
  • Brunei (+673)
  • Bulgaria (+359)
  • Burkina Faso (+226)
  • Burundi (+257)
  • Cambodia (+855)
  • Cameroon (+237)
  • Canada (+1)
  • Cape Verde (+238)
  • Cayman Islands (+1)
  • Central African Republic (+236)
  • Chad (+235)
  • Chile (+56)
  • China (+86)
  • Colombia (+57)
  • Comoros (+269)
  • Cook Islands (+682)
  • Côte d'Ivoire (+225)
  • Costa Rica (+506)
  • Croatia (+385)
  • Cuba (+53)
  • Curaçao (+599)
  • Cyprus (+357)
  • Czech Republic (+420)
  • Democratic Republic of the Congo (+243)
  • Denmark (+45)
  • Djibouti (+253)
  • Dominica (+1)
  • Dominican Republic (+1)
  • Ecuador (+593)
  • Egypt (+20)
  • El Salvador (+503)
  • Equatorial Guinea (+240)
  • Eritrea (+291)
  • Estonia (+372)
  • Ethiopia (+251)
  • Falkland Islands (+500)
  • Faroe Islands (+298)
  • Federated States of Micronesia (+691)
  • Fiji (+679)
  • Finland (+358)
  • France (+33)
  • French Guiana (+594)
  • French Polynesia (+689)
  • Gabon (+241)
  • Georgia (+995)
  • Germany (+49)
  • Ghana (+233)
  • Gibraltar (+350)
  • Greece (+30)
  • Greenland (+299)
  • Grenada (+1)
  • Guadeloupe (+590)
  • Guam (+1)
  • Guatemala (+502)
  • Guernsey (+44)
  • Guinea (+224)
  • Guinea-Bissau (+245)
  • Guyana (+592)
  • Haiti (+509)
  • Honduras (+504)
  • Hong Kong (+852)
  • Hungary (+36)
  • Iceland (+354)
  • India (+91)
  • Indonesia (+62)
  • Iran (+98)
  • Iraq (+964)
  • Ireland (+353)
  • Isle Of Man (+44)
  • Israel (+972)
  • Italy (+39)
  • Jamaica (+1)
  • Japan (+81)
  • Jersey (+44)
  • Jordan (+962)
  • Kazakhstan (+7)
  • Kenya (+254)
  • Kiribati (+686)
  • Kuwait (+965)
  • Kyrgyzstan (+996)
  • Laos (+856)
  • Latvia (+371)
  • Lebanon (+961)
  • Lesotho (+266)
  • Liberia (+231)
  • Libya (+218)
  • Liechtenstein (+423)
  • Lithuania (+370)
  • Luxembourg (+352)
  • Macau (+853)
  • Macedonia (+389)
  • Madagascar (+261)
  • Malawi (+265)
  • Malaysia (+60)
  • Maldives (+960)
  • Mali (+223)
  • Malta (+356)
  • Marshall Islands (+692)
  • Martinique (+596)
  • Mauritania (+222)
  • Mauritius (+230)
  • Mayotte (+262)
  • Mexico (+52)
  • Moldova (+373)
  • Monaco (+377)
  • Mongolia (+976)
  • Montenegro (+382)
  • Montserrat (+1)
  • Morocco (+212)
  • Mozambique (+258)
  • Myanmar (+95)
  • Namibia (+264)
  • Nauru (+674)
  • Nepal (+977)
  • Netherlands (+31)
  • New Caledonia (+687)
  • New Zealand (+64)
  • Nicaragua (+505)
  • Niger (+227)
  • Nigeria (+234)
  • Niue (+683)
  • Norfolk Island (+672)
  • North Korea (+850)
  • Northern Mariana Islands (+1)
  • Norway (+47)
  • Oman (+968)
  • Pakistan (+92)
  • Palau (+680)
  • Palestine (+970)
  • Panama (+507)
  • Papua New Guinea (+675)
  • Paraguay (+595)
  • Peru (+51)
  • Philippines (+63)
  • Poland (+48)
  • Portugal (+351)
  • Puerto Rico (+1)
  • Qatar (+974)
  • Republic of the Congo (+242)
  • Romania (+40)
  • Reunion (+262)
  • Russia (+7)
  • Rwanda (+250)
  • Saint Helena (+290)
  • Saint Kitts and Nevis (+1)
  • Saint Pierre and Miquelon (+508)
  • Saint Vincent and the Grenadines (+1)
  • Samoa (+685)
  • San Marino (+378)
  • Sao Tome and Principe (+239)
  • Saudi Arabia (+966)
  • Senegal (+221)
  • Serbia (+381)
  • Seychelles (+248)
  • Sierra Leone (+232)
  • Singapore (+65)
  • Sint Maarten (+1)
  • Slovakia (+421)
  • Slovenia (+386)
  • Solomon Islands (+677)
  • Somalia (+252)
  • South Africa (+27)
  • South Korea (+82)
  • South Sudan (+211)
  • Spain (+34)
  • Sri Lanka (+94)
  • St. Lucia (+1)
  • Sudan (+249)
  • Suriname (+597)
  • Swaziland (+268)
  • Sweden (+46)
  • Switzerland (+41)
  • Syria (+963)
  • Taiwan (+886)
  • Tajikistan (+992)
  • Tanzania (+255)
  • Thailand (+66)
  • The Bahamas (+1)
  • The Gambia (+220)
  • Timor-Leste (+670)
  • Togo (+228)
  • Tokelau (+690)
  • Tonga (+676)
  • Trinidad and Tobago (+1)
  • Tunisia (+216)
  • Turkey (+90)
  • Turkmenistan (+993)
  • Turks and Caicos Islands (+1)
  • Tuvalu (+688)
  • U.S. Virgin Islands (+1)
  • Uganda (+256)
  • Ukraine (+380)
  • United Arab Emirates (+971)
  • United Kingdom (+44)
  • United States (+1)
  • Uruguay (+598)
  • Uzbekistan (+998)
  • Vanuatu (+678)
  • Venezuela (+58)
  • Vietnam (+84)
  • Wallis and Futuna (+681)
  • Western Sahara (+212)
  • Yemen (+967)
  • Zambia (+260)
  • Zimbabwe (+263)
ورود
با شماره موبایل
آیا هنوز عضو نشده اید؟ اکنون ثبت نام کنید
ثبت نام
قبلا عضو شده اید؟ اکنون وارد شوید
محافظت شده توسط