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

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

عملگرهای منطقی یکی از ابزارهای کلیدی توی جاوااسکریپت هستن که به ما کمک می‌کنن شرط‌های پیچیده‌تر بنویسیم، چندین شرط رو ترکیب کنیم، و کدهایی بهینه‌تر و خواناتر بسازیم. تو این مقاله، قراره یاد بگیریم چطور با استفاده از عملگرهای منطقی مثل AND (&&), OR (||), و NOT (!) شرط‌های حرفه ای‌تری طراحی کنیم و ازشون تو پروژه هامون استفاده کنیم.

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

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

در جاوااسکریپت، چهار عملگر منطقی داریم: || (یا - OR)، && (و - AND)، ! (نقیض - NOT)، و ?? (هم پیوست نال - Nullish Coalescing). تو این مقاله به سه عملگر اول می‌پردازیم و عملگر ?? رو تو مقالات بعدی بررسی می‌کنیم.

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

حالا بیاید جزئیات رو بررسی کنیم.

عملگر AND (&&)

عملگر && به معنای "و" هست. این عملگر زمانی مقدار true رو برمی گردونه که تمام شرط‌ها درست باشن. اگر حتی یکی از شرط‌ها false باشه، نتیجه کلی false می‌شه.

ساختار کلی:

result = a && b;

گفتیم که در برنامه نویسی کلاسیک، این عملگر فقط وقتی مقدار true رو برمی گردونه که هر دو عملوندش درست (truthy) باشن. در غیر این صورت، مقدار false برمی گرده. مثال زیر این مفهوم رو نشون می‌ده:

alert( true && true );   // true
alert( false && true );  // false
alert( true && false );  // false
alert( false && false ); // false

فرض کنید می‌خوایم ساعت و دقیقه رو بررسی کنیم. اگر ساعت ۱۲ و دقیقه ۳۰ بود، پیامی نمایش داده بشه:

let hour = 12;
let minute = 30;
if (hour == 12 && minute == 30) {
  alert('The time is 12:30');
}

اینجا شرط hour == 12 && minute == 30 بررسی می‌کنه که آیا هر دو مقدار درست هستن یا نه. اگر هر دو شرط درست باشن، پیام نمایش داده می‌شه.

توی AND می‌تونیم از هر نوع مقداری به عنوان عملوند استفاده کنیم. مثلاً:

if (1 && 0) { // معادل true && false
  alert("این کد اجرا نمی‌شه چون نتیجه false است");
}

در اینجا، چون یکی از عملوندها (0) کاذب (falsy) هست، کل شرط نتیجه ی کاذب می‌ده و کد داخل بلوک اجرا نمی‌شه.

AND “&&” مقدار کاذب اول رو پیدا می‌کنه

وقتی چندین مقدار رو با AND ترکیب می‌کنیم:

result = value1 && value2 && value3;

عملگر AND && به این صورت عمل می‌کنه:

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

به بیان ساده، AND مقدار کاذب اول یا اگر هیچ کاذبی پیدا نشد، آخرین مقدار رو برمی گردونه.

قوانین بالا شبیه به عملگر OR هستن. اما تفاوت اینه که AND مقدار کاذب اول رو برمی گردونه، در حالی که OR مقدار درست اول رو برمی گردونه.

اگر اولین عملوند truthy باشه:

alert( 1 && 0 ); // 0
alert( 1 && 5 ); // 5

اگر اولین عملوند falsy باشه، مقدار اون رو برمی گردونه و عملوند دوم نادیده گرفته می‌شه:

alert( null && 5 ); // null
alert( 0 && "no matter what" ); // 0

همچنین می‌تونیم چندین مقدار رو پشت سر هم بررسی کنیم. اولین مقدار کاذب برگشت داده می‌شه:

alert( 1 && 2 && null && 3 ); // null

اگر تمام مقادیر truthy باشن، مقدار آخر برگشت داده می‌شه:

alert( 1 && 2 && 3 ); // 3

تقدم (Precedence) عملگر AND && نسبت به OR ||

تقدم عملگر AND && بالاتر از OR || هست. بنابراین کد زیر:

a && b || c && d

معادل این کد هست:

(a && b) || (c && d)

گاهی اوقات، از عملگر AND && به عنوان راه کوتاه‌تر برای نوشتن if استفاده می‌شه. مثلاً:

let x = 1;
(x > 0) && alert('Greater than zero!');

قسمت راست && فقط زمانی اجرا می‌شه که شرط (x > 0) درست باشه. یعنی معادل این کد هست:

let x = 1;
if (x > 0) alert('Greater than zero!');

اگرچه نسخه ای که از && استفاده می‌کنه کوتاه تره، اما استفاده از if واضح‌تر و خواناتر هست. پیشنهاد می‌کنیم هر ساختار رو برای هدفش استفاده کنید: از if برای شرایط شرطی و از && برای ترکیب منطقی استفاده کنید.

بریم چند مثال دیگه بررسی کنیم؛

مثال: فرض کن می‌خوایم چک کنیم آیا سن کاربر بین 18 تا 60 هست یا نه:

let age = 25;
if (age >= 18 && age <= 60) {
  console.log("سن شما در بازه مجاز است!");
} else {
  console.log("سن شما خارج از بازه مجاز است!");
}

توضیح:

• شرط اول age >= 18 بررسی می‌کنه که آیا سن کاربر 18 یا بیشتر هست.
• شرط دوم age <= 60 بررسی می‌کنه که آیا سن کمتر یا مساوی 60 هست.
• اگر هر دو شرط درست باشن، پیام "سن شما در بازه مجاز است!" چاپ می‌شه.

نکته: عملگر && به محض برخورد با اولین مقدار غلط، بررسی بقیه شرط‌ها رو متوقف می‌کنه، چون نتیجه نهایی قطعاً false می‌شه.

عملگر OR (||)

عملگر || به معنای "یا" هست. این عملگر زمانی مقدار true رو برمی گردونه که حداقل یکی از شرط‌ها درست باشه. اگر همه شرط‌ها false باشن، نتیجه false می‌شه.

ساختار کلی:

result = a || b;

توی برنامه نویسی، عملگر "یا" معمولاً برای کار با مقادیر بولین (true و false) استفاده می‌شه. کارش اینه که اگه حتی یکی از آرگومان‌ها true باشه، نتیجش رو true برمی گردونه؛ فقط وقتی نتیجه false می‌شه که هر دو آرگومان false باشن.

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

چهار حالت ممکن وجود داره:

alert(true || true);   // true
alert(false || true);  // true
alert(true || false);  // true
alert(false || false); // false

همون طور که می‌بینید، نتیجه همیشه true هست، به جز حالتی که هر دو آرگومان false باشن.

اگه یکی از آرگومان‌ها بولین نباشه، جاوااسکریپت اون رو برای بررسی به مقدار بولین تبدیل می‌کنه. مثلاً عدد 1 به عنوان true و عدد 0 به عنوان false در نظر گرفته می‌شه:

if (1 || 0) { // مثل اینه که if(true || false)
  alert('truthy!');
}

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

مثال:

let hour = 9;
if (hour < 10 || hour > 18) {
  alert('دفتر تعطیله.');
}

اینجا اگه ساعت کمتر از ۱۰ یا بیشتر از ۱۸ باشه، پیام نشون داده می‌شه.

می تونیم چند شرط مختلف رو هم توی یه عبارت با هم ترکیب کنیم:

let hour = 12;
let isWeekend = true;
if (hour < 10 || hour > 18 || isWeekend) {
  alert('دفتر تعطیله.'); // چون آخر هفته ست
}

توی این مثال، حتی اگه ساعت تو بازه کاری باشه، چون isWeekend مقدارش true هست، پیام "دفتر تعطیله" نمایش داده می‌شه. این قدرت || هست که می‌تونیم چندین شرط رو به سادگی بررسی کنیم.

تا اینجا منطق کلاسیک OR رو دیدیم. حالا بیایید ویژگی‌های اضافی ای که جاوااسکریپت به این عملگر اضافه کرده رو بررسی کنیم.

الگوریتم گسترش یافته عملگر OR

وقتی چند مقدار با || ترکیب می‌شن:

result = value1 || value2 || value3;

عملگر || به این شکل عمل می‌کنه:

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

نکته: مقادیر در فرم اصلی خودشون (بدون تبدیل به بولین) برگردونده می‌شن.

به زبان ساده، زنجیره ای از || اولین مقدار truthy رو برمی گردونه و اگه هیچ truthy ای نباشه، آخرین مقدار رو برمی گردونه.

مثال ها:

alert(1 || 0); // 1 (چون 1 truthy هست)
alert(null || 1); // 1 (اولین مقدار truthy)
alert(null || 0 || 1); // 1 (اولین مقدار truthy)
alert(undefined || null || 0); // 0 (همه مقدارها falsy هستن، پس آخرین مقدار برمی گرده)

این رفتار باعث می‌شه که OR در جاوااسکریپت کارایی جالبی نسبت به OR بولی کلاسیک داشته باشه.

دریافت اولین مقدار truthy از یک لیست

فرض کنید متغیرهایی داریم به اسم firstName، lastName و nickName. این متغیرها ممکنه خالی (falsy) باشن. حالا می‌خوایم اولین مقدار truthy رو از بین این متغیرها پیدا کنیم و نمایش بدیم (یا اگر همه خالی بودن، یه مقدار پیش فرض مثل "ناشناس" رو نشون بدیم):

let firstName = "";
let lastName = "";
let nickName = "SuperCoder";
alert(firstName || lastName || nickName || "Anonymous"); // SuperCoder

اینجا nickName اولین مقدار truthy هست، پس برمی گرده. اگه همه متغیرها falsy بودن، مقدار "Anonymous" نمایش داده می‌شد.

ارزیابی کوتاه (Short-circuit Evaluation)

یکی دیگه از ویژگی‌های عملگر ||، ارزیابی کوتاه مدار یا همون short-circuit evaluation هست.

این ویژگی به این معناست که || به محض اینکه به اولین مقدار truthy برسه، متوقف می‌شه و بقیه مقادیر رو حتی بررسی هم نمی‌کنه.

اهمیت این ویژگی زمانی بیشتر مشخص می‌شه که یکی از عملوندها به جای یه مقدار ساده، یه عبارت یا تابعی باشه که اثر جانبی داره (مثلاً یه متغیر رو مقداردهی می‌کنه یا تابعی رو صدا می‌زنه).

مثال:

true || alert("not printed");
false || alert("printed");

در خط اول، || به محض اینکه مقدار true رو می‌بینه، متوقف می‌شه و دستور alert اجرا نمی‌شه.

در خط دوم، چون مقدار اول false هست، || ادامه می‌ده و دستور alert("printed") اجرا می‌شه.

کاربرد در اجرای دستورات

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

let isLoggedIn = false;
isLoggedIn || alert("لطفاً وارد حساب کاربری خود شوید.");

اینجا، چون isLoggedIn مقدار false داره، پیام "لطفاً وارد حساب کاربری خود شوید." نمایش داده می‌شه. اگه isLoggedIn مقدار true داشت، هیچ اتفاقی نمی‌افتاد.

حالا بریم چند مثال دیگه رو بررسی کنیم تا بهتر متوجه شیم نحوه کار این عملگر رو.

مثال: فرض کن می‌خوایم چک کنیم آیا کاربر دانشجو هست یا تخفیف ویژه داره:

let isStudent = true;
let hasDiscount = false;
if (isStudent || hasDiscount) {
  console.log("شما می‌توانید از تخفیف استفاده کنید!");
} else {
  console.log("متأسفیم، شما واجد شرایط تخفیف نیستید.");
}

توضیح:

• شرط اول isStudent بررسی می‌کنه که آیا کاربر دانشجو هست.
• شرط دوم hasDiscount بررسی می‌کنه که آیا کاربر تخفیف ویژه داره.
• اگر حداقل یکی از شرط‌ها درست باشه، پیام "شما می‌توانید از تخفیف استفاده کنید!" چاپ می‌شه.

نکته: عملگر || هم short-circuit evaluation هست. یعنی وقتی به اولین شرط true برخورد کنه، بقیه شرط‌ها رو بررسی نمی‌کنه، چون نتیجه نهایی قطعاً true می‌شه.

عملگر NOT (!)

عملگر ! به معنای "برعکس کننده" هست. این عملگر مقدار یک شرط رو برعکس می‌کنه. اگر شرط true باشه، اون رو به false تبدیل می‌کنه و برعکس.

ساختار کلی:

result = !value;

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

let isLoggedIn = false;
if (!isLoggedIn) {
  console.log("لطفاً وارد حساب کاربری خود شوید.");
} else {
  console.log("خوش آمدید!");
}

توضیح:

• مقدار isLoggedIn برابر با false هست.
• عملگر ! مقدار رو برعکس می‌کنه، یعنی !isLoggedIn برابر با true می‌شه.
• بنابراین پیام "لطفاً وارد حساب کاربری خود شوید." نمایش داده می‌شه.

ترکیب عملگرهای منطقی

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

let age = 20;
let isStudent = true;
if ((age >= 18 && age <= 25) || isStudent) {
  console.log("شما واجد شرایط هستید.");
} else {
  console.log("شما واجد شرایط نیستید.");
}

توضیح:

• (age >= 18 && age <= 25) بررسی می‌کنه که آیا سن کاربر بین 18 تا 25 هست.
• isStudent بررسی می‌کنه که آیا کاربر دانشجو هست.
• اگر هر کدوم از این دو شرط درست باشه، پیام "شما واجد شرایط هستید." نمایش داده می‌شه.

نکته‌های مهم در استفاده از عملگرهای منطقی

1. اولویت عملگرها: ترتیب اجرا اینجوریه:

• ! اول اجرا می‌شه.
• && بعد از اون.
• || در نهایت.
• برای تغییر اولویت می‌تونیم از پرانتز استفاده کنیم.

2. استفاده از کوتاه مدار بودن: استفاده از ویژگی توقف سریع در عملگر || می‌تونه به ما کمک کنه تا کدهامون رو بهینه‌تر و کوتاه‌تر بنویسیم. برای مثال:

let userName = prompt("Enter your name:") || "کاربر مهمان";
console.log(`سلام، ${userName}!`);

توضیح: 

هدف کد: گرفتن نام کاربر و نمایش پیام خوش آمدگویی. اما اگر کاربر چیزی وارد نکرد (یعنی مقدار ورودی خالی یا null باشه)، به صورت پیش فرض پیام "کاربر مهمان" نمایش داده می‌شه.

رفتار || در اینجا:

ابتدا، مقدار برگشتی از prompt ارزیابی می‌شه:

• اگر کاربر مقداری وارد کنه (مثل "علی")، اون مقدار به userName اختصاص داده می‌شه.
• اگر کاربر چیزی وارد نکنه (یا روی Cancel کلیک کنه)، مقدار prompt برابر با یک مقدار falsy (مثل null یا یک رشته خالی "") خواهد بود.
• در صورتی که مقدار ورودی prompt falsy باشه، عملگر || به سراغ سمت راست می‌ره و مقدار "کاربر مهمان" رو به userName اختصاص می‌ده.

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

اگر بخوایم همین کار رو بدون استفاده از || انجام بدیم، ممکنه کدی شبیه این بنویسیم:

let userName = prompt("Enter your name:");
if (!userName) {
  userName = "کاربر مهمان";
}
console.log(`سلام، ${userName}!`);

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

کاربردهای مشابه

این روش می‌تونه برای تنظیم مقادیر پیش فرض یا جلوگیری از خطا در زمان اجرای کد هم استفاده بشه. به چند مثال دیگه توجه کنید:

مثال ۱: مقدار پیش فرض برای تنظیمات

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

let options = {
  theme: null,
};
let theme = options.theme || "default";
console.log(`تم انتخاب شده: ${theme}`); // اگر theme خالی باشه، مقدار "default" استفاده می‌شه.

مثال ۲: مقدار پیش فرض برای توابع

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

function greet(name) {
  name = name || "کاربر ناشناس";
  console.log(`سلام، ${name}!`);
}
greet(); // نمایش: سلام، کاربر ناشناس!
greet("علی"); // نمایش: سلام، علی!

خطاهای رایج در استفاده از عملگرهای منطقی

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

1. عدم توجه به تبدیل نوع (Type Conversion)

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

مثال:

let value = "0";
if (value || false) {
  console.log("True!");
} else {
  console.log("False!");
}

توضیح: در نگاه اول ممکنه فکر کنید چون مقدار "0" رشته ای شبیه به صفر هست، شرط false می‌شه. اما در واقع، "0" یک مقدار true محسوب می‌شه. (هر رشته غیرخالی true هست) پس نتیجه ی شرط True! خواهد بود.

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

if (+value || false) { 
  console.log("True!"); 
}

2. عدم استفاده صحیح از ویژگی توقف سریع

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

مثال:

let result = true && false || "Default";
console.log(result); // "Default"

توضیح: اینجا ابتدا true && false ارزیابی می‌شه که نتیجه ی اون false هست. سپس false || "Default" بررسی می‌شه که نتیجه ی نهایی "Default" خواهد بود.

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

let result = (true && false) || "Default";

3. فراموش کردن اینکه && یا || مقدار اصلی رو برمی گردونه، نه صرفاً true/false

عملگرهای منطقی مثل && و || همیشه نتیجه ی یک مقدار اصلی رو برمی گردونن، نه فقط true یا false. این ویژگی ممکنه باعث رفتارهای غیرمنتظره بشه.

مثال:

let username = "" || "کاربر ناشناس";
console.log(username); // "کاربر ناشناس"

توضیح: چون مقدار "" falsy هست، عملگر || به مقدار دوم یعنی "کاربر ناشناس" سوئیچ می‌کنه و همون رو برمی گردونه.

4. استفاده اشتباه از عملگر !

گاهی افراد چندین بار از ! پشت سر هم استفاده می‌کنن تا مقداری رو به Boolean تبدیل کنن. این می‌تونه باعث کاهش خوانایی کد بشه.

مثال:

let isValid = !!"Hello";
console.log(isValid); // true

راه حل بهتر: از توابع استاندارد برای تبدیل به Boolean استفاده کنید:

let isValid = Boolean("Hello");
console.log(isValid); // true

5. استفاده ی غیرضروری از عملگرهای منطقی به جای if

گاهی افراد از && یا || برای اجرای دستورات استفاده می‌کنن، ولی این می‌تونه باعث کاهش خوانایی بشه.

مثال:

let age = 20;
(age > 18) && console.log("You are an adult.");

توضیح: این کد کار می‌کنه، اما خوانایی اون برای افراد مبتدی یا تیم هایی که تازه به پروژه اضافه می‌شن دشواره.

راه حل: از ساختارهای استاندارد مثل if استفاده کنید:

let age = 20;
if (age > 18) {
  console.log("You are an adult.");
}

6. اشتباه در ترتیب اولویت عملگرها

عملگرهای منطقی اولویت‌های متفاوتی دارن. مثلاً && اولویت بیشتری نسبت به || داره. این موضوع می‌تونه در صورت بی توجهی منجر به نتایج اشتباه بشه.

مثال:

let result = true || false && false;
console.log(result); // true

توضیح: اینجا ابتدا false && false محاسبه می‌شه (که false می‌شه) و سپس true || false ارزیابی می‌شه که نتیجه true هست.

راه حل: همیشه از پرانتز برای مشخص کردن اولویت استفاده کنید:

let result = (true || false) && false;

نتیجه گیری

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

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

تمرین‌های پایانی

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

تمرین ۱: ارزیابی OR

نتایج زیر چی می‌شه؟ چرا؟

alert( null || 2 || undefined );  
alert( alert(1) || 2 || alert(3) );

پاسخ و توضیح راه حل:

• در خط اول: null || 2 || undefined اولین مقدار truthy رو پیدا می‌کنه. null و undefined هر دو falsy هستن، ولی 2 truthy هست. پس جواب 2 هست.
• در خط دوم: ابتدا alert(1) اجرا می‌شه و مقدارش undefined هست (چون alert هیچ چیزی برنمی گردونه). سپس چون undefined falsy هست، به مقدار بعدی یعنی 2 می‌رسه که truthy هست و نتیجه 2 برمی گرده. alert(3) اجرا نمی‌شه چون شرط قبلی truthy پیدا شده.

تمرین ۲: ارزیابی AND

نتایج زیر چی می‌شه؟ چرا؟

alert( 1 && null && 2 );  
alert( alert(1) && alert(2) );

پاسخ و توضیح راه حل:

• در خط اول: 1 && null && 2 اولین مقدار falsy رو پیدا می‌کنه. 1 truthy هست، ولی null falsy هست، بنابراین نتیجه null خواهد بود.
• در خط دوم: ابتدا alert(1) اجرا می‌شه و مقدار undefined رو برمی گردونه. از اونجا که undefined falsy هست، شرط بعدی یعنی alert(2) اجرا نمی‌شه.

تمرین ۳: ترکیب OR و AND

نتیجه ی زیر چی می‌شه؟ چرا؟

alert( 1 && (null || 2) );

پاسخ و توضیح راه حل:

• ابتدا پرانتز محاسبه می‌شه: null || 2 که نتیجه 2 هست چون اولین مقدار truthy پیدا شده.
• سپس 1 && 2 بررسی می‌شه. چون هر دو مقدار truthy هستن، نتیجه ی نهایی 2 خواهد بود.

تمرین ۴: بررسی مقدار پیش فرض با OR

با استفاده از عملگر OR، کدی بنویسید که اگر کاربر اسمی وارد نکرد، مقدار پیش فرض "کاربر ناشناس" نمایش داده بشه.

راه حل:

let userName = prompt("نام خود را وارد کنید:") || "کاربر ناشناس";
alert(`سلام، ${userName}!`);

توضیح: اگر کاربر مقدار خالی یا falsy وارد کنه (مثل null یا "")، مقدار "کاربر ناشناس" به متغیر userName اختصاص داده می‌شه.

تمرین ۵: بررسی همزمان چند شرط

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

راه حل:

let number = +prompt("یک عدد وارد کنید:");
if (number > 0 && number % 2 === 0) {
  alert("عدد شما مثبت و زوج است.");
} else {
  alert("عدد شما یا مثبت نیست یا زوج نیست.");
}

