۸۰ سوال مصاحبه فرانت‌اند با توضیح اختصاصی - قسمت ششم

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

۵۱. Call Stack توی جاوااسکریپت چیه؟
۵۲. منظور از Narrowing توی تایپ‌اسکریپت چیه؟
۵۳. چه زمانی استفاده از WebSocket مناسب نیست؟
۵۴. درباره پراپرتی Position توی CSS چه چیزهایی می‌دونین؟
۵۵. چطوری المنتی داشته باشیم که با تغییر border و padding اون طول و عرض اون ثابت بمونه؟
۵۶. از پروتوتایپ توی جاوااسکریپت چی می‌دونید؟
۵۷. Authorization و Authentication چه فرقی با هم دارن؟
۵۸. منظور از عملیات Non-Blocking I/O توی جاوااسکریپت چیه؟
۵۹. Virtual DOM چیه؟
۶۰. منظور از Pseudo-elements و Pseudo-classes توی CSS چیه؟

قبل از ادامه می‌خوام یادی کنیم از صابر راستی کردار عزیز. امیدوارم روحش شاد و در آرامش باشه ✨💚

بریم که سوالات رو بررسی کنیم.

۵۱. Call Stack توی جاوااسکریپت چیه؟

Call Stack یک ابزار هست که جاوااسکریپت با اون اجرای توابع توی برنامه رو مدیریت می‌کنه و مشخص می‌کنه برنامه توی چه مرحله‌ای هست و چه توابعی در صف اجرا هستن. منظور از Stack همون Data Structure معروف (LIFO) هست.

قبل از اجرای یک برنامهٔ جاوااسکریپتی، Call Stack یک محفظهٔ خالی هست. هر تابع به محض اینکه اجرا میشه توی Stack قرار می‌گیره و زمانی که اجرای اون تموم شد از Stack خارج میشه. تصویر زیر یک نمونه از نحوهٔ کارکرد Call Stack هست:

۵۲. منظور از Narrowing توی تایپ‌اسکریپت چیه؟

معنی واژه Narrowing یعنی محدود کردن یا باریک کردن. تایپ‌اسکریپت با عملیات Narrowing کاری می‌کنه که یک تایپ به شکل یک تایپ خاص‌تر و مشخص‌تر برای ما در دسترس باشه.

توی عکس همونطور که می‌بینیم، پارامتر x ممکنه رشته باشه یا عدد:

توی این کد دو عملیات Narrowing انجام گرفته: یکی برای بلاک if و یکی هم برای else. با این ویژگی، با پارامتر x توی بلاک if فقط به صورت رشته رفتار میشه. برای مثال اگه متد toFixed رو صدا بزنیم خطا می‌گیریم. چون توی این بلاک، x فقط به صورت رشته قابل دسترس هست. همچنین توی بلاک else تایپ‌اسکریپت می‌دونه که نوع x دیگه رشته نیست و قطعاً عددی هست. پس با اون مثل یک عدد رفتار می‌کنه.

۵۳. چه زمانی استفاده از WebSocket مناسب نیست؟

WebSocket یک پروتکل برای برقراری ارتباط دو طرفه بین کلاینت و سرور هست. برخلاف پروتکل HTTP که توی اون برای دریافت اطلاعات سرور باید همیشه درخواست‌ها رو پیاده‌سازی و ارسال کنیم، توی WebSocket ارتباط دائمی هست و اطلاعات جدید سرور به محض اینکه قابل دسترس باشن به کلاینت ارسال میشن و بلعکس. یعنی یک ارتباط دو طرفه بین کلاینت و سرور.

WebSocket در مقایسه با HTTP مزایای زیر رو داره:

۱. ارتباط دائمی به صورت Stateful بین سرور و کلاینت
۲. ارتباط شبیه Real time. به دلیل حذف شدن عملیات زمان‌برِ برقراری ارتباط بین سرور و کلاینت
۳. ارتباط دو طرفه که توی اون سرور و کلاینت به‌صورت همزمان می‌تونن اطلاعات رد و بدل کنن

حالا با توجه به سوال، چه زمانی استفاده از WebSocket پیشنهاد نمیشه؟ هر ابزاری برای کاربرد خاص معرفی شده و استفاده از اون توی شرایط نامناسب نتیجهٔ منفی به همراه داره. برقراری یک ارتباط WebSocket پیچیدگی و هزینه‌های بالاتری نسبت به HTTP داره و استفاده از اون برای تعامل معمولی سرور و کلاینت برای دریافت و ارسال اطلاعات پیشنهاد نمیشه. کاربرد WebSocket بیشتر برای ارتباطات Real-time مثل چت هست و اگه چنین استفاده‌هایی نداریم بهتره از HTTP استفاده کنیم. همچنین برای رد و بدل کردن اطلاعات بزرگ مثل آپلود فایل، پروتکل‌هایی مثل FTP گزینه‌های مناسب‌تری در مقایسه با WebSocket هستن.

