شرط‌ها و کنترل جریان در جاوااسکریپت

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

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

برای مثال:

• اگر سن کاربر حداقل ۱۸ سال بود، اجازه ورود بده.

• اگر رمز عبور صحیح بود، کاربر را وارد حساب کن.

• اگر موجودی محصول بیشتر از صفر بود، امکان خرید را نمایش بده.

• اگر امتیاز دانش‌آموز بیشتر از ۵۰ بود، وضعیت قبولی را نمایش بده.

• اگر کاربر وارد حساب نشده بود، صفحه ورود را نمایش بده.

برای انجام چنین کارهایی در جاوااسکریپت از شرط‌ها (Conditions) و مفهومی به نام کنترل جریان (Control Flow) استفاده می‌کنیم.

در این مقاله از پایه یاد می‌گیریم شرط چیست، چگونه از if استفاده کنیم، else و else if چه کاربردی دارند، چگونه چند شرط را ترکیب کنیم و چه زمانی از switch و عملگر شرطی استفاده کنیم.

کنترل جریان در جاوااسکریپت چیست؟

Control Flow به ترتیب اجرای دستورات در یک برنامه گفته می‌شود.

به‌صورت ساده، اگر چند دستور پشت سر هم داشته باشیم:

console.log("Step 1");
console.log("Step 2");
console.log("Step 3");

جاوااسکریپت آن‌ها را به ترتیب اجرا می‌کند.

نتیجه:

Step 1
Step 2
Step 3

اما گاهی نمی‌خواهیم تمام دستورات اجرا شوند.

مثلاً می‌خواهیم بگوییم:

اگر شرط درست بود
    این کار را انجام بده
در غیر این صورت
    کار دیگری انجام بده

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

شرط چیست؟

Condition یا شرط عبارتی است که نتیجه آن معمولاً true یا false است.

مثلاً:

10 > 5

نتیجه:

true

اما:

10 < 5

نتیجه:

false

می‌توانیم از این نتیجه برای تصمیم‌گیری در برنامه استفاده کنیم.

دستور if در جاوااسکریپت

ساده‌ترین روش ایجاد شرط در جاوااسکریپت استفاده از if است.

ساختار کلی:

if (condition) {
    // Code
}

برای مثال:

let age = 20;

if (age >= 18) {
    console.log("You are an adult.");
}

در این مثال ابتدا بررسی می‌شود:

age >= 18

اگر نتیجه true باشد، کد داخل {} اجرا می‌شود.

خروجی:

You are an adult.

if چگونه کار می‌کند؟

می‌توانیم روند اجرای if را این‌گونه تصور کنیم:

Condition
    ↓
  true?
  /   \
Yes    No
 ↓      ↓
Run   Skip
Code   Code

اگر شرط درست باشد، دستورات داخل if اجرا می‌شوند.

اگر شرط نادرست باشد، آن دستورات اجرا نمی‌شوند.

مثال ساده با if

let score = 80;

if (score >= 50) {
    console.log("Passed");
}

چون 80 >= 50 برابر true است، خروجی:

Passed

خواهد بود.

اما اگر بنویسیم:

let score = 30;

if (score >= 50) {
    console.log("Passed");
}

هیچ چیزی در Console نمایش داده نمی‌شود؛ چون شرط false است.

استفاده از else

گاهی می‌خواهیم اگر شرط درست نبود، یک کار دیگر انجام شود.

برای این کار از else استفاده می‌کنیم.

ساختار:

if (condition) {
    // If condition is true
} else {
    // If condition is false
}

مثال:

let age = 16;

if (age >= 18) {
    console.log("You can enter.");
} else {
    console.log("You cannot enter.");
}

چون سن 16 است، شرط age >= 18 نادرست است.

بنابراین خروجی:

You cannot enter.

if و else در یک مثال واقعی

فرض کنید می‌خواهیم وضعیت قبولی یک دانش‌آموز را بررسی کنیم:

let score = 75;

if (score >= 50) {
    console.log("You passed.");
} else {
    console.log("You failed.");
}

اگر امتیاز ۷۵ باشد:

You passed.

اگر امتیاز را به ۴۰ تغییر دهیم:

let score = 40;

if (score >= 50) {
    console.log("You passed.");
} else {
    console.log("You failed.");
}

خروجی:

You failed.

استفاده از else if

گاهی فقط دو حالت نداریم.

مثلاً می‌خواهیم بر اساس نمره، سه وضعیت داشته باشیم:

• ۸۰ به بالا → عالی

• ۵۰ تا ۷۹ → قبول

• کمتر از ۵۰ → مردود

برای چنین شرایطی می‌توانیم از else if استفاده کنیم.

let score = 75;

if (score >= 80) {
    console.log("Excellent");
} else if (score >= 50) {
    console.log("Passed");
} else {
    console.log("Failed");
}

خروجی:

Passed

چند else if

می‌توانیم چند شرط پشت سر هم داشته باشیم.

مثلاً:

let score = 92;

if (score >= 90) {
    console.log("Grade A");
} else if (score >= 80) {
    console.log("Grade B");
} else if (score >= 70) {
    console.log("Grade C");
} else if (score >= 60) {
    console.log("Grade D");
} else {
    console.log("Grade F");
}

چون امتیاز 92 است، اولین شرط درست خواهد بود.

خروجی:

Grade A

ترتیب شرط‌ها مهم است

ترتیب if و else if اهمیت زیادی دارد.

مثلاً:

let score = 95;

if (score >= 50) {
    console.log("Passed");
} else if (score >= 90) {
    console.log("Excellent");
}

در اینجا شرط اول برای امتیاز ۹۵ درست است؛ بنابراین جاوااسکریپت همان بخش اول را اجرا می‌کند و دیگر به else if نمی‌رسد.

بهتر است شرط‌های دقیق‌تر را قبل از شرط‌های عمومی‌تر قرار دهیم:

let score = 95;

if (score >= 90) {
    console.log("Excellent");
} else if (score >= 50) {
    console.log("Passed");
} else {
    console.log("Failed");
}

نتیجه:

Excellent

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

در مقاله قبل با عملگرهای مقایسه‌ای آشنا شدیم.

این عملگرها در شرط‌ها بسیار کاربردی هستند:

>
<
>=
<=
===
!==

مثلاً:

let age = 25;

if (age > 18) {
    console.log("Adult");
}

یا:

let password = "1234";

if (password === "1234") {
    console.log("Correct password");
}

استفاده از عملگر AND در شرط

گاهی می‌خواهیم چند شرط هم‌زمان درست باشند.

در این حالت از && استفاده می‌کنیم.

مثال:

let age = 25;
let hasTicket = true;

if (age >= 18 && hasTicket === true) {
    console.log("You can enter.");
}

برای اجرای کد داخل if، هر دو شرط باید درست باشند:

age >= 18
AND
hasTicket === true

استفاده از عملگر OR در شرط

اگر کافی باشد حداقل یکی از شرایط درست باشد، از || استفاده می‌کنیم.

مثال:

let isAdmin = false;
let isManager = true;

if (isAdmin || isManager) {
    console.log("Access granted.");
}

چون isManager برابر true است، شرط کلی true خواهد بود.

استفاده از NOT در شرط

با ! می‌توانیم نتیجه Boolean را معکوس کنیم.

مثلاً:

let isLoggedIn = false;

if (!isLoggedIn) {
    console.log("Please login.");
}

چون isLoggedIn برابر false است، !isLoggedIn برابر true می‌شود.

در نتیجه:

Please login.

نمایش داده می‌شود.

شرط تو در تو

گاهی لازم است یک شرط را داخل شرط دیگر قرار دهیم.

به این حالت Nested Condition گفته می‌شود.

