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

مقدمه

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

تعریف تابع

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

function sayHello() {
  console.log("Hello!");
}

همچنین می‌توانیم از const یا let برای تعریف یک تابع استفاده کنیم. این روش‌ها مخصوصاً برای تعریف توابع Arrow (که بعداً توضیح داده می‌شود) مفید هستند:

const sayGoodbye = function() {
  console.log("Goodbye!");
}

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

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

sayHello(); // Output: Hello!

function add(a, b) {
  console.log(a + b);
}

add(5, 3); // Output: 8

پارامترها و آرگومان‌ها

• پارامترها (Parameters): متغیرهایی هستند که در تعریف تابع قرار می‌گیرند و مقادیری را که به تابع پاس داده می‌شود، دریافت می‌کنند. پارامترها در داخل پرانتزهای تابع تعریف می‌شوند.
• آرگومان‌ها (Arguments): مقادیری هستند که هنگام فراخوانی تابع به آن پاس داده می‌شوند. این مقادیر به ترتیب به پارامترهای تعریف‌شده در تابع اختصاص داده می‌شوند.

function greet(name) { // name یک پارامتر است
  console.log("Hello, " + name + "!");
}

greet("Alice"); // "Alice" یک آرگومان است

مقادیر بازگشتی

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

function multiply(a, b) {
  return a * b;
}

const result = multiply(4, 6); // result برابر با 24 خواهد بود
console.log(result); // Output: 24

توابع به عنوان مقادیر

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

const add = function(a, b) {
  return a + b;
}

function calculate(func, a, b) {
  return func(a, b);
}

const sum = calculate(add, 10, 5); // sum برابر با 15 خواهد بود
console.log(sum); // Output: 15

توابع Arrow

توابع Arrow (Arrow functions) یک سینتکس مختصرتر برای تعریف توابع در جاوااسکریپت هستند. ساختار کلی آن‌ها به این صورت است:

const functionName = (parameters) => { /* function body */ }

اگر تابع Arrow تنها یک عبارت داشته باشد، می‌توان از return و آکولادها ({}) صرف‌نظر کرد:

const square = x => x * x;

console.log(square(4)); // Output: 16

توابع تو در تو (Nested Functions)

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

function outerFunction(outerParam) {
  const outerVar = "Hello";

  function innerFunction(innerParam) {
    console.log(outerVar + ", " + innerParam + ", " + outerParam);
  }

  innerFunction("World");
}

outerFunction("!"); // Output: Hello, World, !

Closure

Closure یکی از مفاهیم مهم در جاوااسکریپت است. یک Closure به این معناست که یک تابع داخلی می‌تواند به متغیرهای تابع بیرونی (و همچنین متغیرهای سراسری) دسترسی داشته باشد، حتی پس از اینکه تابع بیرونی اجرای خود را به پایان رسانده باشد.

function outerFunction() {
  let outerVar = "Hello";

  function innerFunction() {
    console.log(outerVar);
  }

  return innerFunction;
}

const myClosure = outerFunction();
myClosure(); // Output: Hello

در این مثال، innerFunction یک Closure است، زیرا به outerVar که در outerFunction تعریف شده است، دسترسی دارد، حتی پس از اینکه outerFunction اجرا شده و به پایان رسیده است.

توابع بازگشتی (Recursive Functions)

یک تابع بازگشتی، تابعی است که خودش را فراخوانی می‌کند. این تکنیک معمولاً برای حل مسائلی که می‌توانند به زیرمسائل مشابه تقسیم شوند، استفاده می‌شود. یک مثال کلاسیک، محاسبه فاکتوریل یک عدد است:

function factorial(n) {
  if (n === 0) {
    return 1;
  } else {
    return n * factorial(n - 1);
  }
}

console.log(factorial(5)); // Output: 120

در این مثال، تابع factorial خودش را برای محاسبه فاکتوریل اعداد کوچکتر فراخوانی می‌کند تا زمانی که به شرط پایه (n === 0) برسد.

کاربردهای عملی

توابع در جاوااسکریپت در موقعیت‌های مختلفی کاربرد دارند. در اینجا چند مثال آورده شده است:

• محاسبات: انجام عملیات ریاضی، مانند جمع، تفریق، ضرب، تقسیم و … .
• اعتبارسنجی ورودی: بررسی صحت داده‌های ورودی کاربر (مثلاً بررسی ایمیل معتبر، رمز عبور قوی).
• کار با DOM: دستکاری عناصر صفحه وب (اضافه کردن، حذف کردن، تغییر دادن المان‌ها).
• مدیریت رویدادها: پاسخ به رویدادهایی مانند کلیک، hover و … .

نکات تکمیلی و بهترین شیوه‌ها

• نام‌گذاری مناسب: از نام‌های توصیفی و معنادار برای توابع استفاده کنید. این کار خوانایی کد را افزایش می‌دهد.
• کامنت‌گذاری: برای توضیح عملکرد توابع از کامنت استفاده کنید. این کار به دیگران (و خودتان در آینده) کمک می‌کند تا کد را درک کنند.
• حداکثر یک کار: سعی کنید هر تابع فقط یک کار خاص را انجام دهد. این کار باعث می‌شود توابع شما قابل استفاده مجدد و تست‌پذیر باشند.
• استفاده از const: تا حد امکان از const برای تعریف توابع استفاده کنید.
• استفاده از توابع Arrow: برای کوتاه کردن و خواناتر کردن کد، از توابع Arrow استفاده کنید (در صورت امکان).

جمع‌بندی

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

پروژه‌های عملی

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

پروژه 1: ماشین حساب ساده

این پروژه یک ماشین حساب ساده ایجاد می‌کند که عملیات جمع، تفریق، ضرب و تقسیم را انجام می‌دهد.

function add(a, b) {
  return a + b;
}

function subtract(a, b) {
  return a - b;
}

function multiply(a, b) {
  return a * b;
}

function divide(a, b) {
  if (b === 0) {
    return "Error: Division by zero";
  }
  return a / b;
}

let num1 = parseFloat(prompt("عدد اول را وارد کنید:"));
let num2 = parseFloat(prompt("عدد دوم را وارد کنید:"));
let operator = prompt("عملگر را وارد کنید (+, -, *, /):");

let result;
switch (operator) {
  case '+':
    result = add(num1, num2);
    break;
  case '-':
    result = subtract(num1, num2);
    break;
  case '*':
    result = multiply(num1, num2);
    break;
  case '/':
    result = divide(num1, num2);
    break;
  default:
    result = "Error: Invalid operator";
}

console.log("نتیجه: " + result);

پروژه 2: اعتبارسنجی فرم

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

function isValidName(name) {
  return name.length > 2 && /^[a-zA-Z\s]+$/.test(name);
}

function isValidEmail(email) {
  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
}

function isValidPhone(phone) {
  return /^\d{11}$/.test(phone); //  برای شماره تلفن 11 رقمی ایران
}

let name = prompt("نام خود را وارد کنید:");
let email = prompt("ایمیل خود را وارد کنید:");
let phone = prompt("شماره تلفن خود را وارد کنید:");

if (isValidName(name) && isValidEmail(email) && isValidPhone(phone)) {
  console.log("اطلاعات وارد شده معتبر هستند.");
} else {
  console.log("اطلاعات وارد شده معتبر نیستند.");
}

پروژه 3: تغییر رنگ پس‌زمینه

این پروژه با کلیک روی یک دکمه، رنگ پس‌زمینه را به صورت تصادفی تغییر می‌دهد. برای این پروژه نیاز به کمی HTML و CSS نیز خواهید داشت.

<!DOCTYPE html>
<html>
<head>
<title>تغییر رنگ پس زمینه</title>
<style>
body {
  background-color: #ffffff; /* رنگ پیش‌فرض */
}
</style>
</head>
<body>
<button id="changeColor">تغییر رنگ</button>
<script>
function getRandomColor() {
  const letters = '0123456789ABCDEF';
  let color = '#';
  for (let i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}

const button = document.getElementById('changeColor');
button.addEventListener('click', () => {
  document.body.style.backgroundColor = getRandomColor();
});
</script>
</body>
</html>

پروژه 4: لیست انجام کارها (To-Do List)

این پروژه یک لیست ساده از کارهای انجام نشده را مدیریت می‌کند.

let tasks = [];

function addTask(task) {
  tasks.push(task);
}

function removeTask(index) {
  tasks.splice(index, 1);
}

function toggleTask(index) {
  tasks[index].completed = !tasks[index].completed;
}

// مثالی از نحوه استفاده
addTask({description: "خرید شیر", completed: false});
addTask({description: "رفتن به باشگاه", completed: true});
console.log(tasks);
removeTask(0);
console.log(tasks);
toggleTask(0);
console.log(tasks);

پروژه 5: شمارش معکوس

این پروژه یک شمارش معکوس از یک عدد مشخص تا صفر را نمایش می‌دهد.

function countdown(n) {
  if (n < 0) {
    return;
  }
  console.log(n);
  countdown(n - 1);
}

countdown(10);

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