۵۴. درباره پراپرتی position توی CSS چه چیزهایی می‌دونین؟

پراپرتی position توی CSS برای تنظیم کردن موقعیت یک المنت توی صفحه به کار میره. این پراپرتی شامل ۵ مقدار زیر هست:

static: مقدار پیشفرض این پراپرتی هست و المنت‌های دارای این مقدار، طبق موقعیت قرارگیری اونها توی صفحه و طبق جریان طبیعی صفحه موقعیت‌بندی میشن و قابل جابجایی توسط پراپرتی‌هایی مثل top و left و z-index نیستن.

relative: یک المنت دارای این مقدار، متناسب با موقعیت فعلی و طبیعی خودش توی صفحه می‌تونه با پراپرتی‌هایی مثل top و left و z-index جابجا بشه. بقیه المنت‌های توی صفحه تحت تأثیر موقعیت و جابجایی این المنت قرار نمی‌گیرن.

absolute: یک المنت دارای این مقدار، متناسب با اولین المنت بیرونی (والد) دارای position (غیر از static) می‌تونه با پراپرتی‌هایی مثل top و left و z-index موقعیت‌بندی بشه. برای مثال وقتی از کد زیر برای یک المنت استفاده می‌کنیم:

.element {
  position: absolute;
  top: 0;
}

این المنت توی موقیعت top: 0 نزدیک‌ترین والد دارای position قرار می‌گیره. چنین المنتی از جریان طبیعی ساختار صفحه بیرون میره و فضای مشخصی نمی‌تونه داشته باشه.

fixed: یک المنت دارای این مقدار، متناسب با بیرونی‌ترین قسمت صفحه (Window) می‌تونه با پراپرتی‌هایی مثل top و left و z-index موقعیت‌بندی بشه. مثل absolute، چنین المنتی از جریان طبیعی ساختار صفحه خارج میشه و فضای مشخصی نمی‌تونه داشته باشه. المنت‌های position: fixed همیشه یک نقطه ثابتی توی صفحه دارن و موقعیت اونها حتی با اسکرول هم تغییر نمی‌کنه.

sticky: موقعیت یک المنت با این مقدار، بر اساس موقعیت نزدیک‌ترین والدِ قابلِ اسکرول تعریف میشه. وقتی اسکرول کاربر از نقطهٔ خاصی عبور نکرده باشه، این المنت مثل position: relative عمل می‌کنه و با عبور کردن اسکرول کاربر از اون نقطه، این المنت مثل position: fixed موقعیت‌بندی میشه.

۵۵. چطوری المنتی داشته باشیم که با تغییر border و padding اون طول و عرض اون ثابت بمونه؟

این کار با دادن مقدار border-box به پراپرتی box-sizing توی CSS قابل انجام هست:

.element {
  box-sizing: border-box;
  width: 200px;
  border: 10px solid;
}

توی کد بالا با تغییر کردن مقدار border، عرض المنت روی مقدار 200 ثابت باقی می‌مونه. یعنی برای مثال با اضافه شدن 10px برای border، محتوای داخلی المنت به 180 کاهش پیدا می‌کنه تا عرض نهایی المنت برابر با 200 بشه.

مقدار پیشفرض پراپرتی box-sizing برابر با content-box هست. اگه کد بالا رو به شکل زیر تغییر بدیم:

.element {
  box-sizing: content-box;
  width: 200px;
  border: 10px solid;
}

عرض نهایی المنت برابر با 220 (200 + 10 + 10) خواهد بود. یعنی اندازهٔ Border روی عرض نهایی تأثیر داره. مشاهدهٔ دمو

۵۶. از پروتوتایپ توی جاوااسکریپت چی می‌دونید؟

معنی لغوی پروتوتایپ یعنی نمونه‌ی اولیه. هر مقداری که توی جاوااسکریپت تعریف می‌کنیم، یک سری از ویژگی‌هاش رو از یک نمونهٔ اولیه به ارث می‌بره. این ویژگی‌ها شامل متدها و پراپرتی‌های مفید هستن که ما فکر می‌کنیم توی مقداری که ساختیم وجود دارن. در صورتی که موقع ساخته شدن، از یک والد به ارث برده میشن. مثل پراپرتی length توی رشته‌ها و آرایه‌ها:

const str = "Hello, I'm not lazy; I'm just waiting for AI to write my code";
alert(str.length); // 61

const arr = [1, 2, 3, 4, 5];
alert(arr.length); // 5

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

۵۷. Authorization و Authentication چه فرقی با هم دارن؟

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

Authentication

Authentication یعنی احراز هویت. یعنی بررسی کردن اینکه کاربر مورد نظر کی هست. برای مثال وقتی توی برنامه‌ای عملیات لاگین انجام می‌دیم، در واقع داریم Authentication انجام می‌دیم و می‌خوایم به برنامه بگیم که ما کی هستیم و هویت ما چیه.

Authorization

Authorization یعنی اجازه یا مجوز. یعنی بررسی کردن اینکه کاربر مورد نظر اجازه انجام دادن یک کار خاص رو داره یا نه. برای مثال می‌خوایم بررسی کنیم که آیا یک کاربر اجازهٔ دسترسی به یک فایل رو داره یا نه. اینجا باید Authorization انجام بدیم و مجوزهای کاربر رو بررسی کنیم. توی این شرایط ممکنه کاربر احراز هویت شده باشه اما مجوز انجام یک کار مشخص رو نداشته باشه.

۵۸. منظور از عملیات Non-Blocking I/O توی جاوااسکریپت چیه؟

عملیات Non-Blocking I/O که شاید اون رو بیشتر برای Node.js شنیده باشیم، به عملیاتی گفته میشه که توی اون یک برنامه می‌تونه پردازش‌هایی Asynchronous روی ورودی‌ها و خروجی‌ها داشته باشه، بطوری که هنگام کار، Thread اصلی بلاک نشه و برای بقیه محاسبات آزاد باقی بمونه. عملیاتی مثل خوندن فایل از دیسک، اتصال و کار با دیتابیس و برقراری و مدیریت درخواست‌های HTTP.

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

اما جاوااسکریپت با پیاده‌سازی مکانیزم‌هایی مثل Event Loop و ارائه دادن ویژگی‌هایی مثل Promise ها و Async/Await می‌تونه چنین عملیاتی رو به صورت Asynchronous پردازش کنه که در نتیجهٔ اون سرعت پردازش و بطور کلی برنامهٔ ما رو بالاتر می‌بره.

۵۹. Virtual DOM چیه؟

Virtual DOM یک کپی از DOM واقعی هست که توی حافظه نگهداری میشه و هدف اون بهبود سرعت و عملکرد برنامه برای بروزرسانی UI هست. Virtual DOM که بیشتر توی فریم‌ورک‌های فرانت‌اند مثل ویو و ری‌اکت دیده میشه، یک واسط بین State برنامه و DOM اصلی هست و کمک می‌کنه عملیات بروزرسانی UI به طور بهینه‌تر و سریع‌تر انجام بشه.

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

Virtual DOM در ابتدا که صفحه رندر میشه از DOM واقعی ساخته و توی حافظه نگهداری میشه. وقتی که یک State توی برنامه تغییر می‌کنه، Virtual DOM ساختار خودش رو بروزرسانی می‌کنه و در صورت نیاز، با روش‌هایی بهینه‌شده و کم‌هزینه تصمیم به بروزرسانی UI و DOM اصلی می‌گیره. که نتیجهٔ این روش داشتن یک صفحهٔ سریع با واکنش‌پذیری بالا هست.

۶۰. منظور از Pseudo-elements و Pseudo-classes توی CSS چیه؟

Pseudo-elements (شبه المنت) به المنت‌هایی گفته میشه که در حالت عادی توی DOM نیستن. مثل المنت‌هایی که با ::after ساخته و به صفحه اضافه میشن:

a::after {
  content: "*";
}

کد بالا به انتهای همهٔ المنت‌های <a> توی صفحه یک * اضافه می‌کنه. اینجا * یک Pseudo-element هست.

Pseudo-classes به سلکتورهایی مثل hover و focus گفته میشه که در شرایط خاصی المنت‌ها رو انتخاب می‌کنن:

a:hover {
  color: darkblue;
}

توی کد بالا :hover یک Pseudo-class هست.

خب دوستان این قسمت هم به پایان رسید. امیدوارم استفاده کرده باشین. از فرم ابتدای پست استفاده کنین تا جریان قسمت‌های بعد قرار بگیرین. روزتون خوش 😉✌️