فصل ۵: ساختارهای شرطی در جاوااسکریپت

اموزش رایگان جاوا اسکریپت از مقدماتی تا متوسط

مقدمه: شرط‌ها، ابزار تصمیم‌گیری هوشمند در برنامه‌نویسی

یکی از پایه‌ای‌ترین توانایی‌های هر برنامه، گرفتن تصمیم بر اساس شرایط محیطی است. همان‌طور که انسان‌ها در زندگی روزمره براساس شرایط تصمیم می‌گیرند (مثلاً اگر باران ببارد، چتر بردار)، برنامه‌ها نیز باید بتوانند در سناریوهای مختلف به‌درستی رفتار کنند. این دقیقاً کاری است که با استفاده از ساختارهای شرطی (Conditional Structures) در جاوااسکریپت انجام می‌دهیم.

در این فصل، با تمامی روش‌های تصمیم‌گیری در جاوااسکریپت از ساده‌ترین تا پیشرفته‌ترین، از جمله ساختار شرطی if, else if, else, عملگر شرطی (Ternary Operator)، و switch آشنا می‌شویم. همچنین، نکات مهم، اشتباهات رایج، نکات سئو و تمرین‌های عملی را هم بررسی خواهیم کرد.

۱. دستور شرطی if: ابتدایی، قوی و همه‌کاره

۱.۱. ساختار پایه if

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

let isRaining = true;

if (isRaining) {
  console.log("چتر بردار!");
}

خروجی:

چتر بردار!

نکته کلیدی:
همیشه شرط را داخل پرانتز قرار دهید (if (شرط))! بدون پرانتز، خطای syntax خواهید گرفت.

۱.۲. ترکیب if … else : دو راهی ساده

اگر بخواهید دو مسیر داشته باشید، از else استفاده کنید:

let temp = 10;

if (temp < 20) {
  console.log("هوا سرده!");
} else {
  console.log("هوا خوبه!");
}

خروجی:

هوا سرده!

اگر temp را به ۲۵ تغییر دهید، خروجی خواهد بود:

هوا خوبه!

۱.۳. if … else if … else : تصمیم‌گیری بین چند حالت

وقتی موقعیت‌های بیشتری باید بررسی شوند، از سلسله if / else if / else کمک بگیرید:

let score = 15;

if (score > 18) {
  console.log("عالی!");
} else if (score > 10) {
  console.log("خوبه.");
} else {
  console.log("نیاز به تلاش بیشتر داری.");
}

خروجی:

خوبه.

۲. عملگر شرطی (Ternary Operator): تصمیم‌گیری کوتاه و سریع

اگر با سناریو ساده‌ای روبرو هستید که فقط دو حالت (درست/غلط) دارد، می‌توانید از عملگر شرطی سه‌گانه (?:) استفاده کنید. این عملگر به شکل خلاصه، معادل یک if…else کوچک است:

let age = 17;
let message = (age >= 18) ? "ورود مجاز" : "ورود ممنوع";
console.log(message);

خروجی:

ورود ممنوع

ساختار کلی:

شرط ? مقدار اگر درست : مقدار اگر غلط

مثال بیشتر:

let isMember = false;
let greeting = isMember ? "خوش‌آمدید عضو عزیز!" : "خوش‌آمدید مهمان!";
console.log(greeting);
// خروجی: خوش‌آمدید مهمان!

۳. ساختار شرطی switch: انتخاب از بین چند گزینه

وقتی می‌خواهید یک مقدار را با چند مقدار ثابت مقایسه و تصمیم‌گیری کنید (مثلاً انتخاب نام‌روز بر اساس عدد)، switch بسیار مناسب است و کد شما را مرتب و خوانا می‌کند.

ساختار عمومی switch

let day = 3;

switch (day) {
  case 1:
    console.log("شنبه");
    break;
  case 2:
    console.log("یکشنبه");
    break;
  case 3:
    console.log("دوشنبه");
    break;
  default:
    console.log("روز نامشخص!");
}

خروجی:

دوشنبه

نکات مهم درباره switch

  • حتماً در پایان هر گزینه (case) از break استفاده کنید تا برنامه پس از یافتن تطبیق، از switch خارج شود.
  • بخش default در انتهای switch برای حالتی است که هیچ گزینه‌ای تطبیق نیافت.
  • امکان مقایسه مقادیر متنی و عددی (String یا Number) هر دو وجود دارد.

