تا اینجا تو سری مقالات «آموزش مقدماتی جاوااسکریپت»، قدم به قدم جلو رفتیم و مفاهیم مهمی رو یاد گرفتیم. از اصول اولیه مثل تعریف متغیرها، انواع داده ها و تبدیل نوع ها شروع کردیم، بعد به تعامل با کاربر با استفاده از ورودی ها و نمایش پیام ها پرداختیم. تو مقالات بعدی عبارات شرطی رو بررسی کردیم و یاد گرفتیم چطور با استفاده از 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 تعریف کنیم. پس همچنان همراه ما باشید!