07
مهدونستن اینکه javascript اساساً چیه، یه پایه محکم برات میسازه برای هر چیزی، از دستکاری DOM گرفته تا برنامهنویسی ناهمگام یا فریمورکهایی مثل React یا Vue. این معمولاً یکی از اولین سؤالها تو مصاحبههای فرانتانده.
جواب:
جاوااسکریپت یه زبان برنامهنویسی سطح بالا، تفسیرشده و پویاست که عمدتاً برای ساخت محتوای تعاملی و پویا تو وبسایتها استفاده میشه. تو مرورگر (سمت کاربر) اجرا میشه، ولی با محیطهایی مثل Node.js میتونه تو سرور هم اجرا بشه. جاوااسکریپت از پارادایمهای برنامهنویسی شیءگرا، تابعی و رویدادمحور پشتیبانی میکنه و این باعث میشه یه ابزار قدرتمند برای توسعه فرانتاند و بکاند باشه.
انتخاب کلمه کلیدی درست برای تعریف متغیرها جلوی باگهای مربوط به محدوده (scope)، بالاکشیدن (hoisting) و تغییرناپذیری (immutability) رو میگیره. مصاحبهکنندهها اینو میپرسن تا ببینن چقدر با جاوااسکریپت مدرن (ES6 به بعد) آشنایی.
جواب:
دونستن اینکه دادهها تو جاوااسکریپت چطور نمایش داده میشن و رفتار میکنن، کمک میکنه جلوی باگهای مربوط به نوع داده رو بگیری و دیباگ کردنت بهتر بشه.
جواب:
جاوااسکریپت دو دسته اصلی نوع داده داره:
این سؤال درکتو از سیستم تبدیل نوع (type coercion) جاوااسکریپت تست میکنه، که اگه درست نفهمیش، میتونه باعث باگهای ریز بشه.
جواب:
بالاکشیدن یه مفهوم اساسیه که روی دسترسی به متغیرها و توابع تو محدودههای مختلف اثر میذاره. مصاحبهکنندهها اینو میپرسن تا بفهمن چقدر با زمینه اجرا (execution context) آشنا هستی.
جواب:
بالاکشیدن رفتار پیشفرض جاوااسکریپته که تعریف متغیرها و توابع رو قبل از اجرای کد به بالای محدودهشون میبره.
کلوژرها یه مفهوم اصلی تو جاوااسکریپتن و خیلی تو callbackها، currying، حفظ حریم داده و الگوهای برنامهنویسی تابعی استفاده میشن.
جواب:
کلوژر وقتی ساخته میشه که یه تابع متغیرهای محدوده بیرونی خودش رو “به خاطر میسپاره”، حتی بعد از اینکه تابع بیرونی اجرا شده و تموم شده. مثال:
اینجا inner هنوز به counter دسترسی داره، حتی بعد از اینکه outer اجرا شده.
جاوااسکریپت تکریسمانی (single-threaded) است. فهم رفتار ناهمگام برای ساخت اپهای وب با عملکرد بالا خیلی مهمه.
جواب:
توابع فلشدار مختصرن و رفتار متفاوتی از نظر this دارن. برای برنامهنویسی به سبک تابعی عالیان.
جواب:
توابع فلشدار یه سینتکس کوتاه (() => {}) دارن و this، arguments، super یا new.target خودشون رو bind نمیکنن. این باعث میشه برای توابع کوتاه و callbackها مناسب باشن، ولی بهعنوان متد یا سازنده (constructor) مناسب نیستن.
دونستن محدوده لکسیکال بهت کمک میکنه بفهمی متغیرها کجا قابل دسترسیان و کلوژرها چطور کار میکنن.
جواب: محدوده لکسیکال یعنی محدوده یه متغیر با موقعیتش تو کد منبع تعیین میشه. توابع داخلی به متغیرهای تعریفشده تو محدودههای بیرونی دسترسی دارن. این همون دلیلیه که کلوژرها میتونن به متغیرها دسترسی داشته باشن حتی بعد از اینکه تابع والدشون برگشته.
این قلب رفتار ناهمگام جاوااسکریپته. دونستن این بهت کمک میکنه از شرایط رقابتی (race conditions) جلوگیری کنی و عملکرد رو بهتر کنی.
جواب: حلقه رویداد اجرای چند بخش از برنامهتو تو طول زمان مدیریت میکنه. وظایف رو بین پشته فراخوانی (call stack) و صف callback/وظایف جابهجا میکنه. رفتار غیرمسدودکننده رو تضمین میکنه و وظایف رو وقتی پشته فراخوانی خالیه اجرا میکنه.
کپی کردن اشیاء خیلی رایجه، ولی باید بدونی کی کپی سطحی (shallow) و کی کپی عمیق (deep) لازمه تا از باگهای ارجاعی جلوگیری کنی.
جواب:
اینا ابزارهای اساسی برای کار با آرایهها و تبدیل دادهها هستن.
جواب:
آرایهها و اشیاء هر دو نوعشون “object”ه، پس به یه روش مطمئن نیاز داری.
جواب: از Array.isArray(value) برای چک دقیق استفاده کن. از typeof استفاده نکن، چون برای آرایهها “object” برمیگردونه.
دیساختارینگ کدت رو تمیزتر و خوندنش رو راحتتر میکنه.
جواب: دیساختارینگ بهت اجازه میده مقادیر رو از آرایهها یا ویژگیها رو از اشیاء به متغیرهای جداگونه باز کنی.
این کار دسترسی به دادهها از ساختارهای تودرتو و APIها رو سادهتر میکنه.
عملگر Spread تو همهچیز استفاده میشه، از کپی کردن و ادغام گرفته تا فراخوانی توابع.
جواب: عملگر Spread (…) بهت اجازه میده عناصر یه شیء قابل پیمایش (مثل آرایهها یا اشیاء) رو باز کنی:
برای الگوهای تغییرناپذیری (immutability) تو React و ادغام دادهها خیلی مفیده.
وعدهها برای مدیریت عملیاتهای ناهمگام به شکلی تمیزتر و قابلفهمتر از callbackها خیلی مهمان.
جواب: یه Promise نتیجه یه عملیات ناهمگام رو نشون میده و سه حالت داره: در انتظار (pending)، انجامشده (fulfilled) و ردشده (rejected). بهجای callbackهای تودرتو (جهان callback)، وعدهها از .then() و .catch() برای زنجیرهسازی استفاده میکنن:
async/await کار با وعدهها رو سادهتر میکنه و کد ناهمگام رو شبیه کد همگام نشون میده.
جواب: توابع async یه وعده برمیگردونن و await اجرا رو متوقف میکنه تا وقتی وعده حل یا رد بشه. این باعث میشه کد تمیزتر و قابلفهمتر باشه:
fetch() یه استاندارد مدرن برای درخواستهای شبکهست.
جواب: fetch() یه API مرورگره برای درخواستهای HTTP و یه وعده برمیگردونه. برای درخواستهای GET، POST، PUT و DELETE استفاده میشه و میتونه با async/await ترکیب بشه.
کد ناهمگام بیشتر مستعد خطاست. مدیریت خطای درست خیلی مهمه.
جواب: از بلاکهای try…catch دور awaitها استفاده کن:
این کار جلوی رد شدن وعدههای مدیریتنشده رو میگیره.
این یه تکنیک کلیدیه برای عملیاتهای ناهمگام موازی مثل چند تا درخواست API.
جواب: Promise.all() یه آرایه از وعدهها میگیره و وقتی همه موفق باشن، حل میشه یا اگه یکی رد بشه، رد میشه. برای بارگذاری موازی خیلی مفیده:
ماژولها بهت اجازه میدن کد رو بین فایلها سازماندهی و بازاستفاده کنی.
جواب: ماژولهای JS از export برای اشتراک کد و import برای استفاده ازش استفاده میکنن. کپسولهسازی رو پشتیبانی میکنن و تو توسعه مدرن (ES6+، React، Node.js و غیره) خیلی استفاده میشن.
اینا معمولاً باعث باگ و سردرگمی میشن.
جواب:
این تکنیکها عملکرد رو بهینه میکنن، مخصوصاً تو رابطهای کاربری پر از رویداد.
جواب:
سوءتفاهم درباره this باعث خیلی از باگها تو جاوااسکریپت شیءگرا میشه.
جواب: this به شیئی اشاره داره که کد فعلی بهش تعلق داره. تو متدها، به شیء والد اشاره میکنه. تو توابع معمولی، this بستگی به زمینه فراخوانی داره (یا تو حالت strict تعریفنشدهست). توابع فلشدار this خودشون رو ندارن.
این روش جاوااسکریپت برای پیادهسازی شیءگراییه، نه با کلاسها (تا قبل ES6)، بلکه با پروتوتایپها.
جواب: تو وراثت پروتوتایپی، اشیاء ویژگیها رو از اشیاء دیگه از طریق زنجیره پروتوتایپ به ارث میبرن. این یه جایگزین انعطافپذیر و پویا برای وراثت کلاسیکه.
توسعهدهندههای فرانتاند مدام DOM رو دستکاری میکنن تا رابط کاربری رو بهروز کنن.
جواب: مدل شیء سند (DOM) یه ساختار درختیه که عناصر HTML یه صفحه وب رو نشون میده. جاوااسکریپت میتونه این ساختار رو بهصورت پویا دسترس و تغییر بده.
مقایسه عناصر DOM اگه نوعها همخونی نداشته باشن، میتونه نتایج غیرمنتظره بده.
جواب: همون قانون صدق میکنه: از === برای برابری سخت استفاده کن. وقتی نودهای DOM رو مقایسه میکنی، node1 === node2 چک میکنه که آیا هر دو به یه عنصر دقیقاً اشاره دارن.
انتخاب عناصر اولین قدم تو هر دستکاری DOMه.
جواب:
این روشها بهت کمک میکنن عناصر رو بهصورت پویا هدف بگیری و تغییر بدی.
این باعث میشه عملکرد بهتر بشه چون شنوندههای رویداد کمتری وصل میکنی.
جواب: واگذاری رویداد از بالاآمدن (bubbling) استفاده میکنه تا رویدادها رو تو سطح بالاتری از درخت DOM بگیره. مثلاً بهجای وصل کردن شنونده کلیک به هر فرزند، یه شنونده به والد وصل میکنی.
متوقف کردن رفتار پیشفرض اغلب برای مدیریت فرمها یا تعاملات سفارشی لازمه.
جواب: تو تابع مدیریت رویداد، event.preventDefault() رو صدا کن تا رفتار پیشفرض مرورگر (مثل ارسال فرم یا رفتن به لینک) متوقف بشه.
اینا قالببندی رشتهها رو تمیزتر و پویاتر میکنن.
جواب: قالبهای لفظی از بکتیک استفاده میکنن و از درونیابی پشتیبانی میکنن:
همچنین از رشتههای چندخطی پشتیبانی میکنن.
Callbackها پایه برنامهنویسی ناهمگام، مدیریت رویدادها و متدهای آرایهان.
جواب: یه تابع callback بهعنوان آرگومان به یه تابع دیگه داده میشه و بعداً اجرا میشه. این امکاناتی مثل مدیریت رویدادها و منطق ناهمگام رو فراهم میکنه.
منطق شرطی اغلب به بررسیهای truthy/falsy وابستهست.
جواب: مقادیر falsy اینا هستن: false، 0، ” (رشته خالی)، null، undefined، NaN. بقیه مقادیر truthy هستن. اینا روی شرطها و منطق کوتاهمدار تأثیر میذارن.
بررسی نوع به دیباگ کردن و اعمال منطق کمک میکنه.
جواب:
برای جلوگیری از آلوده کردن محدوده جهانی و ساخت بلوکهای کد جداگونه مفیدن.
جواب: یه IIFE همون موقع که تعریف میشه اجرا میشه:
برای ماژولها و کلوژرها عالیه.
کپی کردن اشتباه دادهها باعث باگهای ارجاعی میشه.
جواب:
دونستن مدیریت حافظه کمک میکنه از نشت حافظه و مشکلات عملکردی جلوگیری کنی.
جواب: جاوااسکریپت از جمعآوری زباله خودکار استفاده میکنه. وقتی هیچ ارجاعی به یه شیء نمونه، غیرقابل دسترس میشه و توسط جمعآور زباله از حافظه حذف میشه.
دونستن اینکه دادههای سمت کاربر رو کجا و چطور بهصورت امن و مناسب ذخیره کنی، یه مهارت کلیدی برای فرانتانده.
جواب:
از کوکیها برای احراز هویت، از localStorage برای تنظیمات و از sessionStorage برای دادههای موقتی استفاده کن.
این ستون اصلی اپهای وب پیشرونده (PWA) است.
جواب: سرویسورکر یه اسکریپت جاوااسکریپته که تو پسزمینه اجرا میشه و امکان دسترسی آفلاین، اعلانهای فشاری و همگامسازی پسزمینه رو فراهم میکنه. درخواستهای شبکه رو رهگیری میکنه و میتونه داراییها رو برای استفاده آفلاین کش کنه.
جاوااسکریپت تو ذاتش یه زبان تابعیه. این مفهوم پایه خیلی از کدهای مدرن جاوااسکریپت (مثل map، filter و غیره) است.
جواب: تابع مرتبه بالا یه تابعه که یه تابع دیگه رو بهعنوان آرگومان میگیره یا یه تابع برمیگردونه.
این کمک میکنه کد تمیزتر و قابلاستفادهمجدد بنویسی، مخصوصاً تو برنامهنویسی به سبک تابعی.
مسلط شدن روی این ۴۰ سؤال جاوااسکریپت بهت یه برتری جدی تو مصاحبههای فرانتاند میده 💡. اینا فقط برای گرفتن شغل نیستن، برای فهمیدن اینکه جاوااسکریپت واقعاً چطور کار میکنهان. ازشون استفاده کن تا کد تمیزتری بنویسی، مشکلات سختتر رو حل کنی و مصاحبهکنندهها رو تحت تأثیر قرار بدی.
فوقالعاده کد بزن، کنجکاو بمون و مثل یه رئیس مصاحبه کن! 🤵🏻
ممنون که خوندی! 🙏🏻
بیشتر بخوانید: “PocketBase چیست؟“
در خبرنامه ما مشترک شوید و آخرین اخبار و به روزرسانی های را در صندوق ورودی خود مستقیماً دریافت کنید.
دیدگاه بگذارید