مثال:

let age = 25;
let hasTicket = true;

if (age >= 18) {

    if (hasTicket) {
        console.log("You can enter.");
    }

}

در این مثال ابتدا سن بررسی می‌شود.

اگر سن مناسب باشد، سپس وجود بلیت بررسی می‌شود.

اگر هر دو شرط برقرار باشند، پیام نمایش داده می‌شود.

برای مثال‌های ساده Nested if قابل استفاده است، اما در پروژه‌های بزرگ باید مراقب پیچیده شدن شرط‌های تو در تو باشیم.

ترکیب چند شرط

می‌توانیم چند عملگر منطقی را نیز ترکیب کنیم.

مثلاً:

let age = 25;
let isMember = true;
let hasTicket = true;

if (age >= 18 && isMember && hasTicket) {
    console.log("Access granted.");
}

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

Age is valid
    AND
User is a member
    AND
User has a ticket

فقط زمانی پیام نمایش داده می‌شود که همه آن‌ها true باشند.

استفاده از شرط برای بررسی مقدار String

شرط‌ها فقط برای اعداد نیستند.

می‌توانیم Stringها را نیز مقایسه کنیم.

مثلاً:

let username = "admin";

if (username === "admin") {
    console.log("Welcome Admin");
}

خروجی:

Welcome Admin

مثال عملی: سیستم ورود ساده

فرض کنید یک نام کاربری و رمز عبور داریم:

let username = "admin";
let password = "12345";

if (username === "admin" && password === "12345") {
    console.log("Login successful.");
} else {
    console.log("Invalid username or password.");
}

اگر هر دو مقدار درست باشند:

Login successful.

در غیر این صورت:

Invalid username or password.

این یک مثال آموزشی ساده است. در یک سیستم واقعی، رمز عبور نباید به این شکل داخل کد نوشته شود و احراز هویت نیازمند روش‌های امن سمت سرور است.

شرط با Boolean

اگر یک متغیر خودش Boolean باشد، معمولاً لازم نیست آن را با true مقایسه کنیم.

مثلاً این کد:

let isLoggedIn = true;

if (isLoggedIn === true) {
    console.log("Welcome");
}

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

let isLoggedIn = true;

if (isLoggedIn) {
    console.log("Welcome");
}

هر دو روش می‌توانند نتیجه یکسانی داشته باشند.

برای false نیز می‌توانیم از ! استفاده کنیم:

let isLoggedIn = false;

if (!isLoggedIn) {
    console.log("Please login.");
}

Truthy و Falsy چیست؟

در جاوااسکریپت همه مقادیر فقط به شکل ساده true یا false رفتار نمی‌کنند.

برخی مقادیر در یک Context شرطی مانند false در نظر گرفته می‌شوند. به این مقادیر Falsy می‌گوییم.

مقادیر مهم Falsy شامل موارد زیر هستند:

false
0
""
null
undefined
NaN

برای مثال:

let username = "";

if (username) {
    console.log("Username exists.");
} else {
    console.log("Username is empty.");
}

چون username یک String خالی است، شرط false در نظر گرفته می‌شود.

خروجی:

Username is empty.

در مقابل، بسیاری از مقادیر دیگر Truthy هستند.

مثلاً:

let username = "Ali";

if (username) {
    console.log("Username exists.");
}

خروجی:

Username exists.

مبحث Truthy و Falsy در جاوااسکریپت بسیار مهم است و در ادامه دوره با مثال‌های بیشتری آن را بررسی خواهیم کرد.

عملگر شرطی Ternary

در مقاله قبل با Ternary Operator آشنا شدیم.

این عملگر برای شرایط کوتاه می‌تواند مفید باشد.

ساختار:

condition ? valueIfTrue : valueIfFalse

مثال:

let age = 20;

let message = age >= 18 ? "Adult" : "Minor";

console.log(message);

خروجی:

Adult

