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

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

بیشتر بخوانید: “مروری بر عملگرها و عبارات در جاوا اسکریپت“

عبارت if…else

if…else یکی از پرکاربردترین دستورات شرطی در زبان جاوا اسکریپت است. ساختار if…else به برنامه‌نویس این امکان را می‌دهد کد را بر اساس شرط (Condition) خاصی پیش ببرد. به‌طوری‌که اگر آن شرط درست باشد، کدی خاص اجرا شود و اگر شرط نادرست باشد، کدی دیگر.

ساختار پایه if…else به این صورت است:

if (condition) {   /* کدی که برای اجرا در صورت درست بودن شرط است */ } else {   /* کدی که برای اجرا در صورت درست نبودن شرط است */ } 

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

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

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

مثال if…else

برای درک بهتر مفهوم عبارت شرطی if…else به مثال زیر توجه کنید.

let x = 10; if (x > 5) {   console.log("x is greater than 5"); } else {   console.log("x is less than or equal to 5"); } 

در این کد، با استفاده از if…else، مقدار x بررسی و با عدد ۵ مقایسه می‌شود و نتیجه بررسی نمایش داده می‌شود.

عبارت else if

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

ساختار عبارت شرطی `else if` به شکل زیر است:

if (condition1) {   // اگر شرط اول درست باشد، این بلاک اجرا می‌شود } else if (condition2) {   // اگر شرط اول نادرست بود و شرط دوم درست باشد، این بلاک اجرا می‌شود } else if (condition3) {   // اگر هیچ‌کدام از شرط‌های قبلی درست نبودند و شرط سوم درست باشد، این بلاک اجرا می‌شود } else {   // اگر هیچ‌کدام از شرط‌های قبلی درست نبودند، این بلاک اجرا می‌شود } 

در این ساختار، ابتدا شرط اول بررسی می‌شود. اگر این شرط درست باشد، بلاک مربوط به آن اجرا می‌شود. اما اگر این شرط نادرست باشد، برنامه به شرط بعدی، یعنی `else if (condition2)` می‌رود و شرط دوم را بررسی می‌کند. این فرآیند ادامه می‌یابد تا زمانی که یکی از شروط درست باشد یا بلاک `else` برسد که در آن هیچ‌کدام از شروط درست نبوده‌اند.

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

مثال else if

فرض کنید می‌خواهیم برنامه‌ای بنویسیم که در آن کاربر یک عدد را وارد کند و بررسی کند که آن عدد مثبت، منفی یا صفر است. این کار را می‌توان با استفاده از else if در جاوا اسکریپت انجام داد:

let number = prompt("Please enter a number:"); // دریافت عدد از کاربر if (number > 0) {   console.log("The number is positive."); // اگر عدد مثبت باشد، پیام "عدد مثبت است" نمایش داده می‌شود } else if (number < 0) {   console.log("The number is negative."); // اگر عدد منفی باشد، پیام "عدد منفی است" نمایش داده می‌شود } else {   console.log("The number is zero."); // اگر عدد صفر باشد، پیام "عدد صفر است" نمایش داده می‌شود } 

در این کد، ابتدا کاربر عدد را وارد می‌کند. سپس با استفاده از else if، عدد وارد شده بررسی شده و پیام مربوط به آن را نمایش داده می‌شود: مثبت، منفی یا صفر.

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

عبارت switch…case

عبارت شرطی `switch…case` در جاوا اسکریپت برای انتخاب از بین چندین گزینه مختلف بر اساس مقدار یک متغیر مشخص استفاده می‌شود. این عبارت شامل یک متغیر کنترلی که مقدار آن بررسی می‌شود و یک سری از مقادیر ممکن (case) است که با مقدار آن متغیر مقایسه می‌شوند.

ساختار عبارت `switch…case` به صورت زیر است:

switch (expression) {   case choice1:     // run this code     break;    case choice2:     // run this code instead     break;    // include as many cases as you like    default:     // actually, just run this code     break; } 

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

در صورتی که مقدار متغیر کنترلی با هیچ‌کدام از مقادیر ممکن تطابق نداشته باشد، برنامه به بلاک default می‌رود و کد مربوط به آن اجرا می‌شود.

دستور `break` در دستور `switch…case` به معنای خروج از حلقه است. زمانی که در یک بلاک `case` از دستور `break` استفاده می‌شود، اجرای کد از آن بلاک به پایان می‌رسد و اجرای حلقه `switch` پس از آن دیگر ادامه پیدا نمی‌کند.

مثال switch…case

فرض کنید می‌خواهیم روز هفته را بر اساس شماره‌ی معادل آن نمایش دهیم. برای این کار می‌توانیم از `switch…case` استفاده کنیم.

در این مثال، متغیر کنترلی `dayNumber` مقدار شماره روز هفته را دریافت می‌کند و سپس مقدار آن با مقادیر ممکن از ۱ تا ۷ مقایسه می‌شود. به این ترتیب، هر مقدار متغیر `dayNumber` با یکی از مقادیر ممکن مطابقت دارد و بلاک کد مربوطه اجرا می‌شود.

let dayNumber = 3; let dayName; switch (dayNumber) {   case 1:     dayName = "Sunday";     break;   case 2:     dayName = "Monday";     break;   case 3:     dayName = "Tuesday";     break;   case 4:     dayName = "Wednesday";     break;   case 5:     dayName = "Thursday";     break;   case 6:     dayName = "Friday";     break;   case 7:     dayName = "Saturday";     break;   default:     dayName = "Invalid day number"; }  console.log("The day corresponding to day number", dayNumber, "is", dayName); 

در این مثال، اگر متغیر `dayNumber` برابر با ۳ باشد، پیام “The day corresponding to day number 3 is Tuesday” نمایش داده می‌شود. اما اگر مقدار `dayNumber` بیشتر از ۷ باشد، پیام “Invalid day number” نمایش داده می‌شود.

عملگر ternary

عملگر ternary یک شرط را بررسی کرده و اگر آن شرط درست باشد یک مقدار/عبارت را برمی‌گرداند و اگر شرط نادرست باشد، مقدار/عبارت دیگری را برمی‌گرداند.

به عبارت دیگر کارایی عملگر ternary درست مانند if…else است، با این تفاوت که در این حالت تعداد خطوط کد بسیار کمتر خواهد بود.

ساختار استفاده از عملگر ternary به شکل زیر است:

condition ? run this code : run this code instead 

بیشتر بخوانید: “نکاتی که قبل از شروع یادگیری جاوا اسکریپت باید بدانید“

مثال عملگر ternary

فرض کنید می‌خواهیم بر اساس مقدار یک متغیر به نام `isLoggedIn`، یک پیام خوش آمدگویی نمایش دهیم. اگر کاربر وارد سیستم شده باشد (`isLoggedIn` برابر با `true` باشد)، پیام “!Welcome back” نمایش داده می‌شود؛ اما اگر کاربر وارد نشده باشد (`isLoggedIn` برابر با `false` باشد)، پیام “.Please log in to continue” نمایش داده می‌شود.

const isLoggedIn = true; // یا false بر اساس وضعیت ورود کاربر const welcomeMessage = isLoggedIn ? "Welcome back!" : "Please log in to continue."; console.log(welcomeMessage); 

جمع‌بندی

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

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