توضیح: اینجا از عملگر AND && استفاده شده تا مطمئن بشیم هر دو شرط (مثبت بودن و زوج بودن) برقرار هستن. اگر یکی از شرط‌ها برقرار نباشه، پیغام منفی نشون داده می‌شه.

تمرین ۶: استفاده از OR برای نمایش پیام

کدی بنویسید که بررسی کنه آیا کاربر یا نام کاربری یا نام مستعار وارد کرده. اگر هیچ کدوم وارد نشده بود، پیغام "اطلاعات کافی وارد نشده!" نشون بده.

راه حل:

let userName = prompt("نام کاربری:");
let nickName = prompt("نام مستعار:");
let displayName = userName || nickName || "اطلاعات کافی وارد نشده!";
alert(displayName);

توضیح: عملگر OR || اولین مقدار truthy رو برمی گردونه. اگر کاربر هیچ مقداری وارد نکرده باشه، پیام پیش فرض نمایش داده می‌شه.

تمرین ۷: ترکیب شرط ها

کدی بنویسید که بررسی کنه آیا کاربر سنی بین ۱۸ تا ۶۰ سال داره.

راه حل:

let age = +prompt("سن خود را وارد کنید:");
if (age >= 18 && age <= 60) {
  alert("شما در بازه ی سنی مجاز هستید.");
} else {
  alert("شما خارج از بازه ی سنی مجاز هستید.");
}

توضیح: عملگر AND && بررسی می‌کنه که آیا مقدار age هم بزرگ‌تر یا مساوی ۱۸ هست و هم کوچک‌تر یا مساوی ۶۰. اگر یکی از شرط‌ها برقرار نباشه، پیغام مربوط به بازه ی غیرمجاز نمایش داده می‌شه.

تمرین ۸: تبدیل کد if به OR

کد زیر رو با استفاده از عملگر OR بازنویسی کنید:

let name = prompt("نام خود را وارد کنید:");
if (!name) {
  name = "کاربر ناشناس";
}
alert(`سلام، ${name}!`);

راه حل:

let name = prompt("نام خود را وارد کنید:") || "کاربر ناشناس";
alert(`سلام، ${name}!`);

توضیح: عملگر OR اولین مقدار truthy رو برمی گردونه. اگر کاربر مقداری وارد نکنه (falsy باشه)، مقدار پیش فرض "کاربر ناشناس" تنظیم می‌شه.

تمرین ۹: نتیجه OR

کد زیر چه خروجی ای خواهد داشت؟

alert( null || 2 || undefined );

راه حل و توضیح:

پاسخ: 2.
چرا؟
عملگر OR || از چپ به راست کار می‌کنه و اولین مقدار truthy رو برمی گردونه.

• null مقدار falsy هست، پس میره سراغ مقدار بعدی.
• 2 مقدار truthy هست، بنابراین اجرای OR اینجا متوقف می‌شه و 2 برمی گرده.
  undefined هم دیگه بررسی نمی‌شه چون مقدار truthy پیدا شده.

تمرین ۱۰: نتیجه alertهای OR

کد زیر چه خروجی ای خواهد داشت؟

alert( alert(1) || 2 || alert(3) );

راه حل و توضیح:

پاسخ: ابتدا 1 و سپس 2.
چرا؟

• alert(1) اجرا می‌شه و 1 رو نمایش می‌ده. ولی توجه داشته باشید که alert هیچ مقداری برنمی گردونه، یعنی مقدار undefined برمی گرده.
• چون undefined falsy هست، عملگر OR به سراغ مقدار بعدی میره.
• مقدار بعدی 2 هست که truthy محسوب می‌شه، پس OR متوقف می‌شه و 2 برگردونده می‌شه.
• مقدار alert(3) هیچ وقت اجرا نمی‌شه، چون OR زمانی که مقدار truthy پیدا کنه، ادامه نمی‌ده.

تمرین ۱۱: نتیجه AND

کد زیر چه خروجی ای خواهد داشت؟

alert( 1 && null && 2 );

راه حل و توضیح:

پاسخ: null.
چرا؟
عملگر AND && از چپ به راست عمل می‌کنه و به محض پیدا کردن اولین مقدار falsy، متوقف می‌شه و اون مقدار رو برمی گردونه.

• 1 مقدار truthy هست، پس میره سراغ مقدار بعدی.
• null مقدار falsy هست، پس این مقدار برگردونده می‌شه و بررسی ادامه پیدا نمی‌کنه.

تمرین ۱۲: نتیجه alertهای AND

کد زیر چه خروجی ای خواهد داشت؟

