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

سرفصل‌های مقاله

تصمیم گیری با مقایسه ها: اولین قدم به دنیای منطق کدنویسی
مقایسه رشته ها
مقایسه مقادیر با انواع مختلف
برابر دقیق (Strict Equality)
مقایسه null و undefined
تمرین: نتیجه این عبارات چی می‌شه؟
جمع بندی

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

گاهی وقتا می‌خوایم یه تست درست/غلط انجام بدیم و بسته به نتیجش یه کاری انجام بدیم. اینجاست که عملگرهای مقایسه به کارمون میان.

بیایید عملگرهای مقایسه رو با مثال و توضیح ساده یاد بگیریم:

عملگر	اسم	کاربرد	مثال
===	مساویِ سختگیرانه	چک می‌کنه که مقدار سمت چپ و راست دقیقاً شبیه همدیگه باشن (هم مقدار، هم نوع داده).	5 === 2 + 4 (غلطه!)
!==	نامساوی سختگیرانه	چک می‌کنه که مقدار سمت چپ و راست دقیقاً شبیه همدیگه نباشن.	5 !== 2 + 3 (غلطه!)
<	کوچک‌تر از	چک می‌کنه که مقدار سمت چپ از مقدار سمت راست کوچیک‌تر باشه.	10 < 6 (غلطه!)
>	بزرگ‌تر از	چک می‌کنه که مقدار سمت چپ از مقدار سمت راست بزرگ‌تر باشه.	10 > 20 (غلطه!)
<=	کوچک‌تر یا مساوی	چک می‌کنه که مقدار سمت چپ کوچیک‌تر یا برابر مقدار سمت راست باشه.	3 <= 2 (غلطه!)
>=	بزرگ‌تر یا مساوی	چک می‌کنه که مقدار سمت چپ بزرگ‌تر یا برابر مقدار سمت راست باشه.	5 >= 4 (درسته!)

فرق بین === و ==

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

== و !=: فقط مقدار رو مقایسه می‌کنن، حتی اگه نوع داده‌ها فرق داشته باشه.
=== و !==: هم مقدار و هم نوع داده رو مقایسه می‌کنن.

مثال:

5 == "5";  // درسته، چون فقط مقدارها رو چک می‌کنه.
5 === "5"; // غلطه، چون نوع داده‌ها فرق دارن (یکی عدد، یکی رشته).

توصیه ی دوستانه: استفاده از نسخه‌های سختگیرانه‌تر (=== و !==) معمولاً باعث می‌شه کدت کم‌تر خطا بده و رفتار غیرمنتظره نداشته باشه. پس بهتره همیشه از اونا استفاده کنی! 😎

تصمیم گیری با مقایسه ها: اولین قدم به دنیای منطق کدنویسی

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

حالا چرا اینقدر بولین‌ها مهمن؟ چون به ما اجازه می‌دن توی کدمون تصمیم بگیریم که چی کار کنیم. وقتی می‌خوایم یه انتخاب انجام بدیم، بولین‌ها حکم چراغ سبز و قرمز رو دارن! چند تا مثال ساده:

نمایش متن مناسب روی دکمه: مثلاً وقتی یه ویژگی روشنه، متن دکمه بشه "خاموش کردن"، و وقتی خاموشه بشه "روشن کردن".
نمایش پیام بازی: اگه بازی تموم شده باشه، پیام بده "بازی تمام شد!"، و اگه برنده شدی، پیام تبریک بده.
نمایش پیام مناسب فصل: مثلاً تو کریسمس "سال نو مبارک!" یا تو نوروز "عیدتون مبارک!".
زوم کردن روی نقشه: اگه کاربر زوم رو افزایش داد، نقشه رو نزدیک کن، وگرنه دورش کن.

برای مثال:

alert(2 > 1);  // true (درسته)
alert(2 == 1); // false (اشتباهه)
alert(2 != 1); // true (درسته)

جالب اینجاست که می‌تونی نتیجه مقایسه رو توی یه متغیر ذخیره کنی، درست مثل هر مقدار دیگه ای:

let result = 5 > 4; // نتیجه مقایسه توی متغیر ذخیره می‌شه
alert(result); // true

مثال: دکمه ی شروع و توقف ماشین

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

کد HTML:

<button>Start machine</button>
<p>The machine is stopped.</p>

این کد ساده ی HTML دو بخش داره:

یه دکمه با متن اولیه Start machine.
یه پاراگراف که وضعیت ماشین رو نشون می‌ده (در ابتدا ماشین خاموشه).

کد جاوااسکریپت:

const btn = document.querySelector("button");
const txt = document.querySelector("p");
btn.addEventListener("click", updateBtn);
function updateBtn() {
  if (btn.textContent === "Start machine") {
    btn.textContent = "Stop machine";
    txt.textContent = "The machine has started!";
  } else {
    btn.textContent = "Start machine";
    txt.textContent = "The machine is stopped.";
  }
}

توضیح کد:

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

اگه متن دکمه "Start machine" باشه:

متن دکمه رو به "Stop machine" تغییر بده.

وضعیت ماشین رو توی پاراگراف بنویس: "The machine has started!".

اگه متن دکمه چیز دیگه ای باشه:

متن دکمه رو برگردون به "Start machine".

وضعیت رو بنویس: "The machine is stopped.".

نتیجه:

با هر بار کلیک روی دکمه:

متن دکمه و وضعیت ماشین تغییر می‌کنه.
یه بار ماشین رو روشن می‌کنه، یه بار خاموش.

توی تابع updateBtn() از عملگر مقایسه ای == استفاده کردیم. اما اینجا دیگه هدفمون مقایسه دو تا عدد نیست. در واقع داریم چک می‌کنیم که متن دکمه برابر با یه رشته خاص هست یا نه. اگه متن دکمه "Start machine" باشه، متن رو به "Stop machine" تغییر می‌دیم و وضعیت ماشین رو هم آپدیت می‌کنیم. اما اگه متن دکمه "Stop machine" باشه، برعکس عمل می‌کنیم و برمی گردیم به حالت اول.

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

🎉زنگ تفریح: اصلا بیا واقعا یه لامپ وصل کنیم و روشن خاموشش کنیم: 😉

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

<!DOCTYPE html>
<html>
<body>
<h2>What Can JavaScript Do?</h2>
<p>JavaScript can change HTML attribute values.</p>
<p>In this case JavaScript changes the value of the src (source) attribute of an image.</p>
<button onclick="document.getElementById('myImage').src='pic_bulbon.gif'">Turn on the light</button>
<img id="myImage" src="pic_bulboff.gif" style="width:100px">
<button onclick="document.getElementById('myImage').src='pic_bulboff.gif'">Turn off the light</button>
</body>
</html>

توضیحات کد:

ساختار اولیه HTML:

یک تصویر با id="myImage" داریم که پیش فرض به صورت لامپ خاموش (تصویر pic_bulboff.gif) نمایش داده می‌شه.

دو دکمه داریم: یکی برای روشن کردن لامپ و دیگری برای خاموش کردنش.

تعویض تصویر با جاوااسکریپت:

وقتی روی دکمه Turn on the light کلیک می‌کنی، تابع onclick اجرا می‌شه.

تابع onclick به ویژگی src تصویر، مقدار جدیدی می‌ده: pic_bulbon.gif، که تصویر لامپ روشنه.

به طور مشابه، وقتی روی دکمه Turn off the light کلیک می‌کنی، ویژگی src دوباره به مقدار pic_bulboff.gif برمی گرده، که لامپ رو خاموش نشون می‌ده.

تعامل:

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

نکته: برای دیدن نتیجه، باید فایل HTML رو توی مرورگر باز کنی و مطمئن بشی که تصاویر (pic_bulbon.gif و pic_bulboff.gif) در همون پوشه ای که فایل HTML ذخیره شده، موجود باشن.

نکته مهم: اگه با دیدن این مثال برات سوال پیش اومده که جاوااسکریپت چطور این کارو انجام داده، نگران نباش! 😊
تو این مرحله ممکنه هنوز با مفهوم هایی مثل رویدادها (events) و دستکاری عناصر HTML (DOM manipulation) آشنا نباشی، اما این طبیعیه. این مثال فقط برای نشون دادن قدرت جاوااسکریپت و جذابیتش آورده شده.

برای اینکه الان بیشتر درکش کنی، می‌تونی درباره ی موارد زیر یه سرچ کوچولو انجام بدی:

