استفاده از قدرت توابع / Functions در جاوا اسکریپت

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

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

تعریف توابع

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

function functionName(parameters) {   // Code to be executed }

• functionName نام تابع است.
• پارامترها نام ورودی هایی هستند که تابع می پذیرد و با کاما از هم جدا شده اند.
• بلوک کد داخل پرانتزهای فرفری {} هنگام فراخوانی تابع اجرا می شود.

function greet(name) {   console.log(`Hello, ${name}!`); }

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

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

greet('Alice'); // Output: Hello, Alice!

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

پارامترها متغیرهایی هستند که به عنوان مکان نگهدار برای مقادیر ارسال شده به تابع عمل می کنند. مقادیر واقعی ارائه شده هنگام فراخوانی یک تابع به عنوان آرگومان شناخته می شوند.

function add(a, b) {   return a + b; } const sum = add(5, 3); console.log(sum); // Output: 8

محدوده عملکرد – Function Scope

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

function showName() {   const name = 'Alice'; // local variable   console.log(name); } showName(); // Output: Alice // console.log(name); // ReferenceError: name is not defined

با غواصی در قلمرو توابع جاوا اسکریپت، با یک مفهوم محوری مواجه می شویم: scope. این مفهوم نقش مهمی در ساختار و امنیت کد ما دارد. اساساً scope قابلیت مشاهده و دسترسی متغیرها و توابع را در بخش‌های مختلف کد ما تعریف می‌کند.

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

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

Best Practices

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

توابع ناشناس و عبارات تابع – Anonymous Functions

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

const sayGoodbye = function(name) {   console.log(`Goodbye, ${name}!`); }; sayGoodbye('Bob'); // Output: Goodbye, Bob!

توابع ناشناس اغلب به عنوان پارامتر به توابع دیگر ارسال می شوند، مانند addEventListener:

textBox.addEventListener("keydown", function (event) {   console.log(`You pressed "${event.key}".`); });

توابع پیکان – Arrow Functions

ES6 توابع فلش را معرفی کرد، روشی مختصر برای نوشتن توابع در جاوا اسکریپت. توابع پیکان مخصوصاً برای توابع درون خطی و فراخوانی مفید هستند.

const multiply = (a, b) => a * b; console.log(multiply(2, 3)); // Output: 6

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

یک مثال عملی توابع

بیایید یک مثال عملی بسازیم که نشان می دهد چگونه توابع جاوا اسکریپت با HTML و CSS تعامل دارند. ما یک برنامه وب ساده ایجاد خواهیم کرد که در آن کاربران می توانند نام خود را وارد کنند و با کلیک بر روی یک دکمه، یک تبریک شخصی ظاهر می شود.

ساختار HTML

<!DOCTYPE html> <html lang="en"> <head>   <meta charset="UTF-8">   <meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Greeting Example</title>   <link rel="stylesheet" href="style.css"> </head> <body>   <input id="nameInput" type="text" placeholder="Enter your name" />   <button id="greetBtn">Greet Me!</button>   <p id="greetingText"></p>   <script src="script.js"></script> </body> </html>

CSS Style

body {   font-family: Arial, sans-serif;   margin: 20px;   background-color: #f4f4f4; } input, button {   padding: 10px;   margin-right: 10px;   border-radius: 5px;   border: 1px solid #ddd; } input { width: 200px; } button {   cursor: pointer;   background-color: #5cb85c;   color: white; } p { margin-top: 20px; }

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

document.addEventListener('DOMContentLoaded', () => {   const greetBtn = document.getElementById('greetBtn');   const nameInput = document.getElementById('nameInput');   const greetingText = document.getElementById('greetingText');    greetBtn.addEventListener('click', function() {     greetUser();   });    function greetUser() {     const name = nameInput.value;     if(name) {       greetingText.textContent = `Hello, ${name}! Welcome to our website.`;     } else {       greetingText.textContent = "Please enter your name.";     }   } });

توضیح گام به گام:

• HTML Setup: ساختار را با یک فیلد ورودی برای نام، یک دکمه و یک پاراگراف برای نمایش پیام تعریف می کند.
• CSS Styling: یک سبک ساده و کاربر پسند برای قسمت ورودی، دکمه و پاراگراف ارائه می دهد.
• منطق جاوا اسکریپت: Event Listener برای DOMContentLoaded اطمینان می دهد که جاوا اسکریپت فقط پس از بارگیری کامل سند HTML اجرا می شود.
• شنونده رویداد کلیک: هنگام کلیک کردن روی دکمه، تابع greetUser را فراخوانی می کند.
• greetUser Function: نام کاربر را از قسمت ورودی بازیابی می کند. اگر نامی ارائه شود، یک تبریک شخصی نمایش داده می شود.

با کپسوله کردن متغیرها و عملکردها در تابع greetUser، از تداخل احتمالی با سایر اسکریپت ها جلوگیری می کنیم و ساختار کد به خوبی سازماندهی شده را حفظ می کنیم.

مقدمه ای بر مقادیر بازگشتی تابع – Function Return Values

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

ارزش های بازگشتی / Return Values دقیقاً چیست؟

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

function calculateArea(width, height) {   return width * height; } let roomArea = calculateArea(10, 20); console.log(roomArea); // Outputs: 200

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

استفاده از مقادیر بازگشتی در توابع سفارشی

برای فعال کردن یک تابع برای برگرداندن یک مقدار، کلمه کلیدی return را به همراه مقدار یا عبارتی که می‌خواهید برگردانید وارد کنید.

function getRandom(max) {   return Math.floor(Math.random() * max); }  function drawCircles(circleCount) {   for (let i = 0; i < circleCount; i++) {     let x = getRandom(canvas.width);     let y = getRandom(canvas.height);     let radius = getRandom(50);     drawCircle(x, y, radius);   } }

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

کاربرد دنیای واقعی: تحلیل اعداد تعاملی

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

document.getElementById('numberInput').addEventListener('change', function() {   let num = parseFloat(this.value);   document.getElementById('analysisOutput').innerHTML = `     <p>${num} squared is ${square(num)}</p>     <p>${num} cubed is ${cube(num)}</p>     <p>Is ${num} prime? ${isPrime(num)}</p>   `; });  function square(n) { return n * n; } function cube(n) { return n * n * n; } function isPrime(n) {   if (n < 2) return 'No';   for (let i = 2; i < n; i++) {     if (n % i === 0) return 'No';   }   return 'Yes'; }

نتیجه‌گیری: ارزش‌های بازده

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

آزمون / Quiz