مثال: رنگ به فارسی

let color = "red";
switch (color) {
  case "red":
    console.log("قرمز");
    break;
  case "blue":
    console.log("آبی");
    break;
  case "green":
    console.log("سبز");
    break;
  default:
    console.log("رنگ نامشخص!");
}

خروجی:

قرمز

۴. نکات پیشرفته و کاربردی در شرط‌ها

۴.۱. استفاده از عملگرهای منطقی در شرط‌ها

شما می‌توانید شرط‌های ترکیبی بنویسید:

let weather = "rain";
let temp = 15;
if (weather === "rain" && temp < 20) {
  console.log("هوای بارانی و خنک! چتر بردار.");
}

۴.۲. مقایسه دقیق (===) یا مقایسه معمولی (==)؟

همیشه توصیه می‌شود از === برای مقایسه نوع و مقدار باهم استفاده کنید تا خطاهای ناخواسته رخ ندهد.

۴.۳. تبدیل شرط به متغیر بولین:

let isMinor = (age < 18);
if(isMinor) {...}

۵. اشتباهات رایج مبتدیان در شرط‌ها

  1. فراموش کردن پرانتز شرط در if
    اشتباه: if temp < 20 { ... }
    درست: if (temp < 20) { ... }
  2. استفاده نکردن از break در switch
    باعث اجرای پشت‌سرهم caseها می‌شود.
  3. استفاده اشتباه از = (نسبت‌دهی) بجای == یا === (مقایسه)
    if (x = 10) مقداردهی می‌کند؛ همیشه برای مقایسه از == یا === استفاده کنید!
  4. عدم استفاده از default در switch
    بخش پیش‌فرض را فراموش نکنید تا اگر مقدار هیچ case نبود، نتیجه مناسبی داشته باشید.
  5. بی‌توجهی به بزرگی و کوچکی حروف در مقایسه رشته‌ها
    “red” !== “Red”

۶. تفاوت if و switch، کی کدام را استفاده کنیم؟

  • اگر تعداد گزینه‌ها زیاد باشد و فقط مساوی بودن برایتان مهم باشد (مثلاً انتخاب روز هفته یا رنگ)، switch خواناتر است.
  • برای مقایسه های شرطی پیچیده‌تر (بزرگتر، کوچکتر، چند شرط)، فقط if-else-s مناسب است.
  • اگر فقط دو حالت و شرط ساده دارید، عملگر شرطی (؟:) گزینه خوبی ست.

۷. تمرین و مثال عملی با جواب

تمرین ۱: سن و وضعیت “بالغ” بودن

let age = 15;
if (age < 18) {
  console.log("نابالغ هستی.");
} else {
  console.log("بالغ شدی!");
}
// تست برای مقادیر مختلف age

تمرین ۲: رنگ به فارسی با switch

let color = "قرمز";
switch (color) {
  case "قرمز":
    console.log("Red");
    break;
  case "آبی":
    console.log("Blue");
    break;
  case "سبز":
    console.log("Green");
    break;
  default:
    console.log("رنگ ناشناخته است.");
}

تمرین ۳: استفاده از Ternary برای وضعیت ورود

let userAge = 19;
let access = (userAge >= 18) ? "ورود مجاز" : "ورود ممنوع";
console.log(access);

تمرین ۴: شرط تو در تو (Nested if)

کد زیر با توجه به سن و عضویت پیام مناسب را نمایش می‌دهد:

let age = 20;
let isMember = true;
if (age >= 18) {
    if (isMember) {
        console.log("عضو بالغ. خوش‌آمدید!");
    } else {
        console.log("بالغ اما عضو نیستید!");
    }
} else {
    console.log("دسترسی ندارید.");
}

منابع تکمیلی برای مطالعه بیشتر

جمع‌بندی فصل پنجم

  • با ساختارهای شرطی + نکات و تفاوت‌هایشان در جاوااسکریپت آشنا شدیم.
  • دانستیم هر ساختار چه کاربردی دارد و در چه حالتی مناسب است.
  • تمرین‌های عملی نوشتیم.
  • در فصل بعد با حلقه‌ها (loops) آشنا خواهیم شد تا کارهای تکراری را خیلی حرفه‌ای انجام دهیم!

هر سوال یا ابهامی داشتی همینجا بپرس یا مثال بنویس تا باهم بررسی کنیم!

محمد وب‌سایت
مطالب مشابه

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *