Frontend Interview Experience (Unacademy) - Javascript and React JS Interview Questions

Рет қаралды 373,777

Күн бұрын

➡️ My Frontend Interview Preparation Course - roadsidecoder.com/course-details (50% Discount)
🟪 My Instagram - / roadsidecoder
➡️ Book an Interview Preparation call with me - topmate.io/roadsidecoder
I interviewed for Frontend Engineer role at Unacademy.
React JS and Javascript Interview questions from the Interview will be discussed in this video including topics like hoisting, Event Deligation, call, bind and apply, Promises, React Lifecycle methods etc.
🟦 Follow me on Twitter and u will clear your interview 🤓 -
/ piyush_eon
⭐ Support the channel and learn from me One on One -
/ @roadsidecoder
🔗 Chat App Tutorial -
• MERN Stack Chat App wi...
🔗 Cars24 Interview Experience -
• Frontend Interview Exp...
🔗 MERN Stack Tutorial with Redux -
• MERN Stack Project Tut...
🔗 React Beginner's Project Tutorials -
• React JS Project Tutor...
#JavascriptInterview #ReactInterview #ReactJS
-------------------------------------------------------------------------
00:00 Intro
00:58 Round 1
01:12 Q1 - map vs forEach
03:42 Q2 - null vs undefined
05:57 Q3 - Event Deligation
09:01 Q4 - Array.flat implementation
14:35 Q5 - Project Showcase
15:22 Round 2
15:25 Q1 - var vs let vs const
18:13 Q2 - setTimeout Based Output
21:59 Q3 - call, bind and apply
24:52 Q4 - Infinite Currying
24:43 Q5 - Compose Polyfill
27:52 Q6 - Implement Promise.all()
32:25 Round 3
32:28 Q1 - React Lifecycle methods
40:10 Q2 - Ways to center a div
43:02 Q3 - CSS Box Model
44:24 Q4 - Implement Debounce
48:33 Round 4
-------------------------------------------------------------------------
Special Thanks to our members -
Onur Karagülle
GMERT

Пікірлер: 487

@RoadsideCoder 2 жыл бұрын

➡ My Frontend Interview Preparation Course - roadsidecoder.com/course-details 🔴 Complete Interview Playlist - kzfaq.info/sun/PLKhlp2qtUcSb_WQZC3sq9Vw3NC4DbreUL 👤 Join the RoadsideCoder Community Discord - discord.gg/2ecgDwx5EE If this video gets good response, I will make more interview videos, so, do share it with others 🔥

@TheCodeRank 2 жыл бұрын

nice video

@kanganagarwal 2 жыл бұрын

Done

@ompandey4595 2 жыл бұрын

Chutiya banana band karo 3rd class company bhi itna easy nhi puchta

@nicolaseratyra 2 жыл бұрын

I saw your video last night and today i had an interview as a front-end developer. They asked me some of the questions you explained in your video. Thank you very much

@RoadsideCoder 2 жыл бұрын

Wow, great to know that!

@SinghsDuOs 2 жыл бұрын

Now you got job in that company at that time?

@nicolaseratyra 2 жыл бұрын

@@SinghsDuOs yes the night before my interview a watched some video with that kind of code . Some of the questions was exactly what he described in the tutorial in theoretical and practical level. I took the Job. I work there three months

@SinghsDuOs 2 жыл бұрын

@@nicolaseratyra Nice...can i get your email or linkedin for frontend jobs, where I should apply as 3 months experience only

@nicolaseratyra 2 жыл бұрын

And i don't work as a front-end developer. I work more of full stuck with Java and JavaScript

@akalrove4834 2 жыл бұрын

This video should be a must watch for anyone preparing for FE interview. While it does not go very deep its perfect thing to refresh on a lot of important topics without getting lost in jungle of topics. Hats off to you sir and God bless you.

@veterancode2523 2 жыл бұрын

you should also visit this javascript coding challange playlist as well it will really help u kzfaq.info/sun/PLAx7-E_inM6EkgZkrujZvewiM_QZRU4A2

