IF در جاوا اسکریپت و نحوه استفاده از آن + مثال و کد

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

است که به کاربر اجازه می‌دهد تا بلوک‌های مختلف کد را بر اساس شرایطی خاص اجرا کند. برای نمونه اگر کاربری رباتی توسعه دهد و بخواهد نسبت به دستوراتی یا سؤال‌هایی که از ربات پرسیده می‌شود، پاسخ‌هایی دریافت کند، باید از دستورات شرطی بهره ببرد. زبان برنامه نویسی جاوا اسکریپت هم مانند سایر زبان‌های برنامه نویسی دیگر حاوی دستورات شرطی مختص به خود بوده که یکی از مهم‌ترین آن‌ها دستور IF است. در این مطلب آموزشی از «مجله تم آف» به آموزش دستور IF در جاوا اسکریپت در قالب نمونه کدهای ساده و روان پرداخته خواهد شد. در پایان این مطلب کاربران درک نسبتاً خوبی از دستورات شرطی و به خصوص دستور if…else

از جاوا اسکریپت خواهند داشت.

دستور IF…Else در جاوا اسکریپت چیست؟

دستور «IF…Else» نوعی گزاره شرطی در جاوا اسکریپت است که به کاربر امکان می‌دهد بلوک‌های مختلف کد را بر اساس «درست» (True) یا «نادرست» (False) بودن شرطی معین اجرا کند. وقتی شرط داخل دستور IF به درستی ارزیابی شود، کد داخل بلوک IF مربوطه اجرا می‌شود. اگر شرط نادرست ارزیابی شود، کد داخل بلوک «Else» (در صورت وجود) اجرا می‌شود.

در جاوا اسکریپت، مقادیر درست یا نادرست در نظر گرفته می‌شوند و این مقادیر در رویکردهای بولی، مانند دستور IF مورد استفاده قرار می‌گیرند. مقادیر زیر همگی نادرست یا False

در نظر گرفته می‌شوند:

• « False

  »

• 0

  (صفر)

• – 0

  (منفی صفر)

• 0n (BigInt صفر)
• “”, ”, “

   رشته خالی

• « Null

  »

• «تعریف نشده» ( Undefine

  )

• « NaN

  »

هر مقدار دیگری که در فهرست بالا ذکر نشده باشد، درست یا True

تلقی می‌شود.

مثال دستور IF…Else در جاوا اسکریپت

عبارت if…else

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

به صورت زیر است:

if (condition) {
  // code to be executed if the condition is true (truthy)
} else {
  // code to be executed if the condition is false (falsy)
}

در مثال اول فرض می‌شود که متغیری به نام age

به معنی سن موجود بوده که روی 18

تنظیم شده است. شرط داخل دستور if

بررسی می‌کند که آیا age

بزرگ‌تر یا مساوی با 18

است یا خیر. از آنجایی که عدد 18

شرط بزرگتر و مساوی با 18

را ارضا خواهد کرد در نتیجه شرط درست ارزیابی شده و کد داخل بلوک if

اجرا خواهد شد. در این حالت کنسول ALI is an adult

را نمایش می‌دهد.

const age = 18;

if (age >= 18) {
  console.log("ALI is an adult.");
} else {
  console.log("ALI is a child.");
}

خروجی کد بالا در کنسول مرورگر به صورت زیر است:

حال اگر مقدار متغیر age

به 12

تغییر داده شود، شرط موجود در دستور if

به false

ارزیابی می‌شود و کد داخل بلوک else

اجرا خواهد شد که در این شرایط کنسول ALI is a child

را نمایش می‌دهد.

const age = 12;

if (age >= 18) {
  console.log("ALI is an adult.");
} else {
  console.log("ALI is a child.");
}

این بار خروجی در کنسول مرورگر به صورت زیر خواهد بود:

با دستور if…else

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

مثال دستورات چند گانه IF…Else در Javascript

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

همراه با عبارت if…else

استفاده کرد. ساختار دستور if…else if…else

به صورت زیر است:

if (condition1) {
  // code to be executed if condition1 is true
} else if (condition2) {
  // code to be executed if condition2 is true
} else {
  // code to be executed if none of the conditions are true
}

هنگامی که شرط دستور if

نادرست ارزیابی شود، برنامه برای ارزیابی اولین شرط دستور if

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

درست نباشند، کد داخل بلوک else

اجرا می‌شود.

در مثال زیر دوباره همان متغیر age

را فرض می‌کنیم که روی 18

تنظیم شده است. دستور IF در جاوا اسکریپت و در این مورد بررسی می‌کند که اگر age