alert( alert(1) && alert(2) );

راه حل و توضیح:

پاسخ: ابتدا 1 و سپس undefined.
چرا؟

• وقتی alert(1) اجرا می‌شه، مقدار 1 رو نمایش می‌ده ولی چیزی برنمی گردونه، یعنی مقدار undefined برمی گردونه.
• چون مقدار undefined falsy هست، عملگر AND بلافاصله متوقف می‌شه و مقدار undefined رو برمی گردونه.
• به همین دلیل alert(2) اجرا نمی‌شه.

تمرین ۱۳: نتیجه OR AND OR

کد زیر چه خروجی ای خواهد داشت؟

alert( null || 2 && 3 || 4 );

راه حل و توضیح:

پاسخ: 3.
چرا؟

• اولویت عملگر AND && بالاتر از OR || هست، پس ابتدا عبارت 2 && 3 ارزیابی می‌شه.
• نتیجه 2 && 3 برابر با 3 هست، چون عملگر AND آخرین مقدار truthy رو برمی گردونه (هر دو مقدار truthy بودن).

حالا عبارت به این شکل درمیاد:

alert( null || 3 || 4 );

• عملگر OR || اولین مقدار truthy رو برمی گردونه.
• بنابراین خروجی 3 خواهد بود.

تمرین ۱۴: بررسی بازه بین دو عدد

یک شرط if بنویسید که بررسی کنه مقدار age بین ۱۴ و ۹۰ (به صورت شامل یا inclusively) هست.

راه حل و توضیح:

برای بررسی اینکه عددی بین دو مقدار خاص (به صورت شامل) قرار داره، می‌تونیم از عملگر && استفاده کنیم:

if (age >= 14 && age <= 90)

توضیح:

• شرط age >= 14 بررسی می‌کنه که مقدار age بزرگ‌تر یا مساوی ۱۴ باشه.
• شرط age <= 90 بررسی می‌کنه که مقدار age کوچک‌تر یا مساوی ۹۰ باشه.
• ترکیب این دو شرط با && تضمین می‌کنه که مقدار age در بازه ۱۴ تا ۹۰ قرار داره.

تمرین ۱۵: بررسی خارج از بازه

یک شرط if بنویسید که بررسی کنه مقدار age خارج از بازه ۱۴ تا ۹۰ (به صورت شامل یا inclusively) هست.
دو نسخه از این شرط بنویسید: یکی با استفاده از عملگر ! و دیگری بدون استفاده از اون.

راه حل و توضیح:

نسخه اول: با استفاده از NOT (!)

if (!(age >= 14 && age <= 90))

توضیح:

• شرط age >= 14 && age <= 90 بررسی می‌کنه که مقدار age در بازه ۱۴ تا ۹۰ باشه.
• با استفاده از !، نتیجه این شرط معکوس می‌شه و زمانی true خواهد بود که مقدار age خارج از بازه باشه.

نسخه دوم: بدون استفاده از NOT (!)

if (age < 14 || age > 90)

توضیح:

• شرط age < 14 بررسی می‌کنه که مقدار age کوچک‌تر از ۱۴ باشه.
• شرط age > 90 بررسی می‌کنه که مقدار age بزرگ‌تر از ۹۰ باشه.
• ترکیب این دو شرط با || تضمین می‌کنه که مقدار age خارج از بازه ۱۴ تا ۹۰ باشه.

تمرین ۱۶: سوالی درباره if

کد زیر رو بررسی کنید. کدوم یک از alertها اجرا می‌شن و نتیجه شرط‌های داخل if چی خواهد بود؟

if (-1 || 0) alert( 'first' );
if (-1 && 0) alert( 'second' );
if (null || -1 && 1) alert( 'third' );

راه حل و توضیح:

اولین alert ('first') و سومین alert ('third') اجرا می‌شن.

اولین if:

if (-1 || 0) alert( 'first' );

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

مقدار -1 truthy هست، پس شرط برقرار می‌شه و alert('first') اجرا می‌شه.

دومین if:

if (-1 && 0) alert( 'second' );

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

مقدار -1 truthy هست، ولی مقدار بعدی (0) falsy هست. پس شرط برقرار نمی‌شه و alert اجرا نمی‌شه.

سومین if:

if (null || -1 && 1) alert( 'third' );

اولویت عملگر && بالاتر از || هست، پس ابتدا -1 && 1 ارزیابی می‌شه:

-1 و 1 هر دو truthy هستن، پس نتیجه 1 خواهد بود.

حالا عبارت به شکل null || 1 درمیاد.

