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

➡️ 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

[@RoadsideCoder]

➡ My Frontend Interview Preparation Course - roadsidecoder.com/course-details 🔴 Complete Interview Playlist - kzbin.info/aero/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]

nice video

[@kanganagarwal]

Done

[@ompandey4595]

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

[@nicolaseratyra]

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]

Wow, great to know that!

[@SinghsDuOs]

Now you got job in that company at that time?

[@nicolaseratyra]

@@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]

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

[@nicolaseratyra]

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

[@akalrove4834]

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]

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

[@shriharikulkarni8229]

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

[@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.

[@aiyoda]

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. 🥰

[@rravithejareddy9026]

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

[@RoadsideCoder]

Wow, thanks for such an amazing appreciation ❤️

[@motivatedxyz7665]

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

[@yodahunter1412]

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

[@subhamsaurabh3069]

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]

Thanks brother. Means a lot.

[@surajpatil-dn2fy]

@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)

[@ichiroutakashima4503]

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

[@saranguru6100]

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]

Yes, correct! 🔥

[@Ashishume]

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]

@@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]

@@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]

nice answer

[@girishavj]

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

[@shrushtipolekar8804]

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

[@RoadsideCoder]

Thanks a lot 🙏

[@sharadindupaul5933]

Great content man! keep making such useful videos.

[@MrAustin4399]

Love the content. Thanks for sharing

[@sahilkaushal2209]

Thanks buddy for these kinda videos🙌

[@ScienceSeekho]

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

[@user-lq1mm2tn5v]

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

[@kaykodes3692]

You are good at explaining dude, keep it up💯

[@abdussamad0348]

Need more interviews videos! Top notch content

[@Anonymous11175]

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]

Thanks for your code snippet

[@andriiielagin2243]

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

[@maheshsale]

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

[@zakeeakhtar3611]

Thanks a lot, these videos are so helpful.

[@2784raj]

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

[@sanuyadav-ys3fb]

Thank you so much, that was really helpful!

[@AJAYSINGH-jo7hg]

Short and crisp, well explained

[@show_me_the_moneyy]

Nice questions - please keep giving interviews and keep making videos

[@TheSoulCrisis]

Great video! I loved the content and tips!

[@helpingselflearner4391]

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

[@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)

[@emilyaung2963]

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

[@bikidas5473]

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

[@dineshrout2527]

Thanks for this informative video..it really helps.

[@ahmetaydn4416]

Thank you so much, it was so helpful

[@Amar11115]

thanks a bunch for this video.

[@kedarkulkarni0074]

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

[@CybernaticoByNishant]

Amazing. Learned a lot from this video! 🔥

[@RoadsideCoder]

🙏🙏

[@yashguptta]

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]

Yes!

[@SujeetKumar-rq8mi]

Great Video, Thanks.

[@ashmeetsingh3238]

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_]

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

[@veterancode2523]

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

[@ayushjain7023]

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

[@gamershut5279]

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

[@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?

[@MohitKhare]

thanks a lot. really helped.

[@mridulkhurana533]

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

[@abhinavbhutani6535]

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]

oh right! my bad.

[@soumyajitdey5720]

Nice observation 🙌

[@rushikeshchoche2815]

Thanks Abhinav.

[@Harshitbadolla]

function myPromiseAll(promises) { let result = []; return new Promise((resolve, reject) => { let count = 0; promises.forEach((promise, index) => { promise.then((res) => { result[index] = res; count++ if (count === promises.length) { resolve(result); } }).catch(err => { reject(err); }) }); }); }; Here is the solution which maintains the order

[@saitejagatadi9711]

thankyou for this video...

[@pavelelantsev9507]

very interesting lessons, thank you

[@anandgomaskar2210]

thanku so much uploade this video

[@shreyaskupekar]

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

[@juniorWeb247]

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]

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

[@smaxd3918]

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 🙌

[@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!

[@thimiraakash8941]

Superb stuff!!

[@subhu143]

Quality content helps a lot♥🙌

[@ajaysinghkanawat]

Thanks for uploading this video 📷📸

[@isha25tripathi12]

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.

[@nikhilraov100]

Nice video. U really are good at Javascript

[@mihirsharma3857]

Need more like this 🙂

[@Shrikant_Jha]

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

[@user-dl4hx1oe3u]

Great Job!

[@ekeyur]

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]

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.