کمتر از 18

باشد و این عبارت به درست ارزیابی شود در نتیجه ، Alice is under 18 years old

را چاپ کند. اگر شرط اول نادرست باشد، دستور if

دیگری بررسی می‌کند که آیا age

بین 18

تا 21

سال است یا خیر. اگر این شرایط ارضا شود یا به عبارت دیگر شرط درست باشد، Alice is between the ages of 18 and 21

در کنسول مرورگر چاپ می‌شود. اگر هر دو شرط if

و else if

نادرست باشند، به بلوک else

برمی‌گردد و Alice is over 21 years old

را چاپ می‌کند.

const age = 18;

if (age = 18 && age 

خروجی کد فوق به صورت زیر است:

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

چه زمانی از دستورهای Switch باید به جای عبارات IF…Else استفاده کرد؟

در جاوا اسکریپت، موقعیت‌هایی وجود دارد که استفاده از دستور «Switch» می‌تواند بهتر از استفاده از دستور «IF…Else» باشد. دستورات Switch می‌توانند «سینتکس» (Syntax) تمیزتری داشته باشند و خوانایی را ارائه دهند، به خصوص زمانی که شرایط متعددی در کد وجود داشته باشد. با این حال، درک زمان استفاده مناسب از هر ساختار ضروری است. بیایید مثال‌های ارائه شده برای نشان دادن استفاده از دستورات switch

و IF…Else در جاوا اسکریپت را در نظر بگیریم تا تفاوت آن‌ها را بهتر دریابیم.

مثال استفاده از عبارات if…else

به صورت زیر است:

const pet = "dog";

if (pet === "lizard") {
  console.log("I own a lizard");
} else if (pet === "dog") {
  console.log("I own a dog");
} else if (pet === "cat") {
  console.log("I own a cat");
} else if (pet === "snake") {
  console.log("I own a snake");
} else if (pet === "parrot") {
  console.log("I own a parrot");
} else {
  console.log("I don't own a pet");
}

حال مثال استفاده از عبارات switch

به صورت زیر است:

const pet = "dog";

switch (pet) {
  case "lizard":
    console.log("I own a lizard");
    break;
  case "dog":
    console.log("I own a dog");
    break;
  case "cat":
    console.log("I own a cat");
    break;
  case "snake":
    console.log("I own a snake");
    break;
  case "parrot":
    console.log("I own a parrot");
    break;
  default:
    console.log("I don't own a pet");
    break;
}

هر دو ساختار شرطی کدهای بالا به نتیجه واحدی می‌رسند اما دستور switch

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

استفاده شود:

• هنگام مقایسه متغیری واحد در برابر چندین مقدار.
• زمانی که شرایط بررسی برابری ساده است (مثلاً ===

  ) و شامل عملیات منطقی پیچیده نیست.

• وقتی چندین مورد با مقادیر ثابت موجود است که به بررسی محدوده یا شرایط پیچیده‌تر نیاز ندارند.

بهتر است در حالت‌های زیر از IF…Else در جاوا اسکریپت استفاده شود:

• هنگام برخورد با شرایط پیچیده یا چندگانه که شامل عملیات منطقی (به عنوان مثال AND ،OR) فراتر از بررسی‌های ساده برابری است.
• زمانی که به انعطاف‌پذیری بیشتری در شرایط نیاز است، مانند استفاده از محدوده‌ها یا عملگرهای مقایسه‌ای متفاوت.

مهم است که ساختار مناسب بر اساس الزامات خاص کد مربوطه انتخاب شوند. در حالی که عبارات switch

می‌تواند منجر به کدهای خواناتر در موقعیت‌های خاص شود، دستور if…else

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

عملگر AND منطقی و دستور IF…Else در جاوا اسکریپت

در جاوا اسکریپت، عملگر منطقی « AND (&&)

‎» به کاربر امکان می‌دهد دو یا چند شرط را در یک دستور if

ترکیب کند. اگر تمام شرایط متصل شده به وسیله عملگر &&

درست ارزیابی شوند، کد داخل بلوک if

اجرا خواهد شد. اگر هر یک از شرایط نادرست باشند، کد داخل بلوک else

(در صورت ارائه) به‌جای آن اجرا می‌شود. مثال‌های زیر بیانگر این مفهوم ‌هستند:

مثال ١: قطعه کد مثال اول به صورت زیر است:

const age = 17;
const ownsCar = true;

if (age >= 16 && ownsCar) {
  console.log("Jerry is old enough to drive and has his own car.");
} else {
  console.log("Jerry does not drive.");
}

خروجی مثال فوق در کنسول مروگر به صورت زیر خواهد بود:

در مثال فوق، دستور IF در جاوا اسکریپت دارای دو شرط است که به وسیله عملگر &&

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

بوده یا خیر و اینکه آیا ownsCar

به درست ارزیابی خواهد شد یا خیر. از آنجا که هر دو شرط درست هستند، کد داخل بلوک if

اجرا می‌شود و کنسول متن مد نظر در تصویر بالا را نمایش می‌دهد.

مثال ٢: قطعه کد مثال دوم به صورت زیر است:

const age = 13;
const ownsCar = true;

if (age >= 16 && ownsCar) {
  console.log("Jerry is old enough to drive and has his own car.");
} else {
  console.log("Jerry does not drive.");
}

خروجی کد فوق در داخل کنسول مرورگر به صورت زیر است:

در مثال فوق، مقدار سن اکنون 13

 بوده که کمتر از 16

است. حتی اگر ownsCar

درست باشد، شرط اول ( age >= 16

) به نادرست ارزیابی می‌شود. در نتیجه، کد داخل بلوک else

اجرا شده و کنسول Jerry does not drive

را نمایش می‌دهد. عملگر منطقی AND (&&)‎

زمانی مفید است که اطمینان حاصل شود چند شرط برای اجرای بلوک کد مد نظر باید به درستی ارزیابی شوند. اگر هر یک از شرایط نادرست باشند، بلوک else

نوعی گزینه بازگشتی برای اجرای کد جایگزین ارائه می‌دهد.

عملگر منطقی OR و عبارات IF…Else در جاوا اسکریپت

در جاوا اسکریپت، عملگر منطقی « OR (||)‎

» به کاربر امکان می‌دهد دو یا چند شرط را در یک دستور if

ترکیب کند. اگر حداقل یکی از شرایط مرتبط با ||

به درستی ارزیابی شود، کد داخل بلوک if

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

(در صورت ارائه) اجرا می‌شود. مثال‌های زیر برای درک ترکیب عملگر منطقی OR (||)‎

و عبارات IF…Else در جاوا اسکریپت مهم هستند.

مثال ١: قطعه کد مثال اول به صورت زیر است:

const boyfriendIsPaying = true;
const isSale = false;

if (boyfriendIsPaying || isSale) {
  console.log("Jesse will go shopping.");
} else {
  console.log("Jesse will not go shopping.");
}

خروجی کد بالا در کنسول مرورگر به صورت زیر است:

در مثال فوق، دستور IF در جاوا اسکریپت از عملگر ||

برای بررسی اینکه آیا boyfriendIsPaying

یا isSale

کدام به درستی ارزیابی می‌شوند استفاده خواهد کرد. از آنجایی که boyfriendIsPaying

درست است، شرط درست خواهد بود حتی اگر isSale

نادرست باشد. بنابراین، کد داخل بلوک if

اجرا می‌شود و کنسول Jesse will go shopping

را نمایش می‌دهد.

مثال ٢: قطعه کد مثال دوم به صورت زیر است:

const boyfriendIsPaying = false;
const isSale = false;

if (boyfriendIsPaying || isSale) {
  console.log("Jesse will go shopping.");
} else {
  console.log("Jesse will not go shopping.");
}

خروجی مثال فوق در کنسول مرورگر به صورت زیر خواهد بود:

در مثال دوم، هر دو boyfriendIsPaying

و isSale

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

اجرا می‌شود و کنسول Jesse will not go shopping

را نمایش می‌دهد. عملگر منطقی OR (||)‎

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

باید به درستی ارزیابی شود.

عملگر منطقی NOT و عبارات IF…Else در Javascript

در جاوا اسکریپت، عملگر منطقی NOT (!)‎

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

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

const boyfriendIsPaying = true;
const isSale = false;

if (!boyfriendIsPaying || isSale) {
  console.log("Jesse will go shopping.");
} else {
  console.log("Jesse will not go shopping.");
}

خروجی کد بالا در کنسول مرورگی به صورت تصویر زیر است:

در مثال فوق، متغیر boyfriendIsPaying

 روی true

تنظیم شده است. با این حال در مثال ارائه شده از عملگر منطقی NOT (!)‎

قبل از آن در دستور if

استفاده شده است تا مقدار آن را نفی کند. بنابراین، !boyfriendIsPaying

 به نادرست ارزیابی می‌شود. شرط دوم isSale

، هنوز نادرست است. حال وقتی از عملگر منطقی OR (||)‎

برای اتصال شرایط استفاده شود، شرط به نادرست ارزیابی خواهد شد و از آنجا که هیچ یک از شرایط صحیح نیست، کد داخل بلوک else

اجرا می‌شود در نتیجه، کنسول Jesse will not go shopping

را نمایش می‌دهد.

عملگر منطقی NOT (!)‎

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

را به طور مؤثرتر تغییر داد.

عملگر شرطی سه تایی در جاوا اسکریپت

عملگر شرطی سه‌تایی در جاوا اسکریپت روشی مختصر برای نوشتن عبارات ساده if…else

ارائه می‌دهد. عملگر سه‌تایی نوعی ساختار تک‌خطی است که شرطی را ارزیابی می‌کند و یکی از دو مقدار True

یا False

را بر اساس درست یا نادرست بودن شرط بازمی‌گرداند.

سینتکس اصلی عملگر شرطی سه‌تایی به شرح زیر است:

condition ? if condition 1 is true : if condition 2 is false

شرط قبل از علامت سوال (؟) قرار می‌گیرد و اگر شرط به درستی ارزیابی شود، عبارت اول اجرا می‌شود. اگر شرط نادرست باشد، عبارت دوم اجرا خواهد شد. مثال زیر برای درک این مفهوم مهم است:

const age = 32;
const citizen = age >= 18 ? "Can vote" : "Cannot vote";
console.log(citizen);

خروجی مثال فوق به صورت زیر است:

در مثال فوق شرط age >= 18

ارزیابی می‌شود. از آنجایی که age

برابر با 32

 و شرط بزرگتر بودن از 18

 را ارضا می‌کند در نتیجه شرط برای رأی دادن به درست ارزیابی می‌شود. بنابراین عبارت Can vote

به متغیر citizen

اختصاص داده خواهد شد. سپس عبارت console.log(citizen) “Can vote”

در کنسول می‌شود.

عملگر شرطی سه‌تایی انتخابی عالی برای زمانی است که عبارت کوتاه و ساده if…else

موجود باشد و در این شرایط این عملگر مذکور روشی مختصر و خوانا برای بیان منطق برنامه فراهم می‌کند. برای مقایسه کد بالا این بار با استفاده از عبارت معمولی IF…Else در جاوا اسکریپت نوشته شده است:

const age = 32;
let citizen;

if (age >= 18) {
  citizen = "Can vote";
} else {
  citizen = "Cannot vote";
}

console.log(citizen);

هر دو دستور عملگر سه‌تایی و if…else

به نتیجه واحدی رسیده‌اند اما عملگر سه‌تایی می‌تواند برای عبارات شرطی کوتاه‌تر مناسب‌تر باشد و کد را خواناتر و فشرده‌تر می‌کند. با این حال، زمانی که شرایط پیچیده‌تری موجود بوده یا عبارات متعددی برای مدیریت وجود داشته باشد ، عبارت IF…Else در جاوا اسکریپت انعطاف‌پذیری و خوانایی بیشتری را ارائه می‌دهد. همیشه ساختار مناسب باید بر اساس پیچیدگی و الزامات مورد استفاده خاص انتخاب شود.

سخن پایانی

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

• دستورات if…else

  : زمانی که شرط موجود در عبارت if

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

  (در صورت ارائه) اجرا می‌شود.

• عبارات if…else if…else

  : برای آزمایش چند شرط مفید هستند. هنگامی که دستور if

  نادرست است، برنامه برای ارزیابی اولین شرط if

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

• دستور switch

  : اگر عبارت if…else

  طولانی و پیچیده شود، دستور switch

  می‌تواند جایگزین خواناتری باشد. عبارات switch

  می‌تواند به‌ویژه هنگام مقایسه یک متغیر منفرد در برابر چندین مقدار باحالت‌های ثابت مفید باشد.

• عملگرهای منطقی: می‌توان از عملگرهای منطقی (به عنوان مثال، &&، ||، !

  ) برای آزمایش چند شرط بدون استفاده از دستورات تودرتو if…else

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

•  عملگر سه‌تایی: عملگر سه‌تایی روشی مختصر برای نوشتن عبارات ساده if…else

  ارائه می‌دهد. این عملگر از یک شرط تشکیل شده است که به دنبال آن دو عبارت با علامت سؤال ( ؟

  ) و دونقطه ( :

  ) از هم جدا می‌شوند. اگر شرط درست باشد، عبارت اول اجرا می‌شود. در غیر این صورت، عبارت دوم اجرا خواهد شد.

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