@igornikonov9641 Жыл бұрын

Awesome examples, thank you! One thing about the flattening array example: we actually don't have to specify depth at all. It will flatten the array, no matter how deep its child arrays are.

@shriharikulkarni8229 2 жыл бұрын

Great man! Really appreciate your videos.. please keep on making such videos .. you are giving good js and react questions for ur audience.. well done

@rravithejareddy9026 2 жыл бұрын

This guy increased the standard of making tech videos simply. 👏

@RoadsideCoder 2 жыл бұрын

Wow, thanks for such an amazing appreciation ❤️

@aiyoda 2 жыл бұрын

Thank you for this insight, I will be studying this and taking notes for my journey into Front-End developer role interviews in the future. 🥰

@motivatedxyz7665 2 жыл бұрын

It was an amazing content to see. Keep adding more and more videos. I had an observation that output of your custom promise.all was not in order. I think we need to take care of index also while pushing

@ichiroutakashima4503 Жыл бұрын

I seriously love you man. I didn't even know about flat and how it was actually used, goddamn it.

@Anonymous11175 2 жыл бұрын

well nobody submits the Closure's setTimeout question. so this is my solution to approaching closure function b() { for (var i = 0; i < 3; i++) { function c(i){ setTimeout(() => console.log(i), i * 1000); } c(i); } } b();

@hellocat7760 20 күн бұрын

Thanks for your code snippet

@saranguru6100 2 жыл бұрын

This video is really awesome, And by the way, for that setTimeout question, to achieve the result using var itself, we can use closures, i.e., we can wrap the setTimeout part in a function that takes the looping variable as argument and call the function to achieve the desired result. for(var i = 0; i < 3; i ++){ function timer(iter){ setTimeout(()=>{ console.log(iter); }, iter * 1000) } timer(i); } Hope I am right!! Thanks, RoadSideCoder.

@RoadsideCoder 2 жыл бұрын

Yes, correct! 🔥

@Ashishume 2 жыл бұрын

Hey Saran Guru, I wanted to know the reason why its working, can you explain a little. Even though ur passing i as args still its going to reference the same i, is it? Correct me if im wrong. Thanks

@sudhanshumishra935 2 жыл бұрын

@@Ashishume previously without timer function, setTimeout ran after completion of outer loop, but here setTimeout will run after execution of timer function. So, it will print the current value of i which will be 0, 1 and 2.

@saranguru6100 2 жыл бұрын

@@Ashishume when we pass the value of i as argument to a function, the function will have its own execution context and the parameter will have its own reference in that execution context.Hence that value is not as same value in loop. That is why it will work. To be simplified, we pass the argument to function, which is a pass by value, and hence it has its own reference and not the previous value reference itself. I hope I am clear.

@ashishsaini5096 2 жыл бұрын

nice answer

@subhamsaurabh3069 2 жыл бұрын

Loved your interview series. I followed your videos from the cars24 episode. The way you make everything easy is so phenomenal. Love to see more videos like this. 👍👍👌👌

@RoadsideCoder 2 жыл бұрын

Thanks brother. Means a lot.

@surajpatil-dn2fy 2 жыл бұрын

@RoadsideCoder bind() can take multiple params, first is the context, and from the second it's the parameter list to be passed. So it works like closure with specified param value for future execution. bind(thisArg, arg1, ... , argN)

@yodahunter1412 2 жыл бұрын

I am learning so much from this series, thank you man

@ScienceSeekho 2 жыл бұрын

Can someone please tell me answer for using let instead of var for that setTimeout() function. He told use to figure it out. Its using closure

@maheshsale 9 ай бұрын

Thank you for sharing the questions with detail explanation. It is very much useful. Will watch more contents given by you.

@abdussamad0348 2 жыл бұрын

Need more interviews videos! Top notch content

@shreyaskupekar 2 жыл бұрын

Hi can you suggest me some site where we can practice frontend coding questions like the array flat and event delegation

@sebastianstrand246 2 жыл бұрын

So can we say that .map() creates projection while .forEach() applies on to itself?

@shrushtipolekar8804 2 жыл бұрын

Extremely helpful video as usual ! Learnt a lot 👍 Can't wait for your next interview videos.

@RoadsideCoder 2 жыл бұрын

Thanks a lot 🙏

@girishavj 10 ай бұрын

there is a simple way to flatten an array example below arr.toString().split(',').map((a)=>parseInt(a));

@show_me_the_moneyy 2 жыл бұрын

Nice questions - please keep giving interviews and keep making videos

@sanyamsuthar1357 2 жыл бұрын

why it is failing to work if i add Promise.reject() in argument array on 1st element or in between but not last ?

@fazilhakkim1091 Жыл бұрын

hi bro regarding componentDidMount for me it is running two times on load but in the video it is running one time is there any issue for this?

@isha25tripathi12 5 ай бұрын

I have one question for promise so we do .then for resolve rigth so what if I want to store that response in a variable after .then how can we do that. I know about async await ,I want to know how to get the value in a variable with promise specifically as I need to perform various action on it and I can't do it inside .then but if I try to return it and do the console I get that promise is pending,which I kind of get it but still is there any way to extract the value without async await.

@sharadindupaul5933 2 жыл бұрын

Great content man! keep making such useful videos.

@emilyaung2963 2 жыл бұрын

haha i just love your sense of humor. Throwing in a few jokes as you teach is the best way to learn

@AshishMishra-ct9iy 2 жыл бұрын

@14:30 : what if we have not given the depth for a given array or we are not given the level it needs to be flatten? For example, you have mentioned, that it will work if we have 1 nested array.

@kaykodes3692 Жыл бұрын

You are good at explaining dude, keep it up💯

@saketabhishek5147 2 жыл бұрын

Hey just wanted to check you haven't asked dsa like competitive coding type ? Please reply

@andriiielagin2243 Жыл бұрын

Thanks a lot for the really cool video regarding frontend interview!

@user-lq1mm2tn5v Жыл бұрын

Thank you, the questions are explained in a clear way, extremely easy to understand.

@sachusachin9600 2 жыл бұрын

Is setTimeout will runs after 3 sec or 1 sec if the var i value is 3 ????

@akritiyadav3873 2 жыл бұрын

Why had you not initialized state inside the constructor in the class component?

@yashguptta 2 жыл бұрын

previous video i commented to bring this series. Thanks for this video . Kindly produce more. I learnt that tranform div case to center div. !

@RoadsideCoder 2 жыл бұрын

Yes!

@bikidas5473 2 жыл бұрын

At 5:44 actually there is more nuance to it undefined and null both are coercively equal, == and === both of them actually checks type, the main difference is == allows coercion if types are different which are to be compared while === doesn't allow coercion to happen

@helpingselflearner4391 2 жыл бұрын

Thanks for the polyfill for Promise.All, I was looking for this explanation

@abhinavbhutani6535 2 жыл бұрын

Great video but there is a bug in your solution for Promise.all implementation, as you are checking if index=== promises.length -1 then you are resolving the promise with result array, this will fail if the last promise resolved before other promises, then you will resolve with a results array having only result of last Promise. Promises are not resolved in sequence so if you have 2 promise with setTimeout of 1 hr and 1 sec, 1 sec one will resolve first and as it was the last in array it will resolve before the first one completes Correct solution keep a counter = 0 and increment it every-time in the .then callback and if it is equal to promises.length then resolve with result and your solution doesn't maintain the order of promises results because you are calling array.push, you should initialise the array of n size and insert the promises's result at the correct position.

@RoadsideCoder 2 жыл бұрын

oh right! my bad.

@soumyajitdey5720 2 жыл бұрын

Nice observation 🙌

@rushikeshchoche2815 2 жыл бұрын

Thanks Abhinav.

@Harshitbadolla 2 жыл бұрын

@AJAYSINGH-jo7hg Жыл бұрын

Short and crisp, well explained

@csigataraj Жыл бұрын

"componentDidMount runs when our component is rendered for the first time" Before the component starts rendering for the first time would be more accurate. It's an important distinction otherwise it'd be the same as useEffect() (having said that the useLayoutEffect() hook does exactly the same as componentDidMount)

@ThourCS2 Жыл бұрын

In your event deligation example, it just adds all the target id's next to each other and doesn't manage which one is recently clicked. index.html#shoes#shirt#wallet How can we fix this?

@Sarajboos12 2 жыл бұрын

bro what type of questions asked in relevel test by unacademy for frontend developer role

@smaxd3918 2 жыл бұрын

Hey, please make a video on how to approach HRs and Employees on LinkedIn. It will help a lot of freshers coz they struggle the most to hear back 🙌

@mridulkhurana533 2 жыл бұрын

thanks alot man ! Please make a interview series for frontend itself

@akritiyadav3873 Жыл бұрын

what is the meaning of ...customFlat(ar, depth -1) in the line 14 of flat array example.

@MrAustin4399 2 жыл бұрын

Love the content. Thanks for sharing

@indiasbhushan986 Жыл бұрын

Sir .. tell me Is proper definition is must?? Or having concept understanding and explain enough??

@TheSoulCrisis Жыл бұрын

Great video! I loved the content and tips!

@rishabhchopra883 2 жыл бұрын

What are the 'args' in the debounce question on line 6 ? Great video btw :)

@ashmeetsingh3238 2 жыл бұрын

Awesome video, thanks for uploading your experience. If anyone was replicating react lifecycle methods from the video and is confused why useEffect() and componentDidMount() is being called twice, it is because most probably React Strict Mode is enabled.

@imac_ 2 жыл бұрын

Thank U very much Brother 🙏🙏🙏🙏🙏 I was stucked for some days thinking about this, Thanks for solving that problem !!

@veterancode2523 2 жыл бұрын

you should also visit this javascript coding interview questions challange playlist as well it will really help u kzfaq.info/sun/PLAx7-E_inM6EkgZkrujZvewiM_QZRU4A2

@ayushjain7023 2 жыл бұрын

It is because you are using react v18, for v18 in strict mode useeffct with empty dependancies render twice on mount.

@venkateshpachigulla 2 жыл бұрын

How we will handle Infinity scenario for customFlat function?

@susinthirancny1570 2 жыл бұрын

How to Master Data situations and algorithm in JavaScript i don't know pls tell me bro

@juniorWeb247 2 жыл бұрын

one of my best videos on youtube for js interviews, thanku soo much brother because of you I have cleared so many interviews. thanku so much for your lovely information

@RoadsideCoder 2 жыл бұрын

Congrats on clearing the interviews Deepinder!! Glad I could help ❤️

@kedarkulkarni0074 2 жыл бұрын

Bhai very good, these questions are legit.. thanks for sharing solutions

@kuldeepchouhan0143 7 ай бұрын

Where I learn js and react before the interviews???

@sahilkaushal2209 Жыл бұрын

Thanks buddy for these kinda videos🙌

@dineshrout2527 2 жыл бұрын

Thanks for this informative video..it really helps.

@sanuyadav-ys3fb Жыл бұрын

Thank you so much, that was really helpful!

@2784raj 2 жыл бұрын

you are awesome mentor, thank you so much !!!

@__aj2000__ 2 жыл бұрын

Bro Ur Live Demo links are not working on ur portfolio. can you fix them?

@Amar11115 Жыл бұрын

thanks a bunch for this video.

@gamershut5279 2 жыл бұрын

for flattening of array to anylevel we can use const flattenArr = (arr) => arr.reduce((acc,cur) => acc.concat(Array.isArray(cur) ? flattenArr(cur): cur),[])

@thimiraakash8941 Жыл бұрын

Superb stuff!!

@zakeeakhtar3611 2 жыл бұрын

Thanks a lot, these videos are so helpful.

@vishwanath-ts 11 ай бұрын

