truthy و falsy در جاوا اسکریپت

 

سلام امیدوارم حالتون خوب باشه، اگر شما در کنار آموزشهای من، آموزش جاوا اسکریپت رو جسته و گریخته در ویدیوهای یوتیوب یا پستهای اینستاگرام دنبال کرده باشید احتمالا با همچین پستها یا استوری هایی در اینستاگرام روبرو شدید که در قالب یک کوییز میان و یه سوالی شبیه به این میپرسن و میگن خروجی این مقدار چی میشه؟

 و  شما با خودت میگی مگه اصلا میشه True رو با استرینگ  یا نامبر ترکیب کرد؟؟ و یا ممکنه یه سوال خیلی بدیهی (از نظر شما) مطرح کنن و بگن آیا دو تا آرایه خالی با هم برابرن یا نه یعنی: []==[] و شما میگید مشخصه که آره ولی وقتی تو کنسول اجرا میکنید میبینید False نمایش داده میشه و اینجاست که  احساس میکنید گیج شدید!

من توی این آموزش میخوام در مورد truthy , falsy  صحبت کنم و یه رفرنس بهتون معرفی میکنم که با خوندن اون دیگه از دیدن همچین گزاره هایی احساس سردرگمی نمی کنید

truthy و falsy چی هستند؟!

با یه مثال شروع میکنم شما اگه در محیط کنسول این دستورات رو وارد کنید خروجی که جلوشون کامنت شده  رو میبینید:

پس در قدم اول میفهمیم که تو جاوا اسکریپت قرار نیست خروجی عملگرهای منطقی ( &&، ||  , ! ) همیشه بولین باشه. اما چرا همچین خروجی تولید شدن؟ اول بیایم در مورد این دو تا مفهوم صحبت کنیم:

falsy چیست؟

در جاوا اسکریپت این موارد falsy هستند:

undefined , null , 0 , ” , false, NaN
(توجه داشته باشید که ” استرینگ خالیه)

فالسی (falsy) یه چیزی شبیه به false ، فالس نیست ولی در قامت فالس ظاهر میشه (یعنی چی؟ جلوتر بهتر متوجه میشی)

تروسی (truthy) هم میشه هر چیزی که فالسی نباشه! پس “Hamid” در واقع تروسیه! حالا بریم سراغ این دستور

گفتیم “Hamid” تروسیه. و در قامت true هم عمل میکنه. پس حاصل  false || “Hamid میشه “Hamid”، چرا؟ گفتیم استرینگ حمید تروسیه، در قامت true عمل میکنه به این معنی که شبیه به true عمل میکنه و حاصلش میشه خودش! با این توضیح بریم سراغ مثال بعدی:

فکر کنم نیاز به توضیح نداشته باشه و مشخصه که چرا عدد 1 در خروجی نمایش داده میشه. اما نکته مهم اینه که اگه جای true و 1 رو عوض کنیم نتیجه عوض میشه: 

چرا اینجوری شد؟ چون وقتی داریم عملگر && رو بررسی میکنیم حتما باید مورد دوم رو هم بررسی کنیم. یعنی اگه اولی درست بود حتما باید دومی رو هم ببینیم درسته یا نه. به همین خاطره که در عملگر && مورد دوم رو در خروجی نشون میده.
اما برای عملگر || اینجوری نبود. اگه اولی درست باشه و عملگر || داشته باشیم دیگه نیازی نیست ادامه بدیم و مورد اول رو برمیگردونیم:

اگه تا اینجا متوجه شدید بگید خروجی کد زیر چیه؟

اولی میشه Hamid و دومی میشه Jahangiri.

اگه دلیلش رو نمیدونی ویدیوی یوتیوبم رو ببین،  اونجا توضیح دادم.

آیا [ ] == true؟

با  توضیحاتی که در مورد truthy و falsy دادم شاید بگید گزاره بالا درسته. با این استدلال که [ ]  تروسی است پس گزاره بالا هم درست میشه. اما در نظر  داشته باشید که توضیحاتی که من بهتون دادم در مورد تزکیب عملگر های منطقی با non-boolean هاست! اگه true  و false رو به عنوان بولین بشناسیم، هر چیزی غیر از این دو تا میشن non-boolean و میدونید که عملگرهای منطقی فقط && ، ||  و !  هستند، پس تروسی و فالسی اینجا بی معنیه! در واقع داریم True  رو با یه آرایه خالی مقایسه میکنیم که مشخه این گزاره اشتباه است.

چرا [ ] == [ ] یک گزاره غلطه؟

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

درسته که مقادیرشون یکیه ولی تو اکما اسکریپت وقتی دو تا آبجکت رو داری با هم مقایسه میکنی در صورتی با هم برابر هستند که جفتشون به یه آبجکت مشترک اشاره کنند. مثلا این کد رو ببینید:

شاید برای یعضیاتون این مورد یه خورده مبهم باشه که در آموزشهای بعدی بیشتر در موردشون صحبت میکنیم اما  (بچه هایی که دوره جامع جاوا اسکریپت رو تهیه میکنند در یه ویدیو به صورت کامل در موردش صحبت میکنم) بیاید با یه زبان دیگه این مفهوم رو بگم شاید بهتر متوجه شدید:

وقتی یه آبجکتی (مثل b) تعریف میکنید و مقدار دهی میکنید یه جایی تو حافظه کامپیوترتون دخیره میشه، درسته؟ وقتی که شما مینویسید c = b در واقع دارید میگید آبجکت c همون آبجکت b است، یعنی آدرس b رو تو c ذخیره میکنید. پس اگر مقدار آبجکت b عوض بشه مقدار c هم عوض میشه، چون c داره به b اشاره میکنه. ولی برای a و b اگر دقت کنید اینجوری نیست، a یه جا تو حافظه داره ذخیره میشه b یه جای دیگه. هر چند که مقادیرشون با هم برابره ولی به یه آبجکت مشترک اشاره نمیکنند.

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

تمرین های جلسه 12

1- از مقادیر زیر کدامشان truthy هستند، کدامشان falsy؟

‘Awesome’ , 1 , nul , {‘state’ : false} , [false]

2- تابع زیر چه کاری انجام میدهد؟ جواب تمرین قبل را با کمک این تابع بررسی کنید:

3- خروجی کد زیر چیست؟

مشابه سوال بالا در ویدیوی آموزشی یوتیوب توضیح داده شده است و مفهوم پارامترهای پیش فرض بیان شده است. اگر ویدیو رو ندیدی حتما ببین:

2- فرض کنید که از کاربر و یا سرور مقداری دریافت کرده اید و میخواهید با این مقدار کار کنید ولی میخواهید مطمئن باشید که مقداری وجود دارد. (یعنی متغیر شما undefined، null ، مقدار خالی و یا NaN نباشد

شما دوازدهمین جلسه از آموزشهای رایگان جاواسکریپت من رو به پایان رسوندید. اگر دوست دارید میتونید همه آموزشهای رایگان من رو در سایت و یا یوتیوب از اینجا دنبال کنید:
دوره جامع جاوا اسکریپت

این مطلب برات مفید بود؟

من یک دوره آموزشی جامع جاوا اسکریپت آماده کردم که با شرکت در این دوره شما رو آماده ورود به بازار کار میکنم. مزیت این دوره پشتیبانی دائمی دوره است که من همراه شما خواهم بود که جاوا اسکریپت رو یاد بگیرید و قدم در راه ورود به بازار کار بردارید. پیشنهاد میکنم سرفصلهای دوره و پروژه هایی که در دوره پیاده سازی شده رو ببینید:

ممنون که تا اینجا همراه من بودید. اگر از آموزش این پست خوشتون اومد و یا سوالی داشتید حتما در قسمت نظرات با من درمیون بذارید. اگر هم به یوتیوب و یا اینستاگرام دسترسی دارید من رو در این دو پلتفرم دنبال کنید و با لایک ها و کامنتاتون به من انرژی بدید. در کانال تلگرام هم میتونید بیشتر با من در ارتباط باشید