عجایب optional chaining در js

1. این optional chaining (در ادامه بهش میگیم oc) یه proposal ایه که حدود یه هفته پیش به استیج ۳ رسیده، و احتمالا توی ES2020 شاهدش باشیم(هرچند الان هم قابل transpile شدنه)

2. درکل کارش اینه بهمون کمک کنه به پراپرتی های عمیق یه آبجکت دسترسی داشته باشیم بدون اینکه بدونیم هیچکدوم از prop های بین راه وجود دارن یا نه.
مثال:

توی اولی اگه address مون undefined باشه ارور میده (undefined is not an object) اما توی دومی اگه address مون undefined باشه streetName برابر undefined میشه.

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

4. میتونیم ازش برای صدا زدن فانکشن ها هم استفاده کنیم:

اینجوری حتی اگه fn مون undefined هم باشه ارور نمیخوریم.

مثال:

5. میشه اینجوری براش default گذاشت:

اسم این عبارت ?? که میبینید nullish coalescing operator هست که خودش یه proposal در استیج 3 عه.
فرقش با || اینه که || حتی برای استرینگ خالی و کلا هر falsy value ای هم میره default رو میذاره ولی optional chaining فقط برای null و undefined اینکارو میکنه.

6. قبل از این operator جایگزینی که استفاده می‌کردیم عبارت && بود که خب خیلی مناسب نیست. به دو دلیل:

الف) موقع استفاده از && جاوااسکریپت آخرین عبارت سمت چپ رو برمیگردونه. این یعنی یه همچین چیزی:

اما اینجا اگر هم number مون null باشه آخرین عبارتی که بررسی کرده یعنی number رو برمیگردونه و نتیجه برابر null میشه. ولی با optional chaining جواب همیشه undefined عه.

ب) موقع استفاده از && هر falsy value ای منجر به شکسته شدن زنجیره میشه ولی با استفاده از oc فقط و فقط null و undefined حلقه رو میشکنن.

تو مثال اول مقدار length میشه 1 چون a یه string خالیه و تبدیل به false میشه و عبارت || اجرا میشه.
اما تو مثال دوم مقدار length میشه 0 چون a نه undefined عه و نه null پس پراپرتی length اش خونده میشه و طول a که برابر 0 هست نمایش داده میشه.

منابع:

https://2ality.com/2019/07/optional-chaining.html
https://github.com/tc39/proposal-optional-chaining

دیگر مقالات من: