عبارات شرطی - ساختار if

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

یکی از پراستفاده‌ترین این عبارات، ساختار شرطی if است. شما به کمک این ساختار تصمیم می‌گیرید که «اگر» یک شرط مشخص برقرار بود (یعنی مقدار آن عبارت شرطی معادل true بود)، یک دسته کد مشخص اجرا شود، و «در غیر این صورت» اگر شرط دیگری برقرار بود، کدهای دیگری اجرا شوند. همین‌طور می‌توانید در ادامه چندین بلوک شرطی دیگر هم ایجاد کنید. اگر هیچ‌کدام از شرط‌ها برقرار نبود، یک دسته کد پیش‌فرض اجرا می‌شود. در این ساختار که گاهی منجر به یک زنجیره if else می‌شود، فقط نوشتن بلوک شرطی اول اجباری است و اضافه کردن بلوک‌های بعدی به الگوریتم برنامه شما بستگی دارد.

 در این قسمت طی حل یک مثال ساده، با ساختار if و زنجیره if else آشنا می‌شوید. همچنین برای درک بهتر محتوای این قسمت و بخش‌های بعدی، بهتر است درس «عملگرها» را دوباره مرور کنید.

توجه: تمرینات دوره، در مخزن گیت سکان آکادمی بارگذاری شده اند و شما می توانید به راحتی به آنها دسترسی داشته باشید و کد‌های خود را با کد های مدرس دوره مقایسه کنید. برای مشاهده مخزن می توانید اینجا کلیک کنید.

ساختارهای کنترلی در جاوا اسکریپت

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

• عبارات شرطی
• حلقه‌های تکرار

در دو یا سه جلسه نخست، تمرکز ما بر عبارات شرطی خواهد بود. موضوع این جلسه به‌طور مشخص عبارت شرطی if است. 

عبارت شرطی if

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

• اگر کاربر نام صحیح وارد کرد (یعنی شامل حروف بود)، پیام خوش‌آمدگویی نمایش دهیم.
• اگر هیچ مقداری وارد نکرد، به او اعلام کنیم که «لطفاً نام خود را وارد کنید».
• اگر عدد وارد کرد، به او تذکر دهیم که «ورودی شما عدد است».

در واقع، مسئله ما سه حالت دارد:

1. ورودی صحیح (نام)
2. ورودی عددی
3. ورود نکردن هیچ مقداری

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

function getName() {
  const userName = prompt("Enter your name:");
  if () {
    
  }
)

ساختار نوشتاری و کارکرد دستور if به این شکل است ابتدا می‌نویسیم if سپس یک جفت پرانتز () قرار می‌دهیم. شرط مورد نظر داخل این پرانتز نوشته می‌شود. در ادامه، یک جفت آکولاد {} داریم که کدی که قرار است در صورت برقرار بودن شرط اجرا شود داخل آن قرار می‌گیرد.

به بیان دیگر:

if (شرط) {
   // کدی که در صورت برقرار بودن شرط اجرا می‌شود
}

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

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

می‌توانید در شرط if:

• مستقیماً مقدار true یا false بنویسید
• یا از عبارات مقایسه‌ای استفاده کنید، مثلاً بررسی کنید که آیا مقدار یک متغیر (username) برابر با مقداری خاص است یا خیر

به عنوان مثال:

if (userName === "Ali") {
    // اگر مقدار userName برابر با "Ali" بود، این کد اجرا می‌شود
}

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

• null
• undefined
• 0
• رشته خالی ""

مقادیری که true در نظر گرفته می‌شوند (Truthy) شامل:

• !null
• !0
• !" " (رشته غیرخالی)

این نکته مهم است که شرطی که داخل if می‌نویسید معنی‌دار باشد و مشخص کند برنامه چه کاری انجام می‌دهد.
فرض کنید می‌خواهیم بررسی کنیم که کاربر در باکس ورودی نام، مقدار وارد کرده باشد یا نه. اگر کاربر باکس را خالی گذاشت و اوکی زد، تابع prompt یک رشته خالی "" برمی‌گرداند. اگر کاربر چیزی وارد کند، همان رشته وارد شده بازگردانده می‌شود. پس شرط ما می‌تواند به این شکل باشد:

if (userName) {
    // اگر کاربر مقداری وارد کرده باشد، این کد اجرا می‌شود
}

ورودی تابع prompt می‌تواند چند حالت مختلف داشته باشد:

