نوشته های Saeideh abs

سوالاتی که از من در مصاحبه‌های توسعه‌دهنده Frontend پرسیده شد (بخش 4)

Saeideh abs — Fri, 07 Feb 2025 19:37:38 +0330

سلام سلامتوی این قسمت از سری سوالات مصاحبه، به بررسی سوالات مربوط به رندر سمت سرور و Next.js میپردازیم. سوالات این قسمت خیلی کم هست و زود تموم میشه و معمولا هم فقط مفاهیم به صورت کلی پرسیده میشدن (مثلا hydration چی هست، یا انواع روش های رندر سمت سرور توی Next.js چیا هست و ...)توی قسمت های قبلی، سوالات جاوااسکریپت و react رو هم گذاشتم براتون که از لینک های زیر قابل دسترسی ان:جاوااسکریپت ۱ (سوالات شفاهی)جاوااسکریپت ۲ (سوالات عملی، الگوریتم و حل مسئله)react۱- توضیح دهید server side rendering(SSR) چیست و چه مزیت هایی دارد؟ویدیوی زیر خیلی ساده و مفید SSR, CSR, SSG و ISR رو توضیح داده: SSR, etcاما در مورد بخش دوم سوال که مزایای SSR هست: داکیومنت Next.js این مزایا رو توضیح داده: SSR benefits۲- دو رویکرد SSR و CSR رو با هم مقایسه کنید. چه شباهت ها و تفاوت هایی دارند؟تو جدول زیر این روش ها مقایسه شدن:SSR vs CSR۳- به خاطر مزایایی که SSR داره، آیا خوبه که همیشه سمت سرور کد ها رو رندر کنیم؟ (چه زمانی از CSR و چه زمانی از SSR استفاده کنیم؟) SSR و CSR هر کدوم مزایا و معایب خودشون رو دارن. بنابراین با توجه به نوع نیازمندی ها و اپلیکیشن شما، ممکنه یه کدوم از این دو روش مناسب باشه. به طور کلی وقتی اپلیکیشن شما، interactivity زیادی داره و یوزر مدام در تعامل هست و محتوای صفحات براساس اکشن های یوزر مدام تغییر میکنه، یا state های زیادی دارید، SSR بی فایده هست (چون محتوا بیشتر شخصی سازی شده هست)یا اگر SEO براتون مهم نیست، یا صفحات private هستن، خب نیاز به SSR کمتر هست (لزوما ولی به این معنا نیست که از SSR استفاده نکنید)اگر اپلیکیشن real-time ای دارید مثل چت، live data, websocket مثل قیمت زنده سهام و ... SSR انتخاب مناسبی نیست.when to use SSR vs CSRالبته ناگفته نماند که با استفاده از Next.js شما میتونید از ترکیب SSR و RSC و CSR هم بهره ببرید :))تو جدول زیر مقایسه یه اپ fully CSR با استفاده از React و یک اپ ترکیبی CSR و RSC با استفاده از Next.js رو میبینید:fully CSR vs CSR+RSC۴- توضیح دهید hydration چیست؟پاسخ: hydration۵- سرور کام‍پوننت ها (RSC) چی هستن؟تعریف دقیق server component ها و همچنین server function ها رو میتونید از داکیومنت react بخونید: react server componentsreact server functionsداکیومنت nextjs هم بخونید، خوبه:nextjs server components۶- کاربرد reactDom.renderToString چیست؟پاسخ: renderToStringمنابع:https://www.youtube.com/watch?v=YkxrbxoqHDw&amp;amp;list=WL&amp;amp;index=5&amp;amp;t=431shttps://nextjs.orghttps://dev.to/jitendrachoudhary/what-is-react-hydration-2bc3https://react.dev

سوالاتی که از من در مصاحبه‌های توسعه‌دهنده Frontend پرسیده شد (بخش ۳)

Saeideh abs — Fri, 24 Jan 2025 09:15:47 +0330

سلام و دروددر ادامه سری سوالات مصاحبه، این سری، سوالات مربوط به react رو بررسی میکنیم.بخش اول که مربوط به سوالات جاوااسکریپت هست رو از این لینک میتونید بخونید.بخش دوم که ترکیبی از سوالات عملی و live code جاوااسکریپت و الگوریتم و حل مسئله هست رو هم از این لینک میتونید بخونید.اما بریم سراغ سوالات react۱- پارامتر key در react که در لوپ ها ملزم به استفاده از اون هستیم، چی هست؟ و استفاده از ایندکس به عنوان key چه محدودیت هایی داره؟ لینک زیر اول به خوبی مفاهیم virtual dom و reconciliation رو توضیح داده و سپس نحوه استفاده از پارامتر key رو باز کرده: key parameter۲- تفاوت React.Fragment و ...<>هر دو React.Fragment و <>... برای گروهبندی چندین المنت بدون اضافه کردن یک المنت والد اضافی به DOM استفاده می شن. اما React.Fragment می تونه attribute هایی مثل key که برای رندر کردن لیست ها مفید هست رو بپذیره در حالی که ...<> نمی تونه این attribute ها رو بپذیره.۳- توضیح دهید virtual dom چیست؟پاسخ: virtual dom۴- فرق useMemo و useCallback و کاربرد هر کدام را توضیح دهید. آیا همیشه از این ها باید استفاده کنیم(چه مواقعی باید از این هوک ها استفاده کنیم)؟بهترین منبع برای اینجور مطالب داکیومنت خود react هست(که تو مثال های خودش به بخش دوم سوال هم پاسخ داده): useCallback & useMemo اما از این لینک هم میتونید به صورت خلاصه و زبان فارسی تفاوت این دو هوک رو بخونید: useMemo vs useCallback۵- توضیح دهید هوک useEffect چی هست و چه طور life cycle های کلاس کامپوننت ها رو پیاده میکنه؟تعریف useEffect :useEffectاما به روش های زیر میتونیم life cycleها رو با useEffect پیاده سازی کنیم:componentDidMountcomponentDidMountcomponentDidUpdatecomponentDidUpdate_1 اما اگر بخوایم اولین رندر رو skip کنیم میتونیم این شکلی بنویسیمش:componentDidUpdate_2componentWillUnmountcomponentWillUnmount۶- خروجی کدهای زیر رو با هم مقایسه کنید:useEffect(() => { console.log('test') }) useEffect(() => { console.log('test') }, [ ]) useEffect(() => { console.log('test') }, [a]) useEffect(() => { return () => console.log('test') }, [ ])در اولین useEffect از اونجایی که dependency array رو ندادیم بهش، پس console.log در هر بار رندر شدن کامپوننت(چه در رندر اولیه، چه در هر اپدیت) اجرا میشه.دومین useEffect فقط در اولین رندر اجرا میشه.سومین useEffect فقط زمانی اجرا میشود که مقدار a تغییر کنه.در چهارمین useEffect, پیش از unmount شدن کامپوننت، console.log اجرا میشه.۷- کد زیر چندبار اجرا میشود؟const [state, setState] = useState({a:1}) useEffect(() => { setState({a:1}) }, [state])کد بالا به صورت بی نهایت اجرا میشه و باعث ایجاد یک حلقه بی پایان میشه. علتش هم اینه که هربار که ما setState({a:1}) رو کال میکنیم، از اونجایی که {a:1} یک آبجکت جدید رو برمیگردونه(هرچند محتوا یکسان هست اما رفرنسشون در حافظه متفاوته)، پس state هر بار در حال تغییر کردن هست و چون state جزو آرایه وابستگی useEffect هست پس useEffect مجددا اجرا میشه.۸-کاربرد هوک useLayoutEffect چیست؟از داکیومنت خود react میتونید درباره اش بخونید: useLayoutEffect۹- آیا useEffect, سنکرون (sync) هست یا آسنکرون (async)؟برخلاف useLayoutEffect که قبل ازینکه مرورگر اسکرین رو repaint بکنه به صورت سنکرون اجرا میشه، useEffect به صورت آسنکرون بعد از repaint شدن اسکرین توسط مرورگر اجرا میشه. به خاطر همین هم برای استفاده از useLayoutEffect باید دقت کنید که پردازشتون اگه خیلی سنگین باشه، میتونه رندرینگ UI رو بلاک کنه.۱۰- کاربرد هوک useImperativeHandle چیست؟پاسخ: useImperativeHandle۱۱- هوک useReducer و کاربردهای اون رو توضیح دهید.داکیومنت خود react برای useReducer: useReducerاز اینجا هم میتونید مقایسه useState و useReducer رو بخونید: useState vs useReducerبه طور مثال اما useRducer جایی کاربرد داره که مثلا شما اکشن های مختلفی رو قراره روی stateتون اعمال کنید. به طور مثال توی یک اپ counter، شما اکشن های مختلفی مثل increment, decrement, reset و ... رو ممکنه داشته باشید. تو همچین شرایطی به جای اینکه state رو با event handlerها اپدیت کنید، میتونید از useReducer استفاده کنید و تابع reducerتون رو اصلا به یک فایل دیگه خارج از کامپونتتون منتقل کنید. همچنین توی تابع reducer میتونید اکشن های reset, decrement, increment رو هندل کنید.نقل قول از داکیومنت react:useReducer is very similar to useState, but it lets you move the state update logic from event handlers into a single function outside of your component. Read more about choosing between useState and useReducer.۱۲- خروجی کد زیر چیست؟const myref = useRef(0); useEffect(() => { console.log(1); }, [myref.current]) ... اگر کد بالا رو اجرا کنید، میبینید که فقط یکبار عدد ۱ توی کنسول چاپ میشه (زمانی که کامپوننت mount میشه). بعد از اون هر چه قدر که دکمه click رو کلیک بکنید، هیچ چیزی توی کنسول چاپ نمیشه. علتش هم اینه که تابع داخل useEffect اصلا فایر نمیشه. حالا چرا فایر نمیشه؟ به خاطر اینکه اپدیت کردن ref (اینجا myref) باعث ریرندر شدن کامپوننت نمیشه. فقط زمانی کامپوننت ریرندر میشه که state ها اپدیت بشن. لذا چون ریرندری اتفاق نمیفته، پس useEffect هم هیچوقت مقدار myref.current فعلی رو با قبلی مقایسه نمیکنه که متوجه تغییری بشه (که اگر مقادیر موجود در dependency array تغییر کرده بود، تابع رو اجرا کنه).۱۳- چند مورد از کاربردهای ref رو در react بگویید.همونطور که تو سوال قبل هم اشاره شد، یه نکته مهم در رابطه با ref این هست که باعث رندر مجدد کامپوننت نمیشه. کاربردهاش هم مرتبط به همین ویژگیش هست:دسترسی مستقیم به عناصر DOMبا استفاده از ref میتونید مستقیما با عناصر HTML تعامل داشته باشید و ویژگی هایی مثل فوکوس، اسکرول و ... رو کنترل کنید.ذخیره مقادیری که نیاز به رندر مجدد ندارن، اما میخواهیم اون مقادیر بین ریرندرها، حفظ بشنمتغیرهای معمولی، در ریرندرها، مجدد initialize میشن، لذا نمیتونن مقدار قبلی رو حفظ کنن. از اون طرف state ها هم با اپدیت شدن، باعث رندر مجدد کامپوننت میشن. اگر نیاز به متغیری دارید که مقدارش بین ریرندرها حفظ بشه، اما اپدیت شدنش باعث ریرندر شدن کامپوننت نشه، از ref لازمه استفاده کنید.دسترسی به کامپوننت های فرزند (forwarding refs)با استفاده از ref میتونید ویژگی هایی مثل فوکوس، کلیک و ... رو در کامپوننت فرزند کنترل کنید.ارتباط با APIهای خارجی مثل API مرورگربرای کار کردن با APIهایی که تاثیری روی ظاهر کامپوننت شما ندارن، مثل ذخیره کردن timeout IDs یا سیگنال abort controller، میتونید از ref استفاده کنید.۱۴- این امکان هست که useState برای set کردن initial value، یه function بگیره. کاربرد اون function چی هست؟پاسخ: function in useState۱۵- توضیح دهید state batching در react چیست؟در ری اکت, به منظور افزایش performance, چندتا setState که داخل یک event handler یا متد lifecycle هستن, batch میشن و بلافاصله بعد یک setState ریرندرینگ اتفاق نمیفته, بلکه setState ها batch میشن و در آخر اون متد lifecycle یا event handler یک بار rerendering انجام میشه. در نتیجه با جلوگیری از ریرندرهای بیهوده, performance افزایش پیدا میکنه.۱۶- توضیح دهید react fiber چیست؟ری اکت فایبر, یک نسخه تجدید نظر شده از الگوریتم تطبیق(reconciler) ری اکت هست، که مسئول به روزرسانی virtual DOM و بازتاب دادن تغییراتش توی actual DOM هست. در react fiber یک سری internal optimizations انجام شد که هدف بهبود performance برنامه های ری اکتی و افزایش سرعت و هوشمندی ری اکت بود. ری اکت فایبر در نسخه 16 ری اکت به عموم معرفی شد که بعد از اون, فایبر, reconciler دیفالت ری اکت هست.۱۷- فرض کن که یک لیست خیلی بزرگی از آیتم ها رو داریم و قراره رندر کنیم. چه طور این کار رو انجام میدی؟ آیا از تکنیک خاصی استفاده میکنی؟بله، برای رندر کردن لیست های بزرگ میشه از تکنیک list virtualization استفاده کرد تا performance پایین نیاد. list virtualization تکنیکی هست که طی اون فقط آیتم هایی از لیست که در اسکرین visible هستن، رندر میشن و سایر آیتم هایی که قابل مشاهده نیستن، رندر نمیشن. این کار باعث میشه که performance به صورت قابل ملاحظه ای افزایش پیدا کنه (تو لیست های بزرگ). از لینک زیر میتونید بیشتر درباره list virtualization بخونید: list virtualization۱۸- توضیح دهید jsx چیست و بعد از اجرا شدن به چه چیزی تبدیل میشود(HTML یا جاوااسکریپت)؟از این لینک میتونید پاسخ بخش اول رو بخونید: jsxاما پاسخ بخش دوم: jsx بعد از کامپایل شدن توسط ابزارهایی مثل babel,... تبدیل به جاوااسکریپت میشه. در واقع طی این تبدیل، jsx به React.createElement کال هایی تبدیل میشه که react ازشون برای ساخت virtual dom استفاده میکنه. برای مثال، کد زیر:تبدیل به این کد میشه:۱۹- با توجه به اصول SOLID یک مثال از کاربرد اصل open/close در react بزنید.توی این لینک به زیبایی درباره SOLID و اعمال کردن اصولش در برنامه های ری اکتی، همراه با مثال، صحبت شده: SOLID in reactخب، سوالات مصاحبه react هم تموم شد:) توی قسمت بعدی میریم سراغ server side rendering و nextjs!منابع:https://meganslo.medium.com/why-is-reacts-key-prop-important-b6bd51124270https://ditty.irhttps://react.devhttps://virgool.io/@farnaz.khoshgoftar/usememo-vs-usecallback-d3mfcl8xa5bchttps://www.patterns.devhttps://blog.stackademic.com/react-native-masters-solid-principles-in-react-react-native-a1b8df8d261d

سوالاتی که از من در مصاحبه‌های توسعه‌دهنده Frontend پرسیده شد (بخش ۲)

Saeideh abs — Sat, 05 Oct 2024 17:18:02 +0330

سلام، امیدوارم که خوب باشید و ایام به کام باشه. اگرم نیست، به کامش کنید :)بریم سراغ بخش دوم سوالات مصاحبه (بخش اول رو از این لینک میتونید مطالعه کنید). این بخش ترکیبی از سوالات عملی و live code جاوااسکریپت و الگوریتم و حل مسئله هست. سوال اول تا نهم به این صورت بود که از من خواسته شد توی یک ادیتور آنلاین مشخص شده (که قابلیت اجرا نداشت) کد ها رو بنویسم. همزمان لازم بود که بلند بلند فکر کنم تا مصاحبه کننده در جریان مسیر فکریم قرار بگیره. همزمان راهنمایی هم میکردن و یا نظرشون رو میگفتن یا سوال میپرسیدن باز :) پس اینکه کدها بدون خطا باشه خیلی مهم نبود، بیشتر راه حلی که مطرح میکردی مهم بود.سوال ۱۰ مربوط به یک مصاحبه دیگه هست که الگوریتم و ساختمان داده مد نظر بوده و کد رو باید تو یک ادیتور آنلاین که قابلیت اجرا داره پیاده میکردم.دو سوال آخر هم، حل مسئله هستن و صرفا راه حل شفاهی رو میخواستن.خب، بریم سراغ سوالات:۱- تابعی بنویس که با گرفتن دو تا دنباله در ورودی، تشخیص بده که دنباله دوم، آیا زیردنباله ای از دنباله اول هست یا نه؟ خروجی باید به صورت true یا false باشه.به طور مثال دنباله های زیر رو داریم:// inputs [8, 4 , 9 , 1 , 18 , 23] [9, 18, 23] // output true// inputs [8, 4 , 1 , 18 , 23] [9, 18, 23] // output falseپاسخ:(پاسخ من به این سوال، کد زیر بوده. شاید راه بهتری هم براش موجود باشه)function findSub(arr1, arr2) { let i=0 let j=0 while(i< arr1.length && j< arr2.length) { const el1 = arr1[i] const el2 = arr2[j] if(el1 === el2) { j++ i++ } else { i++ } } return j === arr2.length }۲- تابعی بنویس که با گرفتن یک رشته، پرتکرار ترین توکن رو برگردونه.ورودی و خروجی این تابع باید به این صورت باشه:// input 'book in book of library in book' // output bookپاسخ:راه اول: این راه ساده تر اما طولانی تر هست.function find(str) { const words = str.split(' ') const obj = {} words.map((item) => { if(obj[item]) { obj[item] = obj[item] + 1 } else { obj[item] = 1 } }) const myarr = Object.values(obj) const maxIndex = findMax(myarr) const properties = Object.keys(obj) return properties[maxIndex] }function findMax(arr) { let maxIndex = 0 let max = 0 arr.map((item, index) => { if(item > max) { maxIndex = index max = item } }) return maxIndex }راه دوم که مختصر و مفیدتر هست:function find(input) { const map = input.split(" ").reduce((a, c) => { a[c] = (a[c] || 0) + 1; return a; }, {}) const result = Object.entries(map).sort(([, a], [, b]) => b - a); return result[0][0] } ۳- تفاوت دو متد زیر چیه؟ و خروجی هر کدوم چیه؟[1, 5 , 7 , 10].map(_=>_%2 == 0) [1, 5, 7, 10, 12].filter((_) => _ % 2 == 0)پاسخ: خروجی به صورت زیر هست:[ false, false, false, true ] [ 10, 12 ]۴- این سوال در ادامه سوال قبل هست و از من خواستن که متد map آرایه ها رو بازنویسی کنم.پاسخ:Array.prototype.map2 = function(callback) { const arr = [] for (let i = 0; i < this.length; i++) { arr.push(callback(this[i], i)) } return arr }نکته۱: چون map آرایه اصلی (در اینجا this) رو تغییر نمیده، پس ما هم نباید آرایه اصلی رو تغییر بدیم و باید از آرایه جدید (arr) استفاده کنیم.نکته۲: برای نوشتن این متد باید از normal function استفاده کنیم و اگر از arrow function استفاده کنیم، متدمون درست کار نمیکنه. چون this توی arrow function ها از اسکوپی که توش تعریف شدن، ارث برده میشه و به instance آرایه مون اشاره نمیکنه. در حالی که this توی normal function همون آبجکتی هست که داره اون متد رو کال میکنه، در نتیجه به instance آرایه دسترسی داریم. اگر کامل متوجه نشدید، تفاوت this توی normal function و arrow function رو بخونید (توی سری اول سوالات بهش پرداختیم).۵- سوال بعدی به این صورت بود که گفتن بین این دو تا console.log زیر، کدی بنویس که باعث بشه console.log دوم دو ثانیه بعد از اولی چاپ بشه.console.log('A') ... console.log('B')پاسخ:با ترکیب setTimeout و Promise میتونیم این کار رو انجام بدیم. توی سری سوالات قبلی(اینجا، سوال ۱۶)، به این مسئله اشاره شد که await به تنهایی روی setTimeout تاثیری نداره، چرا که setTimeout, پرامیسی برنمیگردونه. پس خودمون باید یه پرامیس بنویسیم (تابع f1)از اونجایی که await فقط توی یک تابع async قابل استفاده هست، پس کل تابع f1 رو توی یک تابع async دیگه به اسم testFunc کال میکنیم.const testFunc = async () => { console.log('A') const f1 = async () => { return new Promise(resolve => { setTimeout(() => { resolve(1) }, 2000) }) } await f1() console.log('B') } testFunc()۶- خروجی هر یک از توابع a, b و c چیست؟function a(){ function x(){ var num = 10; } x(); console.log(num) } a(); function b(){ function x(){ let num = 10; } x(); console.log(num) } b(); function c(){ function x(){ num = 10; } x(); console.log(num) } c();پاسخ:خروجی تابع a ReferenceError: num is not definedهست. چون متغیر num با var تعریف شده و var هم function scope هست، پس num فقط توی a قابل دسترسیه و خارج اون ناشناخته است. خروجی تابع b همReferenceError: num is not definedهست. به همون دلیل مشابه. چون block scope ,let هست، پس num خارج تابع b قابل دسترسی نیست.خروجی تابع c اما ۱۰ هست. چون متغیر num با let, var یا const تعریف نشده پس تبدیل به متغیر global میشه و همه جا هم قابل دسترسیه.۷- کد تابع generateNumber رو بنویس به نحوی که خروجی اون به صورت زیر باشه (هر بار که تابع رو کال میکنیم، خروجی یک واحد افزایش پیدا میکنه):generateNumber() //1 generateNumber() //2 generateNumber() //3پاسخ:تو این سوال به صورت غیرمستقیم از شما درباره closure ها پرسش شده و تابع generateNumber یک نمونه از کاربردهای closure هست.const gn = () => { let count = 1 return () => count++ } const generateNumber = gn() console.log(generateNumber()) console.log(generateNumber()) console.log(generateNumber()) ۸- فرض کنید apiای داریم که هر بار که کال میشه، یک url رو برمیگردونه. بدین صورت:const url = 'https://xyz.com/getNextUrl' const res = Get(url)بار اول این api رو کال میکنیم و res رو میگیریم. سپس Get(res.data) رو کال میکنیم و res2 رو میگیریم و سپس Get(res2.data) رو کال میکنیم و res3 رو میگیریم. این فرآیند رو یک بار با استفاده از async/await و یک بار با استفاده از promise ها بنویس. پاسخ:روش اول، با استفاده از async/await:async function fetchUrls() { try { const url = 'https://xyz.com/getNextUrl'; const res = await Get(url); const res2 = await Get(res.data); const res3 = await Get(res2.data); } catch (error) { console.error(error); } }روش دوم، با استفاده از promiseها:function fetchUrls() { const url = 'https://xyz.com/getNextUrl'; Get(url) .then((res) => Get(res.data) .then((res2) => Get(res2.data) .then((res3) => console.log(res3)) .catch((err3) => console.log(err3)), ) .catch((err2) => console.log(err2)), ) .catch((err) => console.log(err)); }۹- سوال بعدی در ادامه سوال قبل هست. توی روش های بالا به صورت سریال ریکوئست ها رو ارسال کردیم. حالا اگه بخوایم به صورت موازی ریکوئست ها رو ارسال کنیم، چیکار باید کرد؟نکته: ماهیت داده ها تو سوال بالا جوریه که کلا سریال هست و موازی نمیشه هندلش کرد، چون حتما باید ریسپانس ریکوئست قبل بیاد و ما url جدید رو دریافت کنیم تا بتونیم ریکوئست بعدی رو بزنیم. منظور سوال، اینه که به صورت کلی چه طور میشه promise ها رو موازی هندل کرد (نه فقط توی این مورد خاص)پاسخ: از متدهای Promise.all یا Promise.allSettled میتونیم برای ارسال موازی چند promise استفاده کنیم. تفاوت این دو متد در این هست که توی Promise.all اگه فقط یکی از پرامیسهای پاس داده شده با خطا مواجه بشه، خروجی پرامیس نهایی rejected خواهد بود اما Promise.allSettled, آرایهای از پرامیسها رو به عنوان ورودی میگیره و زمانی fulfilled میشه که همهٔ پرامیسها Settle بشن. منظور از Settle شدن یعنی کار پرامیس تموم بشه (فارغ از اینکه نتیجه پرامیس چی باشه. یعنی fulfilled یا rejected اهمیتی نداره.) [ref]const res = Get(url) const res2 = Get(res.data) const res3 = Get(res2.data) const myRes = Promise.allSettled([res, res2, res3])۱۰- لیستی از اعداد داریم و میخوایم همه دو تا اعدادی که مجموعشون برابر k میشن رو پیدا کنیم(بدون استفاده از حافظه کمکی). چه راه حلی رو پیشنهاد میکنی برای حل این مسئله؟ پیچیدگی زمانی و مکانی اش رو هم تحلیل کن.پاسخ:بخش اول سوال توضیح راه حل پیشنهادی به صورت شفاهی هست. خب چون گفته شده که از حافظه کمکی نمیشه استفاده کرد، این یعنی از objectها یا hash map مجاز نیستیم استفاده کنیم. راه حل پیشنهادی من این بود که در مرحله اول، اعداد رو مرتب کنیم (با مرتبه زمانی O(nlogn)). یه توضیح مختصر هم دادم درباره اینکه الگوریتم های مرتب سازی بهینه از این مرتبه زمانی هستند(مثل merge sort و quick sort و ...) بعد از مرتب کردن آرایه، میتونیم با استفاده از binary search که از مرتبه زمانی O(logn) هست، مسئله رو حل کنیم. یک بار یک لوپ روی کل آرایه بزنیم (از مرتبه زمانی O(n))، توی هر تکرار هم با استفاده از باینری سرچ، چک کنیم که آیا مکمل این عدد، توی آرایه (از آیتم فعلی به بعد) وجود داره یا نه. این خودش از مرتبه O(nlogn) میشه. در مجموع یه O(nlogn) برای مرتب سازی و یه O(nlogn) هم برای سرچ داشتیم، پس پیچیدگی زمانی نهایی همون O(nlogn) هست. پیچیدگی مکانی هم O(1) هست.بعد از این مرحله که توضیح راه حل بود، مصاحبه کننده خواست که الگوریتم binary search رو پیاده سازی کنم. این کد رو توی یک ادیتور که قابلیت اجرا داشت باید مینوشتم و خروجی چک میشد که درست هست یا نه. این لینک همه راه حل های موجود برای این سوال رو از ساده ترین تا بهینه ترین رو توضیح داده. البته سوالش یه کوچولو متفاوته و خواسته شده که true یا false برگردونده شه (اگر دو تا آیتمی مجموعشون k شد -> true، یا اگه هیچ دو آیتمی مجموعشون k نشد -> false). ولی راه حل همونه. کد باینری سرچ هم به زبان های مختلف از جمله جاوااسکریپت رو داره.دو سوال بعدی فقط حل مسئله هست و به پیاده سازی نیاز نداشت.۱۱- یک لیست پیوندی یک طرفه داریم و ده عنصر آخر لیست رو میخواهیم. از چه الگوریتم یا ساختمان داده ای برای حل این مسئله استفاده میکنی؟پاسخ:یک راه حل ساده برای این سوال میتونه این باشه که یک queue با اندازه ۱۰ رو در نظر بگیریم و یک بار لوپ بزنیم روی لیست پیوندیمون و هر بار آیتم جدید رو پوش کنیم به queue. وقتی ظرفیت queue پر بشه، قدیمی ترین آیتم، پاپ میشه. در نتیجه همیشه ۱۰ تا عنصر آخر رو توی queue داریم. پیچیدگی مکانی این راه حل از مرتبه (10)θ هست. اما با θ(1) هم میتونیم این مسئله رو حل کنیم:راه دیگه اینه که میتونیم فقط یک عنصر رو در یک متغیر نگه داریم. چرا که از هر عنصر، میتونیم ده تای بعدیش رو پیدا کنیم. پس باید فقط عنصر ده تا مونده به آخر رو توی یک متغیر نگه داریم. در نتیجه یک لوپ روی لیست پیوندیمون میزنیم. توی ده تکرار اول، همه عناصر، جزو ده تای آخر هستند. به عنصر ۱۱ از لیست پیوندی که رسیدیم، عنصر اول رو در متغیر نگه داری میکنیم. به عنصر ۱۲ که رسیدیم، اگه عنصر آخر لیست پیوندی نبود، پس عنصر دوم رو توی متغیرمون نگه داری میکنیم و تکرارهای بعدی هم به همین ترتیب تا برسیم به عنصر آخر لیست. وقتی لوپ تموم بشه، عنصر ده تا مونده به آخر رو توی متغیرمون داریم. ۱۲- از اعداد ۱ تا n رو داریم. میخوایم چک کنیم که عدد تکراری توی این ها نباشه(یا به عبارت دیگه n تا عدد داریم و میخوایم چک کنیم که عدد تکراری توشون نباشه و همه incremental باشن ). چه راه حلی رو پیشنهاد میکنی؟پاسخ: راه اول: چون اعداد incremental هستن، پس جمعشون باید برابر n(n+1)/2باشه. اگه عدد تکراری توی این ها باشه، دیگه جمعشون برابر n(n+1)/2نمیشه.راه دوم: از یک آبجکت استفاده میکنیم و یک لوپ روی اعداد میزنیم. تو هر تکرار اگر آیتم توی آبجکت نبود(پراپرتی برای اون عدد ست نشده بود)، obj[n] رو برابر ۱ یا مقدار دیگه قرار میدیم. اما اگر توش بود، پس یعنی عنصر تکراری داریم.راه سوم: استفاده از Set هست. چون آیتم تکراری به Set نمیشه پوش کرد، پس اگر اعداد رو ریختیم توی Set و طولش همون n بود پس یعنی عدد تکراری توش نبوده. در غیر اینصورت آیتم تکراری داشتیم. خب، این سری سوالات هم تموم شد. توی سری بعدی، انشالله میریم سراغ سوالات react :) منابع:https://ditty.ir/posts/promise-static-methods/5kP7n#promise-allhttps://www.geeksforgeeks.org/check-if-pair-with-given-sum-exists-in-array/

سوالاتی که از من در مصاحبه‌های توسعه‌دهنده Frontend پرسیده شد

Saeideh abs — Mon, 23 Sep 2024 15:46:33 +0330

سلام، امیدوارم که خوب باشید.مدتی پیش بود که از شرکتی که توش مشغول بودم، اومدم بیرون و دنبال کار میگشتم. تو این مدت به شرکت های مختلفی برای مصاحبه رفتم. از اونجایی که خیلی از سوالات مصاحبه پرتکرار هستند، سوالاتی که ازم پرسیده میشد رو برای خودم یادداشت میکردم. حالا تصمیم گرفتم این سوالات رو باهاتون به اشتراک بذارم(سوالات مربوط به مصاحبه شرکت های خوب و مطرح ایرانی هست، ولی بهتره اسم خود شرکت ها رو نام نبرم). چون تعداد سوالات زیاد هست، به چند بخش تقسیمشون کردم. خود سوالات جاوااسکریپت به دو بخش تقسیم میشن: بخش اول مربوط به پاسخ های شفاهی هست. خود سوالات رو هم از مباحث پایه ای تر شروع کردم.بخش دوم جاوااسکریپت، سوالات عملی یا همون live code هست که در پست بعدی منتشر میکنم. از اونجایی که هدف، بیشتر منتقل کردن خود سوالات بوده، برای پاسخشون به سایت های دیگه ارجاع دادم.امیدوارم برای کسایی که جویای کار هستند مفید باشه. این اولین پست من در ویرگول یا هر جای دیگه هست :)) ممنون میشم اگر نظری، پیشنهادی، انتقادی داشتید یا اشکالی دیدید، بیان کنید، تا بتونم بهترش کنم این نوشته رو.بریم سراغ سوالها :)بخش اول: جاوااسکریپت۱- مفهوم hoisting رو در جاوااسکریپت توضیح بدید.از لینک زیر میتونید پاسخ این سوال رو بخونید: hoisting۲- تفاوت let, var, const را توضیح دهید.از لینک زیر میتونید جواب این سوال رو بخونید: var vs let vs cons۳- توضیح دهید scopeها توی جاوااسکریپت چی هستند؟پاسخ این سوال: scope۴- توضیح دهید destructuring در جاوااسکریپت چیست؟پاسخ این سوال: destructuring۵- تفاوت arrow functions و normal functions رو توضیح دهید.پاسخ این سوال: arrow func vs normal funcاما یکی از تفاوت های مهم این دو نوع تابع، مقدار this هست. از این لینک میتونید بیشتر درباره this بخونید: this keyword۶- توضیح بدید IIFE چیه؟ به همراه یک مثال از کاربردش.پاسخ این سوال: IIFE۷- تعریف عملگر + (unary plus) و تفاوتش با متد های parseInt و Number? به طور مثال خروجی if(+'1M') چیست؟از این لینک و پست های بعدی که بهش لینک شده، میتونید به طور کامل درباره عملگرها بخونید: عملگرهااین هم توضیح در مورد عملگر unary plus و متدهای Number و parseInt اما اگر مشخصا بخوایم جواب این سوال رو بدیم باید بگیم که عملگر unary plus و متد Number تقریبا مشابه هم عمل میکنند، با این تفاوت که عملگر unary plus سریعتر هست، اون هم به این دلیل که محاسبات اضافی برای تبدیل انجام نمیده. اما متد Number برای تبدیل های پیچیده تر و دقیق تر مناسب هست. هر دو این روش ها، اگر رشته ورودی شامل کاراکترهای غیر عددی باشه، NaN برمیگردونن. در مقابل parseInt قادر هست چنین رشته هایی رو پارس کنه و بخش عددی رو ازش استخراج کنه.بنابراین، parseInt('1M') برابر 1 میشه، در حالی که خروجی '1M'+ برابر NaN و خروجی Number('1M') هم برابر NaN هست. و از اونجایی که NaN یک falsy value هست، پس خروجی if(+'1M') برابر false هست و وارد بلاک if نمیشیم.۸- تفاوت دو متد map و forEach رو در جاوااسکریپت توضیح دهید.از لینک زیر میتونید جواب این سوال رو بخونید: map vs forEachاما به طور خلاصه اگه بخوام جواب این سوال رو بدم: ۱- map یک آرایه جدید برمیگردونه و مستقیما آرایه اصلی رو تغییر نمیده در حالی که forEach آرایه جدیدی برنمیگردونه و در واقع undefined برمیگردونه و مستقیما آرایه اصلی رو تغییر میده.۲- به دلیل اینکه map یک آرایه جدید برمیگردونه، میشه متدهای دیگه رو به اون زنجیره کرد. در حالی که با forEach این کار امکانپذیر نیست.۳- از نظر سرعت و زمان اجرا، این دو مشابه هم هستن و خیلی تفاوت قابل ملاحظه ای ندارن.۹- فرض کن لیستی از سفارش های کاربر(سبد خرید) رو داریم و میخوایم مجموع قیمت این سفارش ها رو حساب کنیم. از چه متدی در جاوااسکریپت استفاده میکنی؟پاسخ این سوال، متد reduce در آرایه ها هست(از روش های دیگه مثل map و ... برای loop زدن میشه استفاده کرد، ولی چیزی که مصاحبه کننده دوست داره بشنوه، reduce هست :) ). از این لینک میتونید در مورد این متد بخونید: Array.reduce۱۰- لیستی از آیتم ها رو داریم که هر آیتم یک قیمت داره. ابتدا میخواهیم همه قیمت ها رو به اضافه 10 کنیم و سپس اون هایی رو که قیمتشون بیشتر از 20 شد رو, به ترتیب چاپ کنیم و در آخر مجموع قیمت ها رو چاپ کنیم. به ترتیب از کدوم متدهای Array در جاوااسکریپت استفاده میکنی؟پاسخ: به ترتیب از متدهای map, filter, sort, reduce استفاده میکنیم. مرحله ۱: استفاده از متد map برای اضافه کردن 10 به هر قیمتconst prices = [5, 12, 8, 20, 15];const updatedPrices = prices.map(price => price + 10);مرحله ۲: استفاده از متد filter برای انتخاب قیمت هایی که بیشتر از 20 هستندconst filteredPrices = updatedPrices.filter(price => price > 20);مرحله ۳: استفاده از متد sort برای مرتب سازی قیمت ها به ترتیب صعودیconst sortedPrices = filteredPrices.sort((a, b) => a - b);مرحله ۴: استفاده از متد reduce برای محاسبه مجموع قیمت هاconst total = sortedPrices.reduce((sum, price) => sum + price, 0);۱۱- توضیح دهید primitive type ها و reference type ها چی هستن و فرقشون چیه؟ نحوه ذخیره شدن این تایپ ها رو هم توضیح دهید. و اینکه چه طوری از حافظه پاک میشن?توی این لینک به صورت کامل درباره همه این موارد توضیح داده شده: primitive and reference data types۱۲- تفاوت deep copy و shallow copy را توضیح دهید.از این لینک میتونید در مورد این دو مفهوم بخونید: deep copy vs shallow copy۱۳- مموری لیک(نشتی حافظه) رو تعریف کنید و یک مثال ازش بزنید.توی لینک زیر مباحثی مثل تخصیص حافظه، garbage collector و مموری لیک و اشتباهاتی که میتونه منجر به مموری لیک بشه رو میتونید بخونید: memory leak ۱۴- پراکسی ها رو تعریف کنید و بگید کاربردشون چیه؟ پاسخ این سوال رو از این لینک میتونید بخونید: پراکسی ها۱۵- به طور کلی عملیات async چه طور توسط جاوااسکریپت و مرورگر هندل میشه؟پاسخ این سوال رو از این لینک میتونید بخونید: ایونتلوپ۱۶- خروجی کد زیر چیست؟const testFunc = async () => { await setTimeout(() => console.log('setTimeout'), 1000) console.log('console.log') } testFunc()برای پاسخ دادن به این سوال، شما باید اول به خوبی با پرامیس ها و async/await آشنا باشید. از این لینک میتونید در مورد پرامیس ها و async/await بخونید: async/await and promiseاما خروجی این کد به این صورت هست که اول، console.log چاپ میشه و بعد از یک ثانیه، setTimeout چاپ میشه:console.log setTimeoutعلت اون هم این هست که چون setTimeout پرامیسی رو برنمیگردونه و خروجی اون تنها یک timer ID هست، پس await روی اون تاثیری نداره. درواقع نکته این سوال این هست که شما باید بدونید که await انتظار یک promise رو داره که براش wait بکنه، در غیر اینصورت عبارت جلوش رو یک پرامیس resolve شده در نظر میگیره. اما توی مثال زیر await کاملا تاثیرگذار هست:const myPromise = new Promise((resolve) => { setTimeout(() => resolve(1), 1000) })const testFunc = async () => { await myPromise.then(() => console.log('promise')) console.log('console.log') } testFunc() output: promise console.log ۱۶- پروتوتایپ ها(prototype) در کلاس ها، چی هستند؟پاسخ این سوال رو از این لینک میتونید بخونید: پروتوتایپ۱۷- کلوژرها رو به همراه کاربردش، تعریف کنید. پاسخ این سوال رو از این لینک میتونید بخونید: کلوژر۱۸- کد زیر چه مفهومی رو در جاوااسکریپت بیان میکنه؟ و خروجیش چیه؟function calculator() { let number = 0 return { increment() { number++ }, get() { return number } } } const c = calculator() c.increment() c.increment() c.increment() console.log('c.get()', c.get())پاسخ: بیانگر مفهوم closure در جاوااسکریپت هست و خروجی اون ۳ هست.۱۹- به این متغیرهای داخل closure چی میگن؟پاسخ: به این متغیرها میگن state :)۲۰- تعریف symbolها در جاوااسکریپت.توی این لینک میتونید در مورد سیمبل ها و بقیه نوع های داده ای، بخونید: نوع های داده ای۲۱- کاربرد متد create در Objectاز این لینک میتونید در مورد متد create بخونید: create۲۲- خروجی کد زیر چیست؟var Employee = { company: 'xyz' } var emp1 = Object.create(Employee); delete emp1.company console.log(emp1.company);خروجی این کد مقدار xyz هست. دلیلش هم این هست: با استفاده از متد create ما آبجکت Employee رو به عنوان پروتوتایپ آبجکت emp1 معرفی میکنیم. مرحله دوم، delete هست و از اونجایی که delete فقط پراپرتی های خود آبجکت رو delete میکنه (نه پراپرتی هایی که از پروتوتایپ به ارث برده)، پس پراپرتی company پاک نمیشه. و خروجی نهایی xyz هست. ۲۳- کاربرد متد freeze در Objectاز این لینک میتونید در مورد متد freeze بخونید: freeze۲۴- تفاوت متدهای bind, apply و call رو توضیح دهید.از لینک های زیر میتونید در مورد هر کدوم از این متدها و تفاوتشون بخونید:applycallcall vs applybind۲۵- تابع add رو به گونه ای بنویسید که اون رو به هر دو صورت زیر بشه call کرد:console.log(add(5, 6)) console.log(add(5)(6))پاسخ: توی این سوال، به صورت غیر مستقیم از تکنینک currying پرسیده شده. کد تابع add به صورت زیر هست:function add(x, y) { if(y) return x+y else return (z) => return x+z }۲۶- تفاوت sessionStorage و localStorage رو توضیح بدهید.توی این لینک علاوه بر دو استوریج بالا، cookies هم توضیح داده شده و به مقایسه این سه پرداخته: client-side storageاین لینک هم میتونه مفید باشه و به indexedDB هم پرداخته: mdn client-side storage۲۷- در هنگام نوشتن یک فیچر سرچ, میخواهیم هر وقت کاربر کاراکتر جدید وارد کرد, ریکوئست قبلی کنسل بشه. چه طور این رو پیاده سازی میکنید؟پاسخ کوتاه این سوال، استفاده از AbortController هست که یک web api هست که به شما اجازه میده تا درخواست های fetch رو کنسل کنید. از لینک زیر میتونید در مورد AbortController بخونید و یک مثال ازش ببینید، همچنین در مورد تکنیک debouncing هم که مربوط به سوال بعدیه هم توضیح داده شده. AbortController۲۸- در هنگام نوشتن یک فیچر سرچ, میخواهیم بعد از چند میلی ثانیه که یوزر مقدار رو وارد کرد ریکوئست بزنیم به api. به این تکنیک چی میگن؟پاسخ: به این تکنینک debouncing میگن. از این لینک در مورد debouncing میتونید بخونید: debounce۲۹- مفاهیم اصلی در functional programming چیست؟پاسخ این سوال رو میتونید از این لینک بخونید. هر چند مفاهیم دیگه ای مثل currying ,recursion, functors و monads هستند که تو این لینک بهشون اشاره نشده. لینک زیر هم به طور کلی یه رفرنس خوب برای یادگیری مفاهیم سمت وب هست. برای currying, monads, recursion هم رفرنس داره توی خودش: web skills (توصیه میکنم حتما سر بزنید بهش)یک سوال متناوب هم میتونه توضیح مفاهیم اصلی در OOP(Object-Oriented Programming) باشه (البته از من چنین سوالی پرسیده نشد)، که به صورت خلاصه: Encapsulation, Abstraction, Inheritance و Polymorphism از مفاهیم اصلی OOP هستند.۳۰- متد get در کلاس ها رو توضیح بدهید(getter ها چی هستند؟ و چه فایده ای دارند؟)پاسخ این سوال رو از این لینک میتونید بخونید: js getters and settersمنابع:https://ditty.irhttps://www.geeksforgeeks.orghttps://developer.mozilla.orghttps://medium.com/@rabailzaheer/primitive-vs-reference-types-a-javascript-guide-6b3638ed508ahttps://virgool.io/@ava.bakuei/%D8%AA%D9%81%D8%A7%D9%88%D8%AA-shallow-copy-%D9%88-deep-copy-%D8%AF%D8%B1-%D8%AC%D8%A7%D9%88%D8%A7-%D8%A7%D8%B3%DA%A9%D8%B1%DB%8C%D9%BE%D8%AA-yatxr3etfuhdhttps://virgool.io/@hesanam/%D8%AD%D8%A7%D9%81%D8%B8%D9%87-%D8%AF%D8%B1-%D8%AC%D8%A7%D9%88%D8%A7%D8%B3%DA%A9%D8%B1%DB%8C%D9%BE%D8%AA-%D8%AC%D9%84%D9%88%DB%8C-memory-leak-%D8%B1%D9%88-%D8%A8%DA%AF%DB%8C%D8%B1%DB%8C%D9%85-vktctmei312jhttps://virgool.io/JavaScript8/async-programming-under-the-hood-event-loop-part-1-hfr5zzmikjgyhttps://www.telerik.com/blogs/three-browser-storage-mechanismshttps://dev.to/jamesrweb/principles-of-functional-programming-4b7chttps://andreasbm.github.io/web-skills