[@mrfactvenger6570]

Waiting bro 👍

[@vishwanath-ts]

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);

[@gulamsarwar8258]

Thanks so much for tNice tutorials bro

[@cosmincosmin5624]

great video as always. In the end, i realize that i have a lot to learn and i felt like a stupid. I do want to ask you if you thought doing some live coding, i think it will be great. Thank you for all you're doing on this channel

[@RoadsideCoder]

Thanks man, don't worry I'll be bringing a complete interview series for JS

[@ritwiksadhu5074]

Thank you so much brother for this amazing content 🔥🔥🔥🔥🔥🔥

[@RoadsideCoder]

🙌

[@shariqansari7426]

yes bro please make more videos like this

[@knmn8562]

questions from this interview helped me crack a technical discussion round, which led to me getting an offer. thanks a lot!

[@RoadsideCoder]

Wow congratulations man! ❤️

[@Lucifer-xt7un]

Need more like this

[@kevind1272]

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

[@RoadsideCoder]

Yes more coming ✌️

[@hemantpratapsingh236]

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

[@RoadsideCoder]

Thanks a lot!

[@mrrishiraj88]

Great share. Many a thanks

[@jatinshankarchatterjee]

Good content and explanation.🙂

[@AshishMishra-ct9iy]

@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.

[@devop1646]

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]

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

[@shreymaurya3344]

Amazing Video❤🤩

[@phan630]

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

[@aniketsriwastva6345]

Great explanation

[@sebastianstrand246]

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

[@ashwinpatidar2878]

Awesome concepts

[@sanyamsuthar1357]

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

[@reactjswithsid6779]

you nailed it ......great job

[@RoadsideCoder]

Thanks 🙏

[@uttkarshsingh3771]

Can you make videos solving the frontend interview questions. Would be very helpful for many. And Loved your content ♥❤

[@RoadsideCoder]

Sure! Thanks man.

[@unknown-dev]

Great video, but there is improvement for debounce question like the way you have created and use debounce all in same component. Its working because your input is uncontrolled if we use state and update the state of the component, the component will rerender hence internal state(interval) will lost for handleChange as new function will be created. solution we can define myDebounce outside of our component and use useCallback to get the same refrenece for changeHandler for each rerender. Please correct me if I go wrong.

[@AnshumanKP]

Absolutely! I had faced this issue previously while implementing debounce in my react project. Creating a custom hook for debounce with useCallback fixed it

[@abdulbasith650]

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

[@sowrimihiryss]

Flatten array at any level: function flatten(arr) { let newArray = []; if (arr.length == 0) return; for (let i = 0; i < arr.length; i++) { if (typeof arr[i] == "object") { newArray=newArray.concat(flatten(arr[i])); } else { newArray.push(arr[i]); } } return newArray; }

[@yuvarajm7954]

Very useful session.

[@suyashtiwari8492]

Interview series should not be stopped 👑

[@RoadsideCoder]

It won't 😎

[@openworld7585]

for(var i=0;i console.log(i), i*100) } time(i) } with the help of closure the output is 0,1,2

[@RohitSinghofficial]

or for(var i=0;i

[@mohitarora2190]

can u pls explain how it gives this output ?

[@RohitSinghofficial]

@@mohitarora2190 so you're just changing the scope of var.

[@Kader-su8jr]

Please keep more interviews in other companies 😅 this is really helpful

[@veterancode2523]

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

[@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?

[@rishabhchopra883]

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

[@haciendadad]

Really good video! I will be watching more of his videos! #RealDeal

[@RoadsideCoder]

🙏🙌

[@ankushladani496]

WE WANT REAL INTERVIEW VIDEO ALSO AND THIS SAME KIND OF VIDEOS MORE....🤘🤘

[@RoadsideCoder]

Alright 🤟

[@aniketkhare9496]

Really good video 👍

[@sachusachin9600]

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

[@TopTalentBridge]

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