سوالات جاوا اسکریپت در مصاحبه های شغلی به همراه پاسخ تشریحی

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

در این مقاله، می خواهیم به چند سوال رایجی که معمولا در مصاحبه های شغلی، چه داخلی و چه خارجی، مطرح می شوند بپردازیم و آنها را بطور کامل با مثال بررسی کنیم.

متد apply:

وقتی می خواهیم یک متد از آبجکت A را برای موارد مختلف بکار ببریم، می توانیم توسط apply کلمه کلیدی this را به آبجکت B نسبت بدهیم. در واقع reusable شود.

در مثال زیر، می خواهیم متد name را برای افراد مختلف صدا بزنیم و خروجی های مختلف بگیریم. پس توسط متد apply مقدار this را به آبجکت دلخواه مثلا JohnDoe نسبت می دهیم.

کد زیر:

برای ارسال آرگومان به متد هم می توان بعنوان آرگومان دوم متد apply در آرایه پارامترها را تعریف کرد.

متد call:

همانند متد apply است. با این تفاوت که دیگه آرگومان های ورودی متد را در آرایه تعریف نمی کنیم:

متد bind:

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

در مثال زیر گفتیم که this در متد hit مشخصا به آبجکت jumps اشاره کنه:

مفهوم closure:

کلوژر تابعی است که داخل یک تابع دیگه تعریف و return میشه. به مثال زیر توجه کنید:

کلوژر دو تا مشکل رو حل میکنه: پایداری و امنیت اطلاعات.

پایداری اطلاعات:

در مثال زیر توقع داریم شمارنده اضافه بشه و در نهایت عدد 3 چاپ شود اما چنین نیست:

شاید یک راه برای حل این مشکل استفاده از متغیرهای سراسری باشه.

امنیت اطلاعات:

پس counter را به شکل گلوبال تعریف می کنیم:

انتظار داریم شمارنده برای دابل کلیک عدد 3 و برای کلیک عدد 4 را نمایش بده اما چون counterسراسری است این مقادیر با هم جمع شده و عدد 7 را خواهیم داشت.

پس در این روش، یعنی تعریف متغیر سراسری پایداری اطلاعات داریم اما امنیت نداریم. ما توسط کلوژرها می توانیم این دو مشکل را همزمان حل کنیم:

داشتن اطلاعات امن و پایدار توسط Closure ها:

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

تعریف event propagation:

در جاوا اسکریپت وقتی یک رویداد را روی یک المنت تعریف می کنیم ممکنه این رویداد فقط همان المنت رو تحت تاثیر قرار نده و المنت های اطراف رو هم درگیر کنه. به این قضیه event propagation گفته میشه. واژه propagation یعنی گسترش، ترویج و انتشار.

در مثال زیر اگه روی دکمه کلیک کنیم دو تا پیغام میبینیم. اولی برای خود دکمه و دومی برای div والد آن:

ما در جاوا اسکریپت دو نوع propagation داریم: bubbling و capturing که در مثال بالا event bubbling را مشاهده کردیم.

تعریف event capturing:

نقطه مقابل event bubbling است. یعنی رویداد از parent به child گسترش می یابد. برای فعالسازی capturing باید در رویداد addEventListener بعنوان آرگومان سوم، مقدار true را پاس دهیم. به شکل زیر:

در مثال فوق اگه روی دکمه کلیک کنیم، دو تا alert میبینیم. اولی برای DIV و بلافاصله دومی برای BUTTON

تفاوت null و undefined:

8 نوع داده در جاوا اسکریپت: string, boolean, number, bigint, object, symbol, null, undefined

هر دوی null و undefined بصورت falsy هستند. با استفاده از عملگر double not یعنی !! می توان falsy بودن مقدار را در جاوااسکریپت بررسی کرد. یا توسط Boolean(null)

مواردی که undefined هستند:

نوع undefined برابر undefined است. یعنی typeof(undefined) برابر undefined می باشد.

نوع null در جاواسکریپت آبجکت است یعنی typeof(null) برابر object می باشد.

اگر null و undefined را با دو مساوی باهم مقایسه کنیم، true برمیگرداند. زیرا هر دو falsy هستند اما اگر با سه مساوی === مقایسه کنیم false است.

زیرا در == فقط مقادیر مقایسه می شود اما در === علاوه بر مقدار، نوع عملوندها نیز مقایسه می شود.

مفهوم hoisting:

از نظر لغوی یعنی بالا بردن. در جاوا اسکریپت یعنی قبل از اجرای برنامه، تمام متغیرها و توابع برنامه به بالاترین قسمت حوزه یا scope خودشون جابجا میشن.

