سؤالات مصاحبه الگوهای طراحی سطح جونیور (50 سؤال)

Question 1

در React معمولاً چه چیزی بر inheritance ترجیح داده می‌شود؟

Accepted Answer

Composition

Answer

Deep class hierarchies

Answer

Global mutable singletons فقط

Answer

حذف props

Question 2

HOC چیست؟

Accepted Answer

تابعی که کامپوننت می‌گیرد و نسخه تقویت‌شده برمی‌گرداند

Answer

یک hook داخلی مرورگر

Answer

فایل CSS

Answer

دیتابیس

Question 3

Render Props یعنی چه؟

Accepted Answer

کامپوننت یک تابع prop می‌گیرد تا UI را به مصرف‌کننده بسپارد

Answer

فقط استایل inline

Answer

حذف کامل JSX

Answer

الگوی مخصوص Vue

Question 4

اصل DRY یعنی چه؟

Accepted Answer

Don't Repeat Yourself: هر دانش یک نمایش واحد داشته باشد

Answer

Do Repeat Yourself

Answer

کد را هرگز تست نکن

Answer

همه چیز را در یک فایل بنویس

Question 5

Single Responsibility Principle در کامپوننت‌ها یعنی چه؟

Accepted Answer

هر کامپوننت/ماژول یک دلیل برای تغییر داشته باشد

Answer

هر کامپوننت فقط یک خط کد داشته باشد

Answer

فقط یک کامپوننت در اپ

Answer

هر کامپوننت فقط یک prop بگیرد

Question 6

الگوی Container/Presentational چیست؟

Accepted Answer

Container داده و منطق را مدیریت می‌کند؛ Presentational فقط UI را از props رندر می‌کند

Answer

همه کامپوننت‌ها داده را خودشان fetch می‌کنند

Answer

فقط برای class component

Answer

الگوی مخصوص CSS

Question 7

الگوی Singleton چیست؟

Accepted Answer

تضمین اینکه از یک کلاس/ماژول فقط یک نمونه وجود دارد

Answer

یک کامپوننت که فقط یک بار رندر می‌شود

Answer

آرایه‌ای با یک عضو

Answer

تابعی بدون پارامتر

Question 8

Factory function چه کاری انجام می‌دهد؟

Accepted Answer

object می‌سازد و جزئیات ساخت را پنهان می‌کند

Answer

object را حذف می‌کند

Answer

فقط کلاس‌ها را کپی می‌کند

Answer

CSS تولید می‌کند

Question 9

مزیت Module pattern چیست؟

Accepted Answer

کپسوله‌سازی: فقط API عمومی export می‌شود و بقیه خصوصی می‌ماند

Answer

همه متغیرها global می‌شوند

Answer

سرعت شبکه بالاتر

Answer

حذف نیاز به import

Question 10

اصل KISS در برنامه‌نویسی چه می‌گوید؟

Accepted Answer

راه‌حل را تا حد امکان ساده نگه دار و پیچیدگی غیرضروری اضافه نکن

Answer

همیشه از بیشترین تعداد design pattern استفاده کن

Answer

کد را برای سرعت بیشتر در یک فایل بزرگ بنویس

Answer

قبل از نوشتن کد، همه نیازهای آینده را پیاده کن

Question 11

اصل YAGNI به چه معناست؟

Accepted Answer

قابلیتی را که الان لازم نیست، پیش از نیاز واقعی پیاده نکن

Answer

هر تابع باید حداقل سه پارامتر داشته باشد

Answer

همه کامپوننت‌ها باید generic باشند

Answer

تست‌ها را فقط بعد از انتشار بنویس

Question 12

Liskov Substitution Principle به زبان ساده چه می‌گوید؟

Accepted Answer

زیرنوع باید بدون شکستن رفتار، جایگزین نوع پایه شود

Answer

هر کلاس فقط یک متد داشته باشد

Answer

کلاس‌ها نباید هرگز از هم ارث‌بری کنند

Answer

همه متغیرها باید private باشند

Question 13

Interface Segregation Principle چه توصیه‌ای دارد؟

Accepted Answer

مصرف‌کننده نباید مجبور به وابستگی به متدهایی شود که استفاده نمی‌کند

Answer

همه interfaceها را در یک فایل ادغام کن

Answer

هر interface باید دقیقاً ده متد داشته باشد

Answer

از interface استفاده نکن و فقط class بنویس

Question 14

Dependency Inversion Principle چه می‌گوید؟

Accepted Answer

ماژول‌های سطح بالا و پایین هر دو به abstraction وابسته باشند، نه به جزئیات

Answer

ماژول‌های سطح پایین باید ماژول‌های سطح بالا را import کنند

