بررسی مقادیر نادرست در جاوااسکریپت

در جاوااسکریپت، هر مقدار دارای یک معادل بولین است. این بدان معنی است که می‌توانیم آن‌ها را به عنوان true (مقدار truthy) یا false (مقدار falsy) در شرایط بولین ارزیابی کنیم.

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

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

شش مقدار نادرست در جاوااسکریپت

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

ما می‌توانیم این مقادیر نادرست را به حافظه خود بسپاریم. به این ترتیب، وقتی به یک مقداری برخورد می‌کنیم که یکی از این شش عدد نیست، می‌دانیم که یک مقدار truthyمی‌باشد.

در ادامه شش مقدار نادرست در جاوااسکریپت را داریم که عبارتند از:

  • false: مقدار بولین false.
  • ۰: عدد صفر.
  • ""یا ''یا ``: یک string خالی.
  • null: کلمه کلیدی null که نشان دهنده فقدان هر مقدار آبجکت است.
  • undefined: کلمه کلیدی undefined که نشان دهنده یک value بدون مقدار اولیه است.
  • NaN: مخفف «Not a Number» است. این خروجی یک مقدار خاص را نشان می‌دهد که از یک عملیات محاسباتی return شده است که باید یک مقدار عددی را برگرداند، اما این کار را نمی‌کند.

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

مثال ۱ – مقدار بولین false

let isOnline = false

function checkStatus(status) {
  return Boolean(status) ? "ONLINE" : "OFFLINE"
}

checkStatus(isOnline) // "OFFLINE"

هنگامی که متغیر isOnline را به تابع checkStatus می‌دهیم، رشته "OFFLINE" را return می‌کند. و این موضوع به این دلیل است که value در این context falseاست. در این مثال، ما از یک عملگر ternary بر اساس مقدار بولین آرگومان statusاستفاده می‌کنیم.

مثال ۲ – عدد صفر

let unreadMessages = 0
let hasUnreadMessages = Boolean(unreadMessages)
console.log(hasUnreadMessages) // false

این مثال بررسی می‌کند که آیا کاربر پیام‌های خوانده نشده دارد یا خیر. ما از تابع داخلی Boolean برای بدست آوردن مقدار بولین متغیر UnreadMessages استفاده می‌کنیم. این بدان معناست هر زمان که تعداد unreadMessages صفر باشد، hasUnreadMessages دارای مقدار false خواهد بود.

مثال ۳ – یک string خالی

let userInput = "";
let defaultText = "No input provided";

let displayText = Boolean(userInput) || defaultText;

console.log(displayText); // No input provided

در این مثال برای این که مقدار displayTextرا تعیین کنیم از عملگر منطقی OR || استفاده می‌نماییم. اگر userInput مقداری درست باشد، مقدار userInput را به displayText اختصاص می‌دهد. اما اگر userInput یک مقدار نادرست باشد، همانطور که در این مثال می‌بینیم، defaultText را به displayText اختصاص می‌دهد.

مثال ۳ null

let user = null;

if (user && user.name) {
    console.log("Welcome, " + user.name + "!");
} else {
    console.log("Please log in to access the website.");
}

در این مثالی که داریم فرض می‌شود که user وارد نشده است. بنابراین مقدار آبجکت user برابر با null می‌باشد. این موضوع به این معنی است که عبارت if به عنوان false ارزیابی می‌شود. رفتار مورد انتظار این خواهد بود که کد موجود در بلاک else را اجرا کند.

مثال ۵ – undefined

let age;
if (age === undefined) {
    console.log("The age is undefined.");
}

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

مثال ۶ NaN

let value1 = "Ten"
let value2 = 10

let result = value1 / value2

if (isNaN(result)) {
    console.log("The result is not a number.");
} else {
    console.log(result);
}

این مثال value1(رشته) را بر value2(عدد) تقسیم می‌کند. نتیجه این کار به یک مقدارNaN منجر می‌شود زیرا نمی‌توانیم یک رشته را بر یک عدد تقسیم کنیم. این بدان معناست که کد موجود در بلاک if اجرا خواهد شد. در خروجی console.log هم عبارت The result is not a number را خواهیم دید.

چگونه بررسی کنیم که آیا یک مقدار در جاوااسکریپت نادرست است یا خیر

یک راه مطمئن برای بررسی نادرست بودن یا نبودن یک مقدار، استفاده از تابع Boolean است. تابع Boolean مقدار بولین آرگومان ارسال شده به آن را return می‌کند. به عنوان مثال:

console.log(Boolean(false))
console.log(Boolean(0))
console.log(Boolean(""))
console.log(Boolean(null))
console.log(Boolean(undefined))
console.log(Boolean(NaN))

خروجی به صورت زیر خواهد بود:

false
false
false
false
false
false

در این مثال، ما مقدار بولین هر شش مقدار نادرست را بررسی کردیم و همانطور که انتظار داشتیم، هر کدام false را return کردند. وقتی هر مقدار دیگری به غیر از این شش مقدار نادرست را به تابع Boolean ارسال کنیم، مقدار بازگشتی true خواهد بود. مثلا:

console.log(Boolean('hello'))
console.log(Boolean(24))

خروجی:

true
true

بررسی مقادیر true که ممکن است false ارزیابی شوند

برخی از مقادیر true وجود دارند که ممکن است در نگاه اول مقادیر false به نظر برسند، اما اینطور نیست. همانطور که قبلا ذکر شد، تنها شش مقدار در جاوااسکریپت وجود دارد که مقادیر نادرست هستند. به غیر از این شش مورد، هر چیز دیگری یک مقدار درست است.

موارد زیر برخی از آن مقادیری هستند که نادرست نیستند اما ممکن است به این صورت ظاهر شوند.

console.log(Boolean('false')) // An empty object
console.log(Boolean(' ')) // An empty object
console.log(Boolean('0')) // An empty object
console.log(Boolean([])) // An empty array
console.log(Boolean({})) // An empty object

خروجی:

true
true
true
true
true

سه رشته اول حاوی متنی است که ممکن است شبیه مقادیر نادرست باشد. مورد اول رشته‌ای با متن "false"، دیگری رشته‌ای با مقداری space خالی و سومی رشته‌ای با مقدار صفر است.

باید این موضوع را به خاطر داشته باشیم که تنها رشته‌ای که به عنوان مقدار نادرست در نظر گرفته می‌شود، یک رشته خالی است. تمام رشته‌های non-empty در جاوااسکریپت، حتی رشته هایی که فقط space خالی دارند مقادیر درست به حساب می‌آیند.

همچنین، باید به این موضوع توجه داشته باشیم که بر خلاف رشته‌ها، هم یک آرایه خالی و هم یک آبجکت خالی در یک boolean context  مقدار true را return می‌کند.

بهترین روش‌ها برای بررسی معادل بولین

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

استفاده از تابع Boolean

زمانی که می‌خواهیم درستی یا نادرستی یک مقدار را بررسی کنیم، بهتر است همیشه از تابع داخلی Booleanاستفاده نماییم. کارکرد این تابع به این صورت است که مقدار بولین مقادیر غیربولی را return کرده و هدف ما را برای هر کسی که کد را می‌خواند روشن می‌کند. به عنوان مثال:

// Example without the Boolean function
const value = ''; 

if (value) {
    console.log('It is a TRUTHY value');
} else {
    console.log('It is a FALSY value');
}

// Example with the Boolean function
const value = ''

if (Boolean(value)) {
    console.log('It is a TRUTHY value');
} else {
    console.log('It is a FALSY value');
}

هر دو مثال یک کار را انجام می‌دهند. اما در مثال دوم، واضح است که ما نمایش بولین مقدار تخصیص داده شده را بررسی می‌کنیم.

استفاده از === به جای ==

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

// Strict Equality Example

if (1 === [1]) {
  console.log('EQUAL')
} else {
  console.log('NOT EQUAL')
}

خروجی به شکل زیر خواهد بود:

NOT EQUAL
// Loose Equality Example
if (1 == [1]) {
  console.log('EQUAL')
} else {
  console.log('NOT EQUAL')
}

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

EQUAL

هر دو مثال بالا مقادیر یکسانی را با هم مقایسه می‌کنند. اما مثال === به عنوان خروجی "NOT EQUAL" را در کنسول ثبت می‌کند.

به همین دلیل است که عدد ۱ با آرایه‌ای که دارای عدد ۱ است برابر نیست. اما ==، تایپ مقادیر را مجبور می‌کند تا آن‌ها را از یک تایپ در نظر بگیرد. به همین دلیل است که "EQUAL" را در کنسول چاپ می‌کند.

افزودن کامنت برای مستند کردن کد

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

مستندسازی کد تمرین خوبی برای کمک به سایر توسعه‌دهندگان تیم (یا خود ما در آینده) است تا راحت‌تر رفتار مورد نظر یک قطعه کد را درک کنند. به عنوان مثال:

let selectedUser = USER_OBJ

// Check if no user is selected
if (!selectedUser) {
    console.log("Please select a user.");
} else {
    console.log("User address: " + selectedUser.address);
}

در مثال بالا، کامنت اضافه شده قبل از دستور if به وضوح نشان می‌دهد که کد در حال بررسی این است که هیچ کاربری انتخاب نشده است.

استفاده از عملگر منطقی NOT (!) می‌تواند اینطور به نظر برسد که ما در حال بررسی انتخاب کاربر هستید نه اینکه بررسی کنیم آیا کاربر انتخاب نشده است. بنابراین یک کامنت در مواردی مانند این مثال می‌تواند به وضوح بیشتر کد کمک کند.

جمع‌بندی

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

داشتن درک درست از مفهوم مقادیر درست و نادرست و نحوه تأثیر آن‌ها بر روی مقایسه‌ها و بیان شرطی هنگام دیباگ کردن برنامه‌های جاوااسکریپتی می‌تواند بسیار مفید باشد.

دیدگاه‌ها:

افزودن دیدگاه جدید