خاصیت hoisting برای توابع:

به مثال ساده زیر توجه کنید:

خاصیت hoisting برای متغیرهای var:

وقتی متغیری که با var تعریف شده hoist شود به بالاترین سطح scope خودش میره و با مقدار undefined مقداردهی میشه:

در واقع کد hoist شده به شکل زیر اجرا می شود:

خاصیت hoisting برای متغیرهای var داخل توابع:

در مثال زیر هم تعریف تابع به بالاترین سطح حوزه خودش hoist میشه و همچنین متغیر var هم با undefined هویست میشه:

در تصویر بالا، دو قطعه کد سمت چپ و راست معادل هم هستند و در واقع کد سمت راستی معادل hoist شده کد سمت چپ می باشد.

خاصیت hoisting برای متغیرهای let و const:

برای متغیرهای let و const قضیه فرق میکنه. در مثال زیر میبینیم که خطای ReferenceError میگیریم. و میگوید ما نمیتونیم قبل از اینکه متغیر را مقداردهی اولیه یا initialization کنیم به آن دسترسی داشته باشیم.

پس متغیرهایی که با let و const تعریف می شوند hoist می شوند اما با هیچ مقداری مقداردهی اولیه نمی شوند.

درباره use strict:

برای نمایش خطاهای خاموش برنامه بکار می رود و باعث می شود کامپایلر با کد ما سختگیرانه برخورد کند و از هیچ نوع خطایی چشم پوشی نکند. توصیه می شود که حالت سختگیرانه را برای کدهای خود فعال کنید. زیرا برنامه نویسی را سریع تر و امن تر خواهد کرد.

برای فعال سازی این حالت کافیست عبارت زیر را به بالای کد خود اضافه کنیم:

"use strict"

نکته: حالت سختگیرانه یا strict mode می تواند درون توابع نیز تعریف شود. یعنی فقط روی یک تابع خاص اعمال شود. مثال زیر:

یکی از مواردی که strict mode فعال می شود تعریف دو آرگومان ورودی با نام های یکسان هست:

مثالی دیگر از فعال شدن حالت strict:

در مثال فوق میخواهیم متغیری را که با var,let,const تعریف نکردیم مقداردهی کنیم. با خطای ReferenceError مواجه می شویم.

مورد بعدی مقداردهی به readonly:

مورد بعدی حذف کردن با دستور delete:

مورد بعدی، مقدار this در توابع می باشد. اگر strict mode فعال باشد this دیگه به آبجکت global اشاره نمیکنه و مقدارش undefined است:

کلمه کلیدی this:

معمولا از this در داخل یک متد یا تابع استفاده می کنیم. تا قبل از اجرای تابع نمی توان گفت this در آن تابع به چه چیزی اشاره میکنه. بعنوان مثال در تابع getName کلمه this را داریم. ظاهرا شاید تصور کنید که this به آبجکت گلوبال اشاره میکنه و name یعنی مقدار Emily اما پس از اجرای تابع مشخص میشه که this به آبجکت obj اشاره داره و name آنرا چاپ میکنه.

و حالا در مثال یعد، می خواهیم this را به جای دیگری اشاره دهیم. به گلوبال.

پس مقدار name گلوبال یعنی Emily چاپ میشه.

نکته 1: اگر از this در خارج از توابع استفاده شود، مقدار آن آبجکت window در مرورگر ما خواهد بود.

نکته 2: مقدار this در توابع arrow function: همانطور که گفتیم مقدار this در توابع معمولی به آبجکتی اشاره می کنه که داره اون تابع رو اجرا میکنه اما در توابع arrow قضیه فرق داره! به اسکوپ والد آبجکتی اشاره میکنه که این تابع در آن تعریف شده. بدون توجه به اینکه تابع arrow در کجا داره صدا زده میشه.

در مثال زیر، والد یا parent آبجکت person آبجکت گلوبال ما است. پس this به گلوبال اشاره میکنه:

حالا اگه تابع arrow را به یک تابع معمولی تبدیل کنیم، this به آبجکت person اشاره میکنه:

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

به پایان این پست آموزشی می رسیم. سعی می کنم مطالب این مقاله رو آپدیت کنم و چند سوال و جواب دیگه رو هم در آینده ارائه کنم. ممنون از توجه شما. لطفا اگر سوال یا پیشنهادی دارید در زیر همین مقاله ارسال کنید یا به صفحه اینستاگرام ما به نشانی rahkarino دایرکت کنید.

منبع: ditty.ir