JavaScript DOM manipulation (دستکاری DOM با جاوااسکریپت)
onclick attribute in JavaScript (ویژگی onclick در جاوااسکریپت)

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

مقایسه رشته ها

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

مثال ها:

alert('Z' > 'A'); // true
alert('Glow' > 'Glee'); // true
alert('Bee' > 'Be'); // true

الگوریتم مقایسه رشته ها:

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

2. اگه اولین حرف رشته اول بزرگ‌تر (یا کوچک تر) از حرف رشته دوم باشه، نتیجه مقایسه مشخصه.

3. اگه حرف‌های اول برابر باشن، میره سراغ حرف دوم و همین روند ادامه پیدا می‌کنه.

4. اگه همه حروف برابر بودن ولی طول رشته‌ها فرق داشت، رشته بلندتر بزرگ‌تر حساب می‌شه.

برای مثال:

توی مقایسه 'Z' > 'A'، همون حرف اول مشخص می‌کنه که 'Z' بزرگ تره.
اما توی مقایسه 'Glow' و 'Glee':

G با G برابرن.

l با l برابرن.

o از e بزرگ تره. پس 'Glow' بزرگ تره.

یه نکته مهم: این ترتیب لغت نامه ای کاملاً واقعی نیست

توی جاوااسکریپت، این الگوریتم بیشتر شبیه ترتیب لغت نامه ایه، ولی دقیقاً همون نیست. چرا؟ چون یونی کُد (Unicode) رو ملاک قرار می‌ده.

توی یونی کُد، حروف کوچک از حروف بزرگ بزرگ ترن. مثلاً:

alert('a' > 'A'); // true

پس 'a' به خاطر اینکه توی جدول یونی کُد شاخص بالاتری داره، از 'A' بزرگ‌تر حساب می‌شه. جزئیات بیشتر این موضوع رو توی مقاله مربوط به رشته‌ها بررسی می‌کنیم.

مقایسه مقادیر با انواع مختلف

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

مثال هایی ساده:

'2' > 1 → درسته، چون رشته '2' به عدد ۲ تبدیل می‌شه.
'01' == 1 → درسته، چون رشته '01' به عدد ۱ تبدیل می‌شه.

برای مقادیر بولین هم:

true به عدد ۱ تبدیل می‌شه.
false به عدد ۰ تبدیل می‌شه.

مثال‌های بولین:

true == 1 → درسته، چون true به ۱ تبدیل می‌شه.
false == 0 → درسته، چون false به ۰ تبدیل می‌شه.

یه نتیجه جالب و خنده دار!

گاهی پیش میاد که:

دوتا مقدار از نظر جاوااسکریپت با هم برابر باشن.
اما وقتی به بولین تبدیلشون می‌کنی، یکی true بشه و اون یکی false.

مثال:

let a = 0;
alert(Boolean(a)); // false، چون عدد صفر به false تبدیل می‌شه
let b = "0";
alert(Boolean(b)); // true، چون رشته غیرخالی همیشه true می‌شه
alert(a == b); // true، چون جاوااسکریپت برای مقایسه اون‌ها رو به عدد تبدیل می‌کنه

چرا اینطوریه؟

تو مقایسه a == b، جاوااسکریپت هر دو مقدار رو به عدد تبدیل می‌کنه، پس '0' به ۰ تبدیل می‌شه و نتیجه برابر می‌شه.
ولی تو تبدیل به بولین، قوانین متفاوتی داره. صفر false هست، ولی رشته "0" چون خالی نیست، true می‌شه. (اینو تو مقالات قبلی توضیح دادیم)

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

برابر دقیق (Strict Equality)

تو جاوااسکریپت، یه مشکل جالب با عملگر برابری معمولی == هست: این عملگر نمی‌تونه فرق بین 0 و false رو بفهمه.

مثال‌های واضح:

alert(0 == false); // true
alert('' == false); // true

چرا این اتفاق میوفته؟
چون وقتی از == استفاده می‌کنی، جاوااسکریپت سعی می‌کنه مقادیر رو به عدد تبدیل کنه. مثلاً:

false → صفر می‌شه.
رشته خالی '' → صفر می‌شه.

پس نتیجه می‌شه 0 == 0 و برابر در نظر گرفته می‌شن.

چطور از این گیجی خلاص بشیم؟

اگه بخوایم بدون تبدیل نوع مقایسه کنیم و فرق بین 0 و false رو تشخیص بدیم، باید از برابر دقیق (===) استفاده کنیم.

چرا برابر دقیق؟

عملگر === فقط وقتی true برمی گردونه که:

مقدارها برابر باشن.
نوع داده شون هم یکی باشه.

مثال:

alert(0 === false); // false، چون نوع داده‌ها متفاوته
alert('' === false); // false، باز هم به خاطر نوع داده متفاوت

عملگر نابرابر دقیق

برای مقایسه نابرابر هم نسخه دقیق داریم: !==
این دقیقاً شبیه به != هست، ولی بدون تبدیل نوع.

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

مقایسه null و undefined

وقتی پای null و undefined به مقایسه باز می‌شه، رفتار جاوااسکریپت یه ذره عجیب و غریب می‌شه. بیایید با هم بررسی کنیم.

مقایسه دقیق با ===

گفتیم اگر از === استفاده کنیم هم مقدار و هم نوع داده با هم مقایسه می‌شن. اگه بخوایم از برابر دقیق (===) استفاده کنیم.

alert(null === undefined); // false

اینجا null و undefined برابر نیستن چون نوع داده هاشون فرق داره.

مقایسه غیر دقیق با ==

اینجا یه قانون خاص وجود داره:
null و undefined فقط با هم برابر هستن و با هیچ مقدار دیگه ای برابر نمی‌شن.

alert(null == undefined); // true

مقایسه ریاضی (<, >, <=, >=)

وقتی null وارد مقایسه ریاضی بشه (<, >, <=, >=):

به عدد 0 تبدیل می‌شه.

وقتی undefined وارد مقایسه ریاضی بشه:

به NaN تبدیل می‌شه، و هر چیزی که با NaN مقایسه بشه، نتیجه false می‌ده.

مثال:

alert(null > 0);  // false (چون null به 0 تبدیل می‌شه، اما جاوااسکریپت می‌گه 0 > 0 درست نیست)
alert(null == 0); // false (چون null فقط با undefined برابره، نه چیز دیگه)
alert(null >= 0); // true (چون null به 0 تبدیل می‌شه، و 0 >= 0 درست هست)

چرا این اتفاق میوفته؟

جاوااسکریپت برای مقایسه‌ها از قوانین خاص خودش استفاده می‌کنه:

برای ==، نوع داده‌ها رو تغییر نمی‌ده و قانون خاص null و undefined رو رعایت می‌کنه.
برای مقایسه‌های ریاضی، null و undefined رو به عدد تبدیل می‌کنه:

null → 0

undefined → NaN

یه جدول ساده ی رفتاری برای null و undefined

عملگر	null	undefined
===	فقط با خودش برابر است	فقط با خودش برابر است
==	با undefined برابر است	با null برابر است
<, >, <=, >=	به 0 تبدیل می‌شود	به NaN تبدیل می‌شود

جمع بندی و جلوگیری از خطا

از مقایسه دقیق (===) استفاده کن تا با تبدیل نوع به مشکل نخوری.
بدون که null و undefined فقط با هم برابرن و با هیچ مقدار دیگه ای برابر نیستن.
موقع استفاده از مقایسه‌های ریاضی با این مقادیر دقت کن، چون ممکنه نتیجه‌ها گیج کننده بشن.

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

چند تمرین ساده برای درک بهتر

تمرین 1:

alert(undefined == null); // ?
alert(undefined === null); // ?

جواب:
true برای اولی، چون با == این دو برابر هستن.
false برای دومی، چون نوع داده هاشون فرق داره.

تمرین 2:

alert(null > 0); // ?
alert(null == 0); // ?
alert(null >= 0); // ?

جواب: false, false, true.

تمرین 3:

alert(undefined > 0); // ?
alert(undefined == 0); // ?
alert(undefined >= 0); // ?

جواب: همه ی مقایسه‌ها false می‌شن، چون undefined توی مقایسه ریاضی به NaN تبدیل می‌شه.

یه undefined غیرقابل مقایسه!

undefined با هیچ مقداری کنار نمیاد و وقتی باهاش مقایسه می‌کنی، معمولاً جواب‌ها خیلی عجیبه:

alert(undefined > 0); // false (1)
alert(undefined < 0); // false (2)
alert(undefined == 0); // false (3)