Answer

وابستگی‌ها را باید به ترتیب حروف الفبا مرتب کرد

Answer

هیچ ماژولی نباید به ماژول دیگری وابسته باشد

Question 15

Prop drilling در React چیست؟

Accepted Answer

پاس دادن props از چند لایه کامپوننت میانی که خودشان از آن استفاده نمی‌کنند

Answer

تغییر مستقیم props داخل کامپوننت فرزند

Answer

تعریف props با TypeScript

Answer

استفاده از props در useEffect

Question 16

دو کامپوننت هم‌سطح باید یک state مشترک داشته باشند. الگوی رایج چیست؟

Accepted Answer

state را به نزدیک‌ترین والد مشترک منتقل کن (lifting state up)

Answer

state را در هر دو کامپوننت جداگانه کپی کن

Answer

state را در یک متغیر global در window بگذار

Answer

از ref برای همگام‌سازی آن‌ها استفاده کن

Question 17

Separation of Concerns یعنی چه؟

Accepted Answer

تقسیم برنامه به بخش‌هایی که هر کدام به یک دغدغه مشخص می‌پردازند

Answer

جدا کردن فایل‌ها بر اساس اندازه آن‌ها

Answer

نوشتن CSS و JS در یک فایل

Answer

قرار دادن هر تابع در یک repository جدا

Question 18

الگوی Builder برای چه موقعیتی مناسب است؟

Accepted Answer

ساخت مرحله‌به‌مرحله یک شیء پیچیده با گزینه‌های زیاد

Answer

تضمین وجود فقط یک نمونه از کلاس

Answer

اطلاع‌رسانی تغییرات به چند مشترک

Answer

تبدیل یک interface به interface دیگر

Question 19

الگوی Prototype چه ایده‌ای دارد و در JavaScript چگونه دیده می‌شود؟

Accepted Answer

ساخت شیء جدید با کپی یا ارث‌بری از یک شیء موجود، مثل `Object.create(proto)`

Answer

محدود کردن ساخت شیء به یک نمونه

Answer

پنهان کردن یک سیستم پیچیده پشت یک API ساده

Answer

ذخیره تاریخچه state برای undo

Question 20

الگوی Decorator چه کاری انجام می‌دهد؟

Accepted Answer

رفتار جدید را بدون تغییر کد اصلی، با پوشاندن شیء یا تابع اضافه می‌کند

Answer

یک کلاس را به چند کلاس کوچک تقسیم می‌کند

Answer

فقط برای استایل‌دهی کامپوننت‌ها استفاده می‌شود

Answer

نمونه‌های تکراری را حذف می‌کند

Question 21

الگوی Proxy چیست و JavaScript چه ابزاری برای آن دارد؟

Accepted Answer

یک واسطه که دسترسی به شیء اصلی را کنترل می‌کند؛ `new Proxy(target, handler)`

Answer

یک کپی کامل از شیء؛ `Object.assign`

Answer

یک کلاس پایه انتزاعی؛ `abstract class`

Answer

یک event bus سراسری؛ `EventTarget`

Question 22

الگوی Iterator در JavaScript چگونه پیاده می‌شود؟

Accepted Answer

با پیاده‌سازی `Symbol.iterator` که شیئی با متد `next()` برمی‌گرداند

Answer

با تعریف متد `forEach` روی هر شیء به‌صورت اجباری

Answer

با استفاده از `setInterval`

Answer

فقط با آرایه‌ها ممکن است

Question 23

الگوی Mediator چه مشکلی را حل می‌کند؟

Accepted Answer

کاهش وابستگی مستقیم اجزا با هدایت ارتباطشان از طریق یک شیء میانجی

Answer

ساخت اشیای پیچیده مرحله‌به‌مرحله

Answer

ذخیره‌سازی cache پاسخ‌های API

Answer

تبدیل callback به Promise

Question 24

الگوی State در GoF چه ایده‌ای دارد؟

Accepted Answer

رفتار شیء با تغییر وضعیت داخلی‌اش تغییر می‌کند و هر وضعیت منطق خودش را دارد

Answer

همه داده‌ها باید در useState نگهداری شوند

Answer

state هرگز نباید تغییر کند

Answer

هر کامپوننت باید state سراسری داشته باشد

Question 25

الگوی Template Method چیست؟

Accepted Answer

اسکلت یک الگوریتم در کلاس پایه تعریف می‌شود و زیرکلاس‌ها مراحل خاص را پیاده می‌کنند

Answer

یک فایل HTML آماده برای صفحات

Answer

استفاده از template literal برای ساخت رشته

Answer

کپی کردن کد بین چند کلاس

