هر برنامه مفیدی در نهایت به یک نقطه تصمیم‌گیری می‌رسد. آیا این دکمه باید فرم را ارسال کند یا خطا نشان دهد؟ آیا این کارب...

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

ساده‌ترین شاخه: if

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

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

const email = document.getElementById("email").value;

if (email === "") {
  alert("Please enter your email.");
}

بدون email خبری از ارسال نیست. منطق اینجا صریح و شفاف است. زمانی از if استفاده کنید که فقط یک مورد خاص برای محافظت وجود دارد و نیازی به اقدام جایگزین نیست.

مدیریت حالت «یا این یا آن»: if...else

اکثر تصمیمات واقعی دو جنبه دارند. جفت if...else دقیقاً همین کار را انجام می‌دهد. وقتی شرط درست باشد، یک بلاک اجرا می‌شود و وقتی نادرست باشد، بلاک دیگر اجرا می‌گردد. این دو مسیر مانعةالجمع هستند.

بررسی حالت تاریک (dark-mode) هنگام بارگذاری صفحه را تصور کنید:

const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;

if (prefersDark) {
  document.body.classList.add("dark");
} else {
  document.body.classList.add("light");
}

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

مسیرهای متعدد: if...else if...else

هر مشکلی دو حالته (binary) نیست. گاهی اوقات به نردبانی از احتمالات نیاز دارید. زنجیره if...else if...else به شما اجازه می‌دهد چندین شرط را به ترتیب آزمایش کنید. جاوااسکریپت آن‌ها را از بالا به پایین ارزیابی کرده و اولین بلاکی را که شرطش درست باشد، اجرا می‌کند. پس از آن تطابق، بقیه نردبان نادیده گرفته می‌شوند.

یک مثال کلاسیک، نگاشت یک نمره عددی به یک نمره حروف است:

const score = 87;
let grade;

if (score >= 90) {
  grade = "A";
} else if (score >= 80) {
  grade = "B";
} else if (score >= 70) {
  grade = "C";
} else {
  grade = "F";
}

در اینجا ترتیب اهمیت بسیار زیادی دارد. اگر قبل از score >= 90 شرط score >= 70 را چک کنید، تقریباً تمام نمرات قبولی در دسته C گیر می‌افتند، زیرا اولین تطابق درست برنده می‌شود. شرایط خود را از خاص‌ترین به عمومی‌ترین مرتب کنید و همیشه زنجیره را با یک else نهایی ببندید تا هر چیزی که از فیلتر عبور کرده را مدیریت کنید.

تطبیق مقادیر ثابت: switch

وقتی در حال مقایسه یک متغیر با لیستی از ثابت‌های شناخته شده هستید، یک زنجیره طولانی از if...else باعث شلوغی کد می‌شود. دستور switch فضا را خلوت می‌کند. این دستور یک عبارت را یک بار ارزیابی کرده و سپس آن را با برچسب‌های case با استفاده از برابری سخت‌گیرانه (===) مقایسه می‌کند. این کار باعث می‌شود وقتی گزینه‌ها مجزا و نام‌گذاری شده هستند، خواندن کد آسان‌تر شود.

تنظیم ساعات کاری فروشگاه بر اساس روز جاری را در نظر بگیرید:

const day = new Date().getDay();

switch (day) {
  case 0:
    console.log("Sunday hours: 10am - 4pm");
    break;
  case 6:
    console.log("Saturday hours: 9am - 6pm");
    break;
  default:
    console.log("Weekday hours: 8am - 8pm");
}

مراقب break باشید. اگر آن را ننویسید، اجرا به case بعدی سقوط کرده و به کار خود ادامه می‌دهد. این رفتار گاهی مفید است، اما در بیشتر موارد باعث ایجاد باگ‌های نامحسوس می‌شود. اگر به درستی استفاده شود، switch قصد شما را در یک نگاه آشکار می‌کند و شاخه‌های مرتبط را در یک ستون مرتب نگه می‌دارد.

تصمیم‌گیری‌های فشرده: عملگر سه‌گانه

عملگر سه‌گانه — که به صورت ? : نوشته می‌شود — یک عبارت (expression) است، نه یک دستور (statement). این تفاوت اهمیت دارد