خب چرا همیشه جواب false می‌شه؟ چه مشکلی با صفر داره؟ 🤔

مقایسه‌های ریاضی (>, <)
وقتی با undefined مقایسه می‌کنی، جاوااسکریپت سعی می‌کنه اون رو به عدد تبدیل کنه.
ولی وقتی undefined به عدد تبدیل می‌شه، مقدارش می‌شه NaN.
و خب، NaN توی همه مقایسه‌های ریاضی همیشه false برمی گردونه.
بنابراین:

alert(undefined > 0); // false
alert(undefined < 0); // false

مقایسه برابری (==)
برای ==، جاوااسکریپت اصلاً undefined رو به عدد تبدیل نمی‌کنه.
اینجا یه قانون خاص وجود داره:
undefined فقط با undefined و null برابره، نه با هیچ مقدار دیگه ای.
بنابراین:

alert(undefined == 0); // false

چطور از دردسر دوری کنیم؟

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

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

مثال:

let value;
if (value === undefined || value === null) {
  alert("Value is either undefined or null");
} else if (value > 0) {
  alert("Value is greater than 0");
}

اینجوری خیالت راحته که مقایسه‌ها درست انجام می‌شن و رفتار غیرمنتظره ای پیش نمیاد.

تمرین: نتیجه این عبارات چی می‌شه؟

5 > 4
"apple" > "pineapple"
"2" > "12"
undefined == null
undefined === null
null == "\n0\n"
null === +"\n0\n"

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

5 > 4 // true
"apple" > "pineapple" // false
"2" > "12" // true
undefined == null // true
undefined === null // false
null == "\n0\n" // false
null === +"\n0\n" // false

چرا این جوری می‌شه؟

1. 5 > 4 → true: خب این واضحه، ۵ بزرگ‌تر از ۴ هست و نتیجه true می‌شه.

2. "apple" > "pineapple" → false: اینجا مقایسه لغت نامه ای انجام می‌شه. چون "a" از "p" کوچیک تره، نتیجه false می‌شه.

3. "2" > "12" → true
باز هم مقایسه لغت نامه ای.
جاوااسکریپت اولین کاراکتر رو بررسی می‌کنه:
"2" از "1" بزرگ تره، پس نتیجه true می‌شه.

4. undefined == null → true
توی مقایسه شُل (غیرسختگیرانه)، undefined و null فقط با خودشون برابر هستن.
اینجا جاوااسکریپت هیچ تبدیلی انجام نمی‌ده و نتیجه true می‌شه.

5. undefined === null → false: اما توی مقایسه سختگیرانه (===)، چون نوع داده‌ها فرق داره (یکی undefined و یکی null)، نتیجه false می‌شه.

6. null == "\n0\n" → false
توی مقایسه شُل، null فقط با خودش و undefined برابر هست.
اینجا چون با یه رشته مقایسه می‌شه، نتیجه false می‌شه.

7. null === +"\n0\n" → false
اینجا +"\n0\n" به عدد ۰ تبدیل می‌شه.
ولی چون مقایسه سختگیرانه هست و نوع داده‌ها متفاوتن (null و number)، نتیجه false می‌شه.

یادت باشه همیشه تفاوت بین == و === رو بدونی و وقتی پای null و undefined وسطه، حواست به قوانین خاصشون باشه.

جمع بندی

عملگرهای مقایسه همیشه یه مقدار بولین (true یا false) برمی گردونن.
رشته ها توی جاوااسکریپت حرف به حرف و بر اساس ترتیب "دیکشنری" مقایسه می‌شن (مثلاً "a" کوچیک‌تر از "z" هست).
اگه نوع داده‌ها فرق داشته باشه، جاوااسکریپت معمولاً مقدارها رو به عدد تبدیل می‌کنه و بعد مقایسه انجام می‌ده (به جز وقتی که از مقایسه ی سختگیرانه === استفاده کنیم).
مقدارهای null و undefined فقط با هم برابرن (با ==) و با هیچ مقدار دیگه ای برابر نیستن.
حواست باشه وقتی از مقایسه‌های مثل < یا > استفاده می‌کنی، اگه ممکنه متغیرها مقدار null یا undefined داشته باشن، باید اول جداگانه بررسیشون کنی. اینجوری خطاهای عجیب غریب نمی‌گیری!