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

عبارات شرطی در جاوااسکریپت

عبارات شرطی یا Conditional statements یکی از مفاهیم پایه ای و بسیار مهم در برنامه نویسی هستن. با استفاده از شرط ها، می‌تونیم توی برناممون تصمیم بگیریم که چه کاری انجام بشه. این یعنی می‌تونیم به کد بگیم: "اگر این شرط درست بود، این کار رو انجام بده؛ وگرنه، اون کار رو انجام بده".

در جاوااسکریپت چند نوع عبارت شرطی داریم که مهم‌ترین اون‌ها if، else if، و else هستن. حالا این‌ها رو با هم بررسی می‌کنیم.

عبارت if

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

مثال 1:

let age = 18;
if (age >= 18) {
  console.log("شما بالغ هستید.");
}

در این مثال، اگر مقدار متغیر age برابر یا بیشتر از 18 باشه، پیامی با عنوان "شما بالغ هستید." چاپ می‌شه.

مثال 2: توی این مثال، یه سوال از کاربر می‌پرسیم که "سال انتشار مشخصات ECMAScript-2015 چیه؟" و بعد چک می‌کنیم که آیا عدد وارد شده ۲۰۱۵ بوده یا نه. اگه درست باشه، یه پیام می‌نویسیم که "درست گفتی!"

let year = prompt('In which year was ECMAScript-2015 specification published?', '');
if (year == 2015) alert( 'You are right!' );

در اینجا، شرط ما فقط یه مقایسه ساده هست (year == 2015)، اما می‌شه خیلی پیچیده‌تر هم بشه.

حالا اگه بخوایم چند تا دستور مختلف توی یه بخش شرطی اجرا کنیم، باید همشونو داخل آکولاد {} قرار بدیم. مثلاً:

if (year == 2015) {
  alert( "That's correct!" );
  alert( "You're so smart!" );
}

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

تبدیل به بولین (Boolean conversion)

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

• هر عددی که صفر باشه، رشته ی خالی ""، null، undefined و NaN همه تبدیل به false می‌شن. به اینا می‌گیم "مقدارهای کاذب" (falsy).
• بقیه ی مقادیر تبدیل به true می‌شن که بهشون می‌گیم "مقدارهای درست" (truthy).

برای مثال، این کد زیر هیچ وقت اجرا نمی‌شه:

if (0) { // 0 یک مقدار کاذب (falsy) است
  ...
}

ولی این کد همیشه اجرا می‌شه:

if (1) { // 1 یک مقدار درست (truthy) است
  ...
}

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

let cond = (year == 2015); // نتیجه مقایسه تبدیل می‌شه به true یا false
if (cond) {
  ...
}

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

عبارت else

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

مثال 1:

let age = 16;
if (age >= 18) {
  console.log("شما بالغ هستید.");
} else {
  console.log("شما هنوز بالغ نشده اید.");
}

در این مثال، چون مقدار age کمتر از 18 هست، پیامی با عنوان "شما هنوز بالغ نشده اید." چاپ می‌شه.

مثال 2:

let year = prompt('In which year was the ECMAScript-2015 specification published?', '');
if (year == 2015) {
  alert('You guessed it right!');
} else {
  alert('How can you be so wrong?'); // any value except 2015
}

توی این مثال از if برای بررسی یه شرط استفاده کردیم. اول از کاربر سال انتشار ECMAScript-2015 رو می‌پرسیم. اگر سال وارد شده برابر با ۲۰۱۵ بود، پیام 'You guessed it right!' نمایش داده می‌شه. اما اگر هر عدد دیگه ای وارد کنه، پیام 'How can you be so wrong?' نشون داده می‌شه.

پس اینجا دو حالت داریم:

• اگر شرط درست بود (یعنی سال وارد شده ۲۰۱۵ بود)، کد داخل بلوک if اجرا می‌شه.
• اگر شرط اشتباه بود (یعنی سال وارد شده غیر از ۲۰۱۵ بود)، کد داخل بلوک else اجرا می‌شه.

عبارت else if

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

مثال 1:

let age = 20;
if (age < 18) {
  console.log("شما کودک هستید.");
} else if (age >= 18 && age < 60) {
  console.log("شما بزرگسال هستید.");
} else {
  console.log("شما سالمند هستید.");
}

در اینجا، شرط‌ها به ترتیب بررسی می‌شن. اگر age کمتر از 18 باشه، پیامی با عنوان "شما کودک هستید." نمایش داده می‌شه. اگر بین 18 و 60 باشه، پیام "شما بزرگسال هستید." چاپ می‌شه و در غیر این صورت پیام "شما سالمند هستید." نمایش داده می‌شه.

مثال 2: در این مثال می‌خواهیم چند شرط رو بررسی کنیم و براساس هر کدوم یک پیام مختلف نشون بدیم:

let year = prompt('In which year was the ECMAScript-2015 specification published?', '');
if (year < 2015) {
  alert('Too early...');
} else if (year > 2015) {
  alert('Too late');
} else {
  alert('Exactly!');
}

توی این کد، جاوااسکریپت اول بررسی می‌کنه که آیا سال وارد شده کمتر از ۲۰۱۵ هست یا نه. اگر این شرط درست نباشه (یعنی سال وارد شده ۲۰۱۵ یا بزرگتر باشه)، میره سراغ شرط بعدی که بررسی می‌کنه آیا سال بزرگتر از ۲۰۱۵ هست. اگر این هم درست نباشه، یعنی کاربر دقیقاً ۲۰۱۵ رو وارد کرده، پس پیام 'Exactly!' رو نشون می‌ده.

در اینجا سه حالت داریم:

• اگر سال وارد شده کمتر از ۲۰۱۵ باشه، پیام 'Too early...' نمایش داده می‌شه.
• اگر سال وارد شده بیشتر از ۲۰۱۵ باشه، پیام 'Too late' نمایش داده می‌شه.
• اگر سال دقیقاً ۲۰۱۵ باشه، پیام 'Exactly!' نشون داده می‌شه.

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

عبارت شرطی ternary operator

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

ساختار:

condition ? exprIfTrue : exprIfFalse

مثال 1:

let age = 20;
let result = age >= 18 ? "Adult" : "Child";
console.log(result);

در اینجا، اگر age بیشتر از یا برابر با 18 باشه، result مقدار "بزرگسال (Adult)" رو می‌گیره. در غیر این صورت "کودک (Child)".

مثال 2: فرض کن می‌خوایم یه شرط ساده بنویسیم که به طور معمولی به این شکل می‌نوشتیمش:

let accessAllowed;
let age = prompt('How old are you?', '');
if (age > 18) {
  accessAllowed = true;
} else {
  accessAllowed = false;
}
alert(accessAllowed);

اما جاوااسکریپت یه راه ساده‌تر برای نوشتن اینجور کدها داره. این راه به کمک عملگر شرطی یا همون "علامت سوال" (?) انجام می‌شه. گاهی اینو به اسم "عملگر سه گانه" هم می‌شناسن چون سه قسمت مختلف داره. این یکی از معدود عملگرهایی تو جاوااسکریپت هست که اینطور عمل می‌کنه.

ساختار عملگر شرطی به این صورت هست:

let result = condition ? value1 : value2;

یعنی اول شرط رو بررسی می‌کنه: اگر شرط درست بود، مقدار value1 رو برمی گردونه و اگر درست نبود، مقدار value2 رو.

مثال:

let accessAllowed = (age > 18) ? true : false;

در اینجا، شرط (age > 18) بررسی می‌شه. اگر درست باشه، true به متغیر accessAllowed اختصاص داده می‌شه، در غیر این صورت false. این کاملاً مشابه به کد قبلی هست که نوشتیم، اما خیلی کوتاه‌تر و خواناتر.

نکته: در واقع می‌تونیم پرانتزها رو هم حذف کنیم چون عملگر سوالی اولویت کمتری داره و بعد از عملگر مقایسه (> و ... ) اجرا می‌شه.

پس این کد هم دقیقاً همون کار قبلی رو انجام می‌ده:

let accessAllowed = age > 18 ? true : false;

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

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

let accessAllowed = age > 18;

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

استفاده از چندین علامت سوال (Multiple ‘?’)

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

مثال:

let age = prompt('age?', 18);
let message = (age < 3) ? 'Hi, baby!' :
  (age < 18) ? 'Hello!' :
  (age < 100) ? 'Greetings!' :
  'What an unusual age!';
alert( message );

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

1. اولین علامت سوال بررسی می‌کنه که آیا age < 3 هست؟