At 11:20 it's not necessary to provide depth, here's the solution below: function flatten(arr) { const result = []; for (const element of arr) { if (Array.isArray(element)) { result.push(...flatten(element)); } else { result.push(element); } } return result; } const arr = [1, [2, 3], [4, 5, 6, [7, 8] ]]; const flattenedArr = flatten(arr); console.log(flattenedArr);

@ajaysinghkanawat Жыл бұрын

Thanks for uploading this video 📷📸

@venkateshpachigulla 2 жыл бұрын

Can you share me this questions or github repo link which contains this.

@yashmittal2380 Жыл бұрын

Thanks a Lot for making such informative videos and sharing interview experiences. Please create more such videos on hot Front end topics asked in big product companies.

@RoadsideCoder Жыл бұрын

You're welcome ❤️ More coming soon!

@ekeyur 2 жыл бұрын

Hi RoadsideCoder, Great content with important topics and implementation on frontend interviews. I have gained a lot of knowledge here. Wanted to point out a small mistake in your Promise.all implementation. In the JS implementation of promise.all the results are shown in the same order as promises, so you can't just push the resolved promise to the results array as they might resolve in different order; you have to store the results to the right index. If you notice in your video the first promise is resolved second, hence pushed to the array in the second place, minor overlook - but an important one. function myPromiseAll(promises) { const resolvedValues = []; let counter = 0; return new Promise((resolve, reject) => { promises.forEach((promise, index) => { promise.then(result => { resolvedValues[index] = result; counter += 1; if(counter === promises.length) { resolve(resolvedValues); } }) .catch(err => reject(err)) }) }) } PS : You still get a subscribe and a like

@chinmoyborah376 2 жыл бұрын

Oh yes, this is an important minor detail that is easy to miss. Thanks

@pascaltozzi3039 Жыл бұрын

@@chinmoyborah376 there a bigger bug actually, it doesn't return all result and also can return invalid result. ln18 if(index == promises.length-1) should instead be if(result.lenght == promises.length), promise are executed async, if the last promise resolved right away, it return without waiting for the other promise. If the first promise take 30s and timeout with exception, but last promise resolve in 1s, it would not return the reject. For the order, could use the index on line 13, that error a bit more minor in the bigger scope of thing.

@rajrai1495 Жыл бұрын

I really appreciate your videos and they have helped me a lot, my whole college is fanboying you right now and ngl our current placement for dev is because of you Thankyou for your content😇😇😇😇

@RoadsideCoder Жыл бұрын

Wow, thanks a lot man. Which college are you from?

@nikhilraov100 2 жыл бұрын

Nice video. U really are good at Javascript

@user-dl4hx1oe3u 10 ай бұрын

Great Job!

@pankajmenaria3230 3 ай бұрын

is this also correct right ? const flatArryFunction = (arr , depth = 1) => { let result = []; let currentDepth = depth || 1; arr.forEach(element => { if(Array.isArray(element) && currentDepth > 0){ currentDepth++ result.push(...flatArryFunction(element , currentDepth - 1)); }else{ result.push(element); } }); return result; } console.log(flatArryFunction(flatArry));

@AyushVerma-cw6om 11 ай бұрын

how to solve round 2 question using closure?

@ugochiori2160 Жыл бұрын

infinite currying... how come my output is 21 instead of 23?

@SujeetKumar-rq8mi 2 жыл бұрын

Great Video, Thanks.

@saitejagatadi9711 8 ай бұрын

thankyou for this video...

@anandgomaskar2210 Жыл бұрын

thanku so much uploade this video

@Shrikant_Jha 7 ай бұрын

function a() { for (var i = 0; i < 3; i++) { setTimeout(closure(i), 500) } function closure(i) { function inner() { console.log(i) } return inner } } a() //for that setTimeout question

@MohitKhare Жыл бұрын

thanks a lot. really helped.

@newsalert1306 6 ай бұрын

at 3:08 I am doubt you are saying map is not updating orginal array and each loop updating same let arForMap = [1, 2, 3, 4, 5]; let arForEach = [1, 2, 3, 4, 5]; arForMap.map((arr, i) => (arForMap[i] = arr +3)); arForEach.forEach((arr, i) => (arForEach[i] = arr +3)); console.log(arForMap, arForEach); but if you use both in same way as in above code It will update orginal array in both case.

@pavelelantsev9507 2 жыл бұрын

very interesting lessons, thank you

@jatinshankarchatterjee Жыл бұрын

Good content and explanation.🙂

@TopTalentBridge Жыл бұрын

Video view cleaarly say we want to see much video like this Please upload more interviews

@UMBERELLA_ACADEMY 2 жыл бұрын

Hello can you please explain this scenario why is this happening, by mistake I just wrote setTimeOut first and then returning the promise, but for commented part code is returning undefined like [undefined, "hi"] for uncommented code output is same as yours [hello,hi] const returnPromise = (text,time)=>{ // setTimeout(()=>{ // return new Promise((resolve, reje)=>{ // resolve(text) // }) // },time) return new Promise((resolve , reject)=>{ setTimeout(()=>{ resolve(text) },time) }) }

@pascaltozzi3039 Жыл бұрын

your commented code, the function returnPromise does not return anything so you get undefined. your return statement is in a sub function setTimeout which does not return the result to returnPromise but return it to setTimeout and setTimeout does not forward the result back anyway as it's async. If you were to uncomment your commented code and after the setTimeout add return Promise.resolve("test") it would return ["test","hi"] hope you can figure out the rest.

@ahmetaydn4416 Жыл бұрын

Thank you so much, it was so helpful

@phan630 2 жыл бұрын

I need you to present more video interview for FrontEnd Dev that they usually ask for the applicant in ReactJs, Typescript and Javascript

@subhu143 2 жыл бұрын

Quality content helps a lot♥🙌

@shariqansari7426 2 жыл бұрын

yes bro please make more videos like this

@CybernaticoByNishant 2 жыл бұрын

Amazing. Learned a lot from this video! 🔥

@RoadsideCoder 2 жыл бұрын

🙏🙏

@udayjordan4262 Жыл бұрын

Can you pls share the resources from where u have learnt js and react like a roadmap to crack fde interviews . I mean the playlist in youtube to follow

@kevind1272 2 жыл бұрын

Your videos are super helpful. Please do more interview and important videos in JS, React...

@RoadsideCoder 2 жыл бұрын

Yes more coming ✌️

@aniketsriwastva6345 Жыл бұрын

Great explanation

@amitganjewar4062 Жыл бұрын

Awesome video, i just have a suggestion please do not take it otherwise, your solution for the polyfill for promise.all does not cover a case if 2 promises passed to method and second promise resolves first then as per condition if(index === promises.length -1 ) passes and the main promise gets resolved and results in only 1 promise data. so one of the fix for that can be modifying condition if (result.length === promises.length), checking results array length instead of index would fix the problem.

@devop1646 2 жыл бұрын

Teacher should be like you explaining the exact way it should be and this is the way we learn without even practicing it and understanding the concept very very deeply! Thanks a lot and please keep us teaching with different different topics!

@RoadsideCoder 2 жыл бұрын

Thanks a lot. I'm glad that I'm able to do this ❤️

@madetolaugh3476 2 жыл бұрын

Do they also ask DSA questions ?

@the_og_canvas_art Жыл бұрын

i wish i would have watched your video before to know "how to centre a div" ;D I was asked the same question in my interview, today. lol

@hemantpratapsingh236 2 жыл бұрын

Great video ... Very informative ..Keep going 👍👍👍

@RoadsideCoder 2 жыл бұрын

Thanks a lot!

@abdulbasith650 Жыл бұрын

thanks bro i got a job because of you.....stay blessed

@ankur20010 Жыл бұрын

I think there is a issue with promise.all implementation. Checking against the index is not correct way to find if all promises were resolved. Some promises might be resolving while the iteration reached to the last promise. I think that we should have another variable which should increment at each resolve and check against that variable