• رشته‌ای شامل حروف یا اعداد
• رشته خالی ""
• مقدار null در صورت زدن دکمه کنسل

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

if (userName !== "") {
    alert("Welcome " + userName);
}

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

در این مثال:

• اگر کاربر چیزی وارد کرده باشد (رشته خالی نیست)، برنامه وارد بلاک if می‌شود و یک پیام خوش‌آمدگویی نمایش داده می‌شود.
• پیام شامل متن "Welcome" و نام کاربر خواهد بود، به این صورت کاربر بلافاصله نتیجه عملکرد برنامه را مشاهده می‌کند.

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

if (userName) {
    alert("Welcome " + userName);
}

در این حالت:

• رشته خالی، null و undefined به‌طور خودکار Falsy در نظر گرفته می‌شوند و بلاک اجرا نمی‌شود.
• سایر ورودی‌ها (رشته غیرخالی، حتی اعداد وارد شده به‌صورت رشته) Truthy هستند و پیام خوش‌آمدگویی نمایش داده می‌شود.

این روش ساده و قابل اطمینان است تا اکثر حالت‌های ورودی کاربر را به‌درستی مدیریت کنیم.

حالا بخش بعدی کار این است که بررسی کنیم آیا کاربر عدد وارد کرده است یا خیر و در صورت وارد شدن عدد، پیامی به او نمایش دهیم که «ورودی شما عدد است، لطفاً نام وارد کنید». برای مدیریت چند شرط، می‌توانیم از دو روش استفاده کنیم:

1. چند if مستقل:
   هر شرط یک بلاک if جداگانه دارد و به ترتیب بررسی می‌شود.
2. ساختار if - else if - else:

if (userName) {
    alert("Welcome " + userName);
}else if(){

}else if(){

}else{

}

 در این روش:

• ابتدا شرط اول بررسی می‌شود.
• اگر شرط اول برقرار نباشد، شرط دوم بررسی می‌شود.

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

if (userName) {
    alert("Welcome " + userName);
} else if (parseInt(userName)){
"12312423434345345"
}

اگر رشته شامل حروف یا کاراکترهای غیر عددی باشد، مانند "ali123"، parseInt مقدار NaN برمی‌گرداند.

if (userName) {
    alert("Welcome " + userName);
} else if (parseInt(userName)){
"ali123"
}

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

نکته مهم در زنجیره if - else if - else این است که:

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

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

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

• نام معتبر → پیام خوش‌آمدگویی
• عدد → پیام خطا
• سایر حالت‌ها (خالی یا null) → بلاک پیش‌فرض/اسکیپ شده

نکات مهم در نوشتن if

1. حالت‌هایی که احتمال رخداد بیشتری دارند را بالاتر قرار دهید تا سرعت اجرای کد بهینه شود و بلاک‌های بعدی اسکیپ شوند.
2. می‌توانید از ترکیب ! و isNaN برای پالایش سریع حالت‌های غیرمطلوب استفاده کنید.
3. استفاده از return پس از اجرای بلاک مناسب باعث می‌شود بلاک‌های بعدی بررسی نشوند و اجرای کد سریع‌تر شود.

جمع‌بندی مفهوم if و زنجیره if-els

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

1. ابتدا ورودی‌ها پالایش می‌شوند.
2. اگر ورودی معتبر بود، برنامه ادامه می‌یابد و نیازی به اجرای بلاک‌های اضافی نیست.
3. اگر ورودی نامعتبر بود، تابع سریعاً پایان می‌یابد و پیام مناسبی نمایش داده می‌شود.

مثال عملی:

if (!userName || parseInt(userName)) {
  alert("Pass a correct name!");
  return;
}
alert("Welcome " + userName);

کلیک روی دکمه و وارد نکردن هیچ مقداری، پیغام هشدار نمایش داده می‌شود.

وارد کردن عدد، پیغام هشدار نمایش داده می‌شود.

وارد کردن مقدار معتبر، پیام خوش‌آمدگویی نمایش داده می‌شود.

این همان کاربرد زنجیره if-else و مفهوم return در تابع‌ها است.

تمرین پیشنهادی:

• پروژه آخر فصل قبل (یک To-Do List) را باز کنید.
• با استفاده از کدهای if، ورودی‌های کاربر را کنترل کنید تا امکان وارد کردن مقدار خالی در باکس وجود نداشته باشد.
• اگر کاربر چیزی وارد نکرد، یک alert نمایش داده شود که از او می‌خواهد مقدار مناسبی وارد کند.