• اگر درست بود، پیام "Hi, baby!" نمایش داده می‌شه.
• اگر درست نبود، میره سراغ شرط بعدی.

2. شرط بعدی بررسی می‌کنه که آیا age < 18 هست؟

• اگر درست بود، پیام "Hello!" نمایش داده می‌شه.
• اگر درست نبود، میره سراغ شرط بعدی.

3. اگر این هم درست نبود، بررسی می‌کنه که آیا age < 100 هست؟

• اگر درست بود، پیام "Greetings!" نمایش داده می‌شه.
• و در آخر، اگر هیچ کدوم از این شرایط درست نبود، پیام "What an unusual age!" نمایش داده می‌شه.

این رو می‌تونیم با استفاده از ساختار if..else هم بنویسیم که کاملاً همون کار رو می‌کنه:

if (age < 3) {
  message = 'Hi, baby!';
} else if (age < 18) {
  message = 'Hello!';
} else if (age < 100) {
  message = 'Greetings!';
} else {
  message = 'What an unusual age!';
}

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

استفاده غیرمعمول از علامت سوال (Non-traditional use of ‘?’)

گاهی وقت‌ها علامت سوال ? به جای if استفاده می‌شه. مثلاً:

let company = prompt('Which company created JavaScript?', '');
(company == 'Netscape') ?
   alert('Right!') : alert('Wrong.');

در اینجا، بسته به اینکه شرط company == 'Netscape' درست باشه یا نه، یکی از دو بخش بعد از علامت سوال اجرا می‌شه و یه پیغام نمایش داده می‌شه.

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

اما باید بگم که این استفاده از علامت سوال خیلی توصیه نمی‌شه.

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

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

let company = prompt('Which company created JavaScript?', '');
if (company == 'Netscape') {
  alert('Right!');
} else {
  alert('Wrong.');
}

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

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

تمرینات

تمرین 1: اگر یک رشته با صفر

 در مثال زیر آیا پیغام هشدار نمایش داده می‌شه؟

if ("0") {
  alert( 'Hello' );
}

راه حل:
بله، پیغام نمایش داده می‌شه.

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

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

if ("0") {
  alert( 'Hello' );
}

تمرین 2: نام رسمی جاوا اسکریپت

با استفاده از ساختار if..else، کدی بنویسید که از کاربر بپرسه: "نام رسمی جاوا اسکریپت چیه؟"

اگر کاربر "ECMAScript" رو وارد کرد، پیغام "درست!" رو نشون بده، در غیر این صورت پیغام "تو نمی‌دونی؟ ECMAScript!" رو نشون بده.

راه حل:

<!DOCTYPE html>
<html>
<body>
  <script>
    'use strict';
    let value = prompt('What is the "official" name of JavaScript?', '');
    if (value == 'ECMAScript') {
      alert('Right!');
    } else {
      alert("You don't know? ECMAScript!");
    }
  </script>
</body>
</html>

تمرین3: نمایش علامت

با استفاده از if..else کدی بنویسید که یک عدد از کاربر بگیره و در نهایت در یک alert نمایش بده:

• 1 اگر عدد بزرگ‌تر از صفر بود
• -1 اگر کمتر از صفر بود
• 0 اگر مساوی صفر بود

در این تمرین فرض می‌کنیم ورودی همیشه یک عدد خواهد بود.

راه حل:

let value = prompt('Type a number', 0);
if (value > 0) {
  alert( 1 );
} else if (value < 0) {
  alert( -1 );
} else {
  alert( 0 );
}

تمرین 4: if به ?

این کد if رو با استفاده از عملگر شرطی ? بازنویسی کنید:

let result;
if (a + b < 4) {
  result = 'Below';
} else {
  result = 'Over';
}

راه حل:

let result = (a + b < 4) ? 'Below' : 'Over';

تمرین 5: if..else به ?

کد if..else رو با استفاده از عملگرهای سه گانه ? بازنویسی کنید.

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

let message;
if (login == 'Employee') {
  message = 'Hello';
} else if (login == 'Director') {
  message = 'Greetings';
} else if (login == '') {
  message = 'No login';
} else {
  message = '';
}

راه حل:

let message = (login == 'Employee') ? 'Hello' :
  (login == 'Director') ? 'Greetings' :
  (login == '') ? 'No login' :
  '';

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

condition ? value1 : value2;

یعنی اگر شرط درست باشه، مقدار value1 برمی گرده، و اگر اشتباه باشه، مقدار value2. حالا توی مثال بالا که سه شرط مختلف داریم (برای Employee، Director و خالی بودن login)، می‌شه از چند تا عملگر سوالی پشت سر هم استفاده کرد. اینطوری هر شرط به ترتیب بررسی می‌شه و در نهایت یکی از پیام‌های مورد نظر به متغیر message نسبت داده می‌شه.

در این مثال، ابتدا شرط بررسی می‌کنه که login برابر با 'Employee' هست یا نه. اگه بله، پیام 'Hello' نمایش داده می‌شه. اگر نه، شرط بعدی بررسی می‌شه که آیا login برابر با 'Director' هست یا نه. این روند ادامه پیدا می‌کنه تا به نتیجه نهایی برسیم. با این روش می‌شه کد رو خیلی ساده‌تر و تمیزتر نوشت.

تمرین 6: چک کردن عدد مثبت یا منفی

یک عدد وارد کن و بررسی کن که آیا مثبت هست یا منفی. اگر عدد صفر بود، پیغام "عدد صفر است" را چاپ کن.

راه حل:

let num = -5;
if (num > 0) {
  console.log("عدد مثبت است");
} else if (num < 0) {
  console.log("عدد منفی است");
} else {
  console.log("عدد صفر است");
}

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

تمرین 7: بررسی زوج/فرد بودن عدد

یک عدد وارد کن و بررسی کن که آیا عدد فرد هست یا زوج.

راه حل:

let number = 10;
if (number % 2 === 0) {
  console.log("عدد زوج است");
} else {
  console.log("عدد فرد است");
}

اینجا از عملگر باقی مانده (modulus) % برای بررسی اینکه آیا عدد بر ۲ بخش پذیر هست یا نه استفاده می‌شه. اگر باقی مانده صفر باشه، عدد زوج و در غیر این صورت فرد هست.

تمرین 8: بررسی زوج/فرد بودن عدد (Ternary Operator)

یک عدد وارد کن و با استفاده از Ternary Operator بررسی کن که آیا عدد فرد هست یا زوج.

راه حل:

let number = +prompt("Type a number:", 0);
number % 2 === 0 ? alert("Number is even.") : alert("Number is odd.");

تمرین 9: استفاده از عملگر شرطی (Ternary Operator)

یک عدد وارد کن و چک کن که آیا مثبت هست یا منفی، با استفاده از عملگر شرطی (ternary operator) پیغام مناسب رو چاپ کن.

راه حل:

let num = -3; 
let result = num >= 0 ? "Number is positive." : "Number is negative."; console.log(result);

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

تمرین 10: بزرگ‌ترین عدد از سه عدد

سه عدد وارد کن و بزرگ‌ترین عدد رو پیدا کن و چاپ کن.

let a = 5, b = 8, c = 3; 
if (a >= b && a >= c) {
  console.log("بزرگ‌ترین عدد: " + a); 
  } else if (b >= a && b >= c) {
    console.log("بزرگ‌ترین عدد: " + b); 
    } else {
      console.log("بزرگ‌ترین عدد: " + c); 
    }

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

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

یک سن وارد کن و بررسی کن که آیا کاربر به سن قانونی برای رانندگی (مثلاً 18 سال) رسیده است یا نه.

let age = 17; 
if (age >= 18) {
  console.log("شما به سن قانونی برای رانندگی رسیده اید.");
   } else {
     console.log("شما هنوز به سن قانونی برای رانندگی نرسیده اید.");
      }

در این کد به سادگی بررسی می‌شه که آیا سن وارد شده از سن قانونی برای رانندگی بزرگ‌تر یا مساوی هست یا نه.

تمرین 12: بررسی بزرگ‌ترین عدد با Ternary Operator

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

let x = 15, y = 25; 
let largest = x > y ? x : y; 
console.log("بزرگ‌ترین عدد: " + largest);

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

جمع بندی

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

همچنین با عملگر شرطی ? یا همون Ternary Operator آشنا شدیم که یه روش کوتاه و خوانا برای نوشتن شرط‌ها بود. حتی استفاده از چندین ? پشت سر هم رو هم یاد گرفتیم که چطور می‌شه چند شرط رو به صورت مختصر و مفید تو یه خط بررسی کرد.

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