عملگر || اولین مقدار truthy رو برمی گردونه، که 1 هست.

شرط برقرار می‌شه و alert('third') اجرا می‌شه.

تمرین ۱۷: بررسی ورود کاربر

یک کد بنویسید که با استفاده از prompt از کاربر یک نام کاربری بخواد:

1. اگر کاربر "Admin" رو وارد کرد:

• یک prompt دیگه برای درخواست رمز عبور نمایش بده.
• اگر رمز عبور "TheMaster" بود، پیام "Welcome!" رو نمایش بده.
• اگر رمز عبور یک رشته خالی یا Esc بود، پیام "Canceled" رو نمایش بده.
• اگر هر چیز دیگه ای بود، پیام "Wrong password" رو نمایش بده.

2. اگر نام کاربری یک رشته خالی یا Esc بود، پیام "Canceled" رو نمایش بده.

3. اگر نام کاربری هر چیز دیگه ای بود، پیام "I don’t know you" رو نمایش بده.

راه حل و توضیح:

let userName = prompt("Who's there?", '');
if (userName === 'Admin') {
  let pass = prompt('Password?', '');
  if (pass === 'TheMaster') {
    alert('Welcome!');
  } else if (pass === '' || pass === null) {
    alert('Canceled');
  } else {
    alert('Wrong password');
  }
} else if (userName === '' || userName === null) {
  alert('Canceled');
} else {
  alert("I don't know you");
}

گرفتن نام کاربری:

• با استفاده از prompt از کاربر نام کاربری می‌گیریم.
• اگر userName برابر "Admin" باشه، وارد شرط اول می‌شیم و از کاربر رمز عبور می‌پرسیم.

گرفتن رمز عبور:

• اگر رمز عبور برابر با "TheMaster" باشه، پیام "Welcome!" نمایش داده می‌شه.
• اگر رمز عبور خالی ('') یا null (کاربر روی Esc کلیک کرده باشه) باشه، پیام "Canceled" نمایش داده می‌شه.
• اگر رمز عبور هیچ کدوم از این‌ها نباشه، پیام "Wrong password" نشون داده می‌شه.

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

• اگر userName خالی ('') یا null باشه، پیام "Canceled" نشون داده می‌شه.
• اگر نام کاربری هر مقدار دیگه ای باشه، پیام "I don’t know you" نمایش داده می‌شه.

نکته:

• استفاده از فاصله‌ها و تورفتگی (indentation) درون بلوک‌های if باعث خواناتر شدن کد می‌شه، هرچند که از نظر فنی ضروری نیست.
• دقت کنید که مقادیر خالی و null باید جداگانه بررسی بشن، چون هرکدوم حالت خاصی رو نمایش می‌دن.

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

جمع بندی

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

ابتدا سه عملگر OR (||)، AND (&&) و NOT (!) رو بررسی کردیم. دیدیم که این عملگرها چطور مقادیر رو از چپ به راست ارزیابی می‌کنن و بر اساس اولین مقدار منطقی تصمیم گیری می‌کنن. OR به دنبال اولین مقدار true می‌گرده، AND دنبال اولین مقدار false می‌گرده و NOT مقدار رو به عکسش تبدیل می‌کنه.

سپس با مفاهیم مهمی مثل رفتار ارزیابی کوتاه شده (short-circuit evaluation) آشنا شدیم و دیدیم که چطور می‌تونیم از این ویژگی برای ساده‌تر کردن و بهینه سازی کدهامون استفاده کنیم.

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

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

نکات کلیدی:

• عملگر OR (||): اولین مقدار truthy رو پیدا می‌کنه و بقیه رو نادیده می‌گیره.
• عملگر AND (&&): اولین مقدار falsy رو پیدا می‌کنه و بقیه رو نادیده می‌گیره.
• عملگر NOT (!): مقدار رو به عکس تبدیل می‌کنه.
• استفاده از ارزیابی کوتاه شده می‌تونه کد رو بهینه‌تر و مختصرتر کنه، اما باید دقت کنیم که قابل فهم و خوانا باقی بمونه.
• همیشه مراقب نوع داده‌ها باشیم، چون تفاوت بین truthy و falsy می‌تونه گاهی باعث نتایج غیرمنتظره بشه.

در مقاله بعدی، با عملگر nullish coalescing (??) آشنا می‌شیم که یکی از ویژگی‌های جالب جاوااسکریپته و مخصوص مواقعی استفاده می‌شه که نیاز داریم مقدار پیش فرض برای مقادیر null و undefined تعریف کنیم. پس همچنان همراه ما باشید!