Question 26

الگوی Composite چه ساختاری را مدل می‌کند؟

Accepted Answer

ساختار درختی که در آن برگ‌ها و گروه‌ها با یک interface یکسان رفتار می‌شوند

Answer

یک لیست پیوندی ساده

Answer

یک صف اولویت‌دار

Answer

یک کلاس با تعداد زیادی متد static

Question 27

کدام مثال، الگوی Chain of Responsibility را نشان می‌دهد؟

Accepted Answer

middlewareهایی که درخواست را به ترتیب پردازش می‌کنند و می‌توانند آن را به بعدی بدهند

Answer

کلاسی که فقط یک نمونه دارد

Answer

تابعی که یک شیء جدید می‌سازد

Answer

کامپوننتی که فقط UI رندر می‌کند

Question 28

هدف الگوی Flyweight چیست؟

Accepted Answer

کاهش مصرف حافظه با اشتراک داده‌های مشترک بین تعداد زیادی شیء

Answer

سبک کردن فایل CSS با minify

Answer

حذف کامپوننت‌های بلااستفاده

Answer

افزایش سرعت شبکه با فشرده‌سازی

Question 29

الگوی Memento برای چه استفاده می‌شود؟

Accepted Answer

ذخیره snapshot از وضعیت شیء برای بازگرداندن آن بدون فاش کردن جزئیات داخلی

Answer

memoize کردن نتیجه توابع

Answer

اتصال به WebSocket

Answer

تعریف یک کامپوننت با `React.memo`

Question 30

استفاده از prop `children` در یک کامپوننت `Card` چه مزیتی دارد؟

Accepted Answer

Card محتوای دلخواه را بدون دانستن جزئیات آن نمایش می‌دهد

Answer

Card دیگر نیازی به رندر شدن ندارد

Answer

فقط رشته متنی را می‌توان پاس داد

Answer

باعث می‌شود Card به‌صورت خودکار memoize شود

Question 31

کدام تعریف، تابع pure را درست توصیف می‌کند؟

Accepted Answer

برای ورودی یکسان خروجی یکسان می‌دهد و side effect ندارد

Answer

هیچ پارامتری نمی‌گیرد

Answer

همیشه async است

Answer

فقط داخل کلاس تعریف می‌شود

Question 32

چرا در React باید state را immutable به‌روزرسانی کرد؟

Accepted Answer

React با مقایسه reference تغییر را تشخیص می‌دهد؛ mutate کردن ممکن است re-render را از کار بیندازد

Answer

چون JavaScript اجازه تغییر آرایه‌ها را نمی‌دهد

Answer

چون immutable بودن همیشه حافظه کمتری مصرف می‌کند

Answer

چون TypeScript در غیر این صورت compile نمی‌شود

Question 33

در کد `if (status === 3)` چه مشکلی از نظر clean code وجود دارد؟

Accepted Answer

استفاده از magic number؛ بهتر است یک ثابت یا enum با نام معنادار تعریف شود

Answer

باید از `==` به‌جای `===` استفاده کرد

Answer

عدد ۳ در JavaScript مجاز نیست

Answer

شرط‌ها نباید عدد داشته باشند

Question 34

کدام نام برای یک متغیر boolean مناسب‌تر است؟

Accepted Answer

`isModalOpen`

Answer

`modal`

Answer

`flag2`

Answer

`data`

Question 35

Guard clause (early return) چه کمکی به خوانایی کد می‌کند؟

Accepted Answer

حالت‌های استثنا را زود برمی‌گرداند و از if های تودرتو جلوگیری می‌کند

Answer

اجرای تابع را سریع‌تر از همیشه می‌کنند

Answer

جایگزین try/catch می‌شوند

Answer

باعث می‌شوند تابع هیچ‌وقت مقدار برنگرداند

Question 36

تابعی به نام `saveUserAndSendEmailAndLog` چه نشانه‌ای است؟

Accepted Answer

تابع چند کار انجام می‌دهد و بهتر است به توابع کوچک‌تر تقسیم شود

Answer

نام‌گذاری بسیار خوبی است و نیازی به تغییر ندارد

Answer

تابع باید async باشد

Answer

تابع باید به یک کلاس تبدیل شود تا کار کند

Question 37

الگوی AAA در نوشتن تست چیست؟

Accepted Answer

Arrange، Act، Assert: آماده‌سازی، اجرای عمل، بررسی نتیجه

Answer

Async، Await، Assert

Answer

All, Any, Always

Answer

Add, Apply, Approve

Question 38

تفاوت اصلی unit test و integration test چیست؟

Accepted Answer