می‌توان این کد را تقریباً معادل این ساختار در نظر گرفت:

let age = 20;
let message;

if (age >= 18) {
    message = "Adult";
} else {
    message = "Minor";
}

console.log(message);

برای شرایط بسیار ساده، Ternary می‌تواند کد را کوتاه‌تر کند.

چه زمانی از if استفاده کنیم؟

برای مبتدیان یک قانون ساده بسیار مفید است:

اگر تصمیم‌گیری شما چند مرحله‌ای یا دارای چند شرط است، معمولاً if / else if / else خواناتر است.

مثلاً:

if (score >= 90) {
    console.log("A");
} else if (score >= 70) {
    console.log("B");
} else {
    console.log("C");
}

اما برای یک انتخاب ساده می‌توان از Ternary استفاده کرد:

let status = age >= 18 ? "Adult" : "Minor";

دستور switch چیست؟

گاهی می‌خواهیم یک مقدار را با چند مقدار مشخص مقایسه کنیم.

برای مثال می‌خواهیم بر اساس شماره روز هفته پیام متفاوتی نمایش دهیم.

در چنین شرایطی switch می‌تواند مناسب باشد.

ساختار کلی:

switch (value) {
    case value1:
        // Code
        break;

    case value2:
        // Code
        break;

    default:
        // Code
}

مثال:

let day = 3;

switch (day) {
    case 1:
        console.log("Saturday");
        break;

    case 2:
        console.log("Sunday");
        break;

    case 3:
        console.log("Monday");
        break;

    default:
        console.log("Unknown day");
}

خروجی:

Monday

break در switch چیست؟

کلمه کلیدی break به جاوااسکریپت می‌گوید که بعد از اجرای Case مربوطه از switch خارج شود.

مثلاً:

let number = 1;

switch (number) {
    case 1:
        console.log("One");
        break;

    case 2:
        console.log("Two");
        break;

    default:
        console.log("Other");
}

اگر break را حذف کنیم، ممکن است جاوااسکریپت وارد Caseهای بعدی نیز شود.

فعلاً کافی است هنگام استفاده از switch با مفهوم break آشنا باشید. در مقاله مربوط به حلقه‌ها، break و continue را دقیق‌تر بررسی خواهیم کرد.

default در switch

اگر هیچ‌کدام از Caseها مطابقت نداشته باشند، بخش default اجرا می‌شود.

مثلاً:

let day = 10;

switch (day) {
    case 1:
        console.log("Saturday");
        break;

    case 2:
        console.log("Sunday");
        break;

    default:
        console.log("Invalid day");
}

خروجی:

Invalid day

مثال عملی: سیستم سطح کاربر

فرض کنید یک برنامه ساده داریم که بر اساس سطح کاربر، پیام مناسب را نمایش می‌دهد.

let role = "admin";

if (role === "admin") {
    console.log("You have full access.");
} else if (role === "editor") {
    console.log("You can edit content.");
} else if (role === "user") {
    console.log("You have normal access.");
} else {
    console.log("Unknown role.");
}

اگر role برابر "admin" باشد:

You have full access.

مثال عملی: محاسبه هزینه ارسال

فرض کنید هزینه ارسال بر اساس مبلغ خرید مشخص شود.

let totalPrice = 800000;

if (totalPrice >= 1000000) {
    console.log("Free shipping");
} else {
    console.log("Shipping fee: 100000");
}

چون مبلغ کمتر از یک میلیون است:

Shipping fee: 100000

این مثال نشان می‌دهد چگونه شرط‌ها می‌توانند منطق واقعی یک برنامه را کنترل کنند.

تفاوت if و switch

به‌صورت ساده:

مثلاً بررسی بازه نمره:

if (score >= 90) {
    // ...
} else if (score >= 70) {
    // ...
}

برای این نوع شرایط، if مناسب‌تر است.

اما برای مقدارهای مشخص:

switch (role) {
    case "admin":
        // ...
        break;

    case "user":
        // ...
        break;
}

switch می‌تواند انتخاب مناسبی باشد.

اشتباهات رایج در شرط‌ها

استفاده از = به جای ===

این اشتباه رایج است:

if (age = 18) {
    // ...
}

در اینجا = برای انتساب استفاده شده است.

برای مقایسه بهتر است از:

if (age === 18) {
    // ...
}

استفاده کنیم.

فراموش کردن آکولادها

ممکن است در جاوااسکریپت بتوان برخی شرط‌های یک‌خطی را بدون {} نوشت:

if (age >= 18)
    console.log("Adult");

اما برای مبتدیان و همچنین خوانایی بهتر، توصیه می‌شود از آکولاد استفاده کنید:

if (age >= 18) {
    console.log("Adult");
}

پیچیده کردن بیش از حد شرط‌ها

این کد برای یک مبتدی ممکن است بسیار سخت باشد:

if (age >= 18 && isMember && hasTicket && !isBlocked && country === "IR") {
    // ...
}

اگر منطق برنامه پیچیده شد، بهتر است آن را به چند قسمت کوچک‌تر تقسیم کنیم.

تمرین عملی

تمرین ۱: بررسی سن

متغیری به نام age ایجاد کنید.

اگر سن ۱۸ یا بیشتر بود، پیام زیر را نمایش دهید:

You can enter.

در غیر این صورت:

You cannot enter.

تمرین ۲: قبولی دانش‌آموز

متغیر زیر را ایجاد کنید:

let score = 75;

اگر امتیاز حداقل ۵۰ بود، پیام Passed و در غیر این صورت Failed را نمایش دهید.

تمرین ۳: سطح امتیاز

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

90 - 100 → Excellent
70 - 89  → Good
50 - 69  → Average
Below 50 → Failed

را نمایش دهد.

تمرین ۴: ورود کاربر

متغیرهای زیر را ایجاد کنید:

let username = "admin";
let password = "12345";

اگر هر دو مقدار صحیح بودند:

Login successful.

و در غیر این صورت:

Invalid username or password.

تمرین ۵: دسترسی

سه متغیر ایجاد کنید:

let isLoggedIn = true;
let isAdmin = false;
let isMember = true;

با استفاده از && و || بررسی کنید که آیا کاربر می‌تواند به یک بخش خاص از سایت دسترسی داشته باشد یا خیر.

چالش عملی

یک برنامه ساده برای بررسی قیمت محصول و تخفیف ایجاد کنید.

مثلاً:

let price = 1200000;

قوانین:

اگر قیمت >= 1000000 → 20% تخفیف
اگر قیمت >= 500000  → 10% تخفیف
در غیر این صورت     → بدون تخفیف

سپس مبلغ نهایی را محاسبه و در Console نمایش دهید.

سعی کنید این تمرین را ابتدا خودتان حل کنید و از if / else if / else استفاده کنید.

جمع‌بندی

در این مقاله با شرط‌ها و کنترل جریان در جاوااسکریپت آشنا شدیم.

یاد گرفتیم که برنامه‌ها برای تصمیم‌گیری از Conditionها استفاده می‌کنند و نتیجه یک شرط معمولاً true یا false است.

با if یاد گرفتیم چگونه یک دستور را فقط در صورت درست بودن یک شرط اجرا کنیم.

با else حالت مخالف شرط را مدیریت کردیم و با else if چند حالت مختلف ایجاد کردیم.

همچنین یاد گرفتیم که می‌توانیم با استفاده از:

&&
||
!

چند شرط را با یکدیگر ترکیب کنیم.

با Ternary Operator برای شرایط کوتاه و با switch برای مقایسه یک مقدار با گزینه‌های مشخص آشنا شدیم.

همچنین مفهوم اولیه Truthy و Falsy را یاد گرفتیم که یکی از مفاهیم مهم جاوااسکریپت است.