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

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

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

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

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

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

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

truthy
truthyمی‌باشد.

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

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

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

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

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
let isOnline = false
function checkStatus(status) {
return Boolean(status) ? "ONLINE" : "OFFLINE"
}
checkStatus(isOnline) // "OFFLINE"
let isOnline = false function checkStatus(status) { return Boolean(status) ? "ONLINE" : "OFFLINE" } checkStatus(isOnline) // "OFFLINE"
let isOnline = false

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

checkStatus(isOnline) // "OFFLINE"

هنگامی که متغیر

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

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

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
let unreadMessages = 0
let hasUnreadMessages = Boolean(unreadMessages)
console.log(hasUnreadMessages) // false
let unreadMessages = 0 let hasUnreadMessages = Boolean(unreadMessages) console.log(hasUnreadMessages) // false
let unreadMessages = 0
let hasUnreadMessages = Boolean(unreadMessages)
console.log(hasUnreadMessages) // false

این مثال بررسی می‌کند که آیا کاربر پیام‌های خوانده نشده دارد یا خیر. ما از تابع داخلی

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

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

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
let userInput = "";
let defaultText = "No input provided";
let displayText = Boolean(userInput) || defaultText;
console.log(displayText); // No input provided
let userInput = ""; let defaultText = "No input provided"; let displayText = Boolean(userInput) || defaultText; console.log(displayText); // No input provided
let userInput = "";
let defaultText = "No input provided";

let displayText = Boolean(userInput) || defaultText;

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

در این مثال برای این که مقدار

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

مثال ۳ null

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
let user = null;
if (user && user.name) {
console.log("Welcome, " + user.name + "!");
} else {
console.log("Please log in to access the website.");
}
let user = null; if (user && user.name) { console.log("Welcome, " + user.name + "!"); } else { console.log("Please log in to access the website."); }
let user = null;

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

در این مثالی که داریم فرض می‌شود که

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

مثال ۵ – undefined

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
let age;
if (age === undefined) {
console.log("The age is undefined.");
}
let age; if (age === undefined) { console.log("The age is undefined."); }
let age;
if (age === undefined) {
    console.log("The age is undefined.");
}

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

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

مثال ۶ NaN

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
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);
}
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); }
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
value1(رشته) را بر
value2
value2(عدد) تقسیم می‌کند. نتیجه این کار به یک مقدار
NaN
NaN منجر می‌شود زیرا نمی‌توانیم یک رشته را بر یک عدد تقسیم کنیم. این بدان معناست که کد موجود در بلاک
if
if اجرا خواهد شد. در خروجی
console.log
console.log هم عبارت
The result is not a number
The result is not a number را خواهیم دید.

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

یک راه مطمئن برای بررسی نادرست بودن یا نبودن یک مقدار، استفاده از تابع

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

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
console.log(Boolean(false))
console.log(Boolean(0))
console.log(Boolean(""))
console.log(Boolean(null))
console.log(Boolean(undefined))
console.log(Boolean(NaN))
console.log(Boolean(false)) console.log(Boolean(0)) console.log(Boolean("")) console.log(Boolean(null)) console.log(Boolean(undefined)) console.log(Boolean(NaN))
console.log(Boolean(false))
console.log(Boolean(0))
console.log(Boolean(""))
console.log(Boolean(null))
console.log(Boolean(undefined))
console.log(Boolean(NaN))

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

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
false
false
false
false
false
false
false false false false false false
false
false
false
false
false
false

در این مثال، ما مقدار بولین هر شش مقدار نادرست را بررسی کردیم و همانطور که انتظار داشتیم، هر کدام

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

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
console.log(Boolean('hello'))
console.log(Boolean(24))
console.log(Boolean('hello')) console.log(Boolean(24))
console.log(Boolean('hello'))
console.log(Boolean(24))

خروجی:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
true
true
true true
true
true

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

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

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

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
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
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
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

خروجی:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
true
true
true
true
true
true true true true true
true
true
true
true
true

سه رشته اول حاوی متنی است که ممکن است شبیه مقادیر نادرست باشد. مورد اول رشته‌ای با متن

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

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

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

true
true را return می‌کند.

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

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

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

زمانی که می‌خواهیم درستی یا نادرستی یک مقدار را بررسی کنیم، بهتر است همیشه از تابع داخلی

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

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
// 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');
}
// 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'); }
// 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');
}

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

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

هنگامی که مقادیر را برای درستی یا نادرستی مقایسه می‌کنیم، توصیه می‌شود از

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

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
// Strict Equality Example
if (1 === [1]) {
console.log('EQUAL')
} else {
console.log('NOT EQUAL')
}
// Strict Equality Example if (1 === [1]) { console.log('EQUAL') } else { console.log('NOT EQUAL') }
// Strict Equality Example

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

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

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
NOT EQUAL
NOT EQUAL
NOT EQUAL
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
// Loose Equality Example
if (1 == [1]) {
console.log('EQUAL')
} else {
console.log('NOT EQUAL')
}
// Loose Equality Example if (1 == [1]) { console.log('EQUAL') } else { console.log('NOT EQUAL') }
// Loose Equality Example
if (1 == [1]) {
  console.log('EQUAL')
} else {
  console.log('NOT EQUAL')
}

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

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
EQUAL
EQUAL
EQUAL

هر دو مثال بالا مقادیر یکسانی را با هم مقایسه می‌کنند. اما مثال

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

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

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

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

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

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

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
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);
}
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); }
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
if به وضوح نشان می‌دهد که کد در حال بررسی این است که هیچ کاربری انتخاب نشده است.

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

!
!) می‌تواند اینطور به نظر برسد که ما در حال بررسی انتخاب کاربر هستید نه اینکه بررسی کنیم آیا کاربر انتخاب نشده است. بنابراین یک کامنت در مواردی مانند این مثال می‌تواند به وضوح بیشتر کد کمک کند.

جمع‌بندی

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

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

دیدگاه‌ها:

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