unit test یک واحد را جدا تست می‌کند؛ integration test همکاری چند بخش را

Answer

unit test فقط در مرورگر اجرا می‌شود

Answer

integration test نیازی به assertion ندارد

Answer

هیچ تفاوتی ندارند و فقط نامشان فرق دارد

Question 39

تفاوت stub و mock در تست چیست؟

Accepted Answer

stub پاسخ از پیش تعیین‌شده می‌دهد؛ mock علاوه بر آن، نحوه فراخوانی را هم بررسی می‌کند

Answer

stub فقط برای CSS است

Answer

mock همیشه به سرور واقعی وصل می‌شود

Answer

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

Question 40

هرم تست (test pyramid) چه توصیه‌ای دارد؟

Accepted Answer

تعداد زیادی unit test، تعداد کمتری integration و تعداد کمی E2E

Answer

فقط E2E test بنویس

Answer

تعداد همه انواع تست برابر باشد

Answer

تست‌ها را به ترتیب الفبا اجرا کن

Question 41

چرا نام custom hook باید با `use` شروع شود؟

Accepted Answer

تا React و linter بتوانند قوانین hookها را روی آن بررسی کنند

Answer

چون در غیر این صورت JavaScript خطای syntax می‌دهد

Answer

تا به‌طور خودکار memoize شود

Answer

تا فقط در سرور اجرا شود

Question 42

در معماری MVC، نقش Controller چیست؟

Accepted Answer

ورودی کاربر را دریافت و Model را به‌روز می‌کند و View را هماهنگ می‌کند

Answer

فقط داده‌ها را در دیتابیس ذخیره می‌کند

Answer

فقط HTML و CSS را رندر می‌کند

Answer

فایل‌های استاتیک را فشرده می‌کند

Question 43

Barrel file (مثلاً `index.ts` که چند ماژول را re-export می‌کند) چه کاربردی دارد؟

Accepted Answer

فراهم کردن یک نقطه import واحد و تمیز برای یک پوشه

Answer

اجرای تست‌ها به‌صورت موازی

Answer

فشرده‌سازی فایل‌های JavaScript

Answer

تعریف متغیرهای محیطی

Question 44

ساختار پوشه‌بندی feature-based چه تفاوتی با type-based دارد؟

Accepted Answer

فایل‌های مربوط به یک قابلیت کنار هم قرار می‌گیرند، نه بر اساس نوع فایل

Answer

همه کامپوننت‌ها در یک پوشه `components` قرار می‌گیرند

Answer

هر فایل در یک پوشه جداگانه هم‌نام قرار می‌گیرد

Answer

فقط برای پروژه‌های بک‌اند کاربرد دارد

Question 45

Code smell چیست؟

Accepted Answer

نشانه‌ای در کد که احتمالاً به مشکل طراحی عمیق‌تر اشاره دارد

Answer

یک خطای syntax که مانع اجرا می‌شود

Answer

یک باگ امنیتی قطعی

Answer

فایلی که حجم آن زیاد است

Question 46

راه‌حل رایج برای callback hell در JavaScript چیست؟

Accepted Answer

استفاده از Promise و `async/await` برای مسطح کردن جریان async

Answer

استفاده از `var` به‌جای `let`

Answer

قرار دادن همه کد در یک `setTimeout`

Answer

حذف مدیریت خطا

Question 47

Mixin در JavaScript چیست؟

Accepted Answer

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

Answer

ترکیب دو فایل CSS

Answer

یک نوع داده جدید در ES2020

Answer

کامپوننتی که فقط یک بار mount می‌شود

Question 48

هدف مطلوب در طراحی ماژول‌ها از نظر coupling و cohesion چیست؟

Accepted Answer

coupling پایین و cohesion بالا

Answer

coupling بالا و cohesion پایین

Answer

هر دو بالا

Answer

هر دو پایین

Question 49

کد `order.getCustomer().getAddress().getCity()` کدام اصل را نقض می‌کند؟

Accepted Answer

Law of Demeter (فقط با دوستان نزدیک صحبت کن)

Answer

Open/Closed Principle

Answer

DRY

Answer

Single Source of Truth

Question 50

چرا `createUser({ name, age, isAdmin })` اغلب از `createUser(name, age, isAdmin)` بهتر است؟

Accepted Answer

پارامترها نام‌دار، مستقل از ترتیب و اختیاری کردنشان ساده است

Answer

اجرای آن همیشه سریع‌تر است

Answer

نیاز به TypeScript را از بین می‌برد

Answer

فقط در کلاس‌ها کار می‌کند

الگوهای طراحی · جونیور · 50

در React معمولاً چه چیزی بر inheritance ترجیح داده می‌شود؟