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

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

عبارات شرطی یا 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 آشنا شدیم که یه روش کوتاه و خوانا برای نوشتن شرط ها بود. حتی استفاده از چندین ? پشت سر هم رو هم یاد گرفتیم که چطور می شه چند شرط رو به صورت مختصر و مفید تو یه خط بررسی کرد.

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