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

Подписаться 107 тыс.

Просмотров 371 тыс.

50% 1

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

Опубликовано:

26 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 482

@RoadsideCoder 2 года назад

➡ My Frontend Interview Preparation Course - roadsidecoder.com/course-details 🔴 Complete Interview Playlist - ru-vid.com/group/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 ru-vid.com/group/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.

@rravithejareddy9026 2 года назад

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

@RoadsideCoder 2 года назад

Wow, thanks for such an amazing appreciation ❤️

@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

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

@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

@yodahunter1412 Год назад

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

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

@ichiroutakashima4503 11 месяцев назад

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

@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

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

@abdussamad0348 2 года назад

Need more interviews videos! Top notch content

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

@sharadindupaul5933 2 года назад

Great content man! keep making such useful videos.

@shrushtipolekar8804 2 года назад

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

@RoadsideCoder 2 года назад

Thanks a lot 🙏

@kaykodes3692 Год назад

You are good at explaining dude, keep it up💯

@show_me_the_moneyy 2 года назад

Nice questions - please keep giving interviews and keep making videos

@user-lq1mm2tn5v Год назад

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

@AJAYSINGH-jo7hg Год назад

Short and crisp, well explained

@andriiielagin2243 Год назад

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

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

@maheshsale 8 месяцев назад

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

@helpingselflearner4391 2 года назад

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

@emilyaung2963 2 года назад

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

@sahilkaushal2209 Год назад

Thanks buddy for these kinda videos🙌

@mridulkhurana533 2 года назад

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

@MrAustin4399 2 года назад

Love the content. Thanks for sharing

@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 ru-vid.com/group/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.

@girishavj 10 месяцев назад

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

@Shrikant_Jha 6 месяцев назад

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

@2784raj Год назад

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

@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

@CybernaticoByNishant 2 года назад

Amazing. Learned a lot from this video! 🔥

@RoadsideCoder 2 года назад

🙏🙏

@dineshrout2527 2 года назад

Thanks for this informative video..it really helps.

@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 года назад

@kedarkulkarni0074 2 года назад

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

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

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

@TheSoulCrisis Год назад

Great video! I loved the content and tips!

@zakeeakhtar3611 2 года назад

Thanks a lot, these videos are so helpful.

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

@sanuyadav-ys3fb Год назад

Thank you so much, that was really helpful!

@ajaysinghkanawat Год назад

Thanks for uploading this video 📷📸

@Amar11115 Год назад

thanks a bunch for this video.

@mrfactvenger6570 2 года назад

Waiting bro 👍

@subhu143 2 года назад

Quality content helps a lot♥🙌

@saitejagatadi9711 7 месяцев назад

thankyou for this video...

@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

@SujeetKumar-rq8mi 2 года назад

Great Video, Thanks.

@thimiraakash8941 Год назад

Superb stuff!!

@mihirsharma3857 2 года назад

Need more like this 🙂

@nikhilraov100 2 года назад

Nice video. U really are good at Javascript

@user-dl4hx1oe3u 9 месяцев назад

Great Job!

@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 ❤️

@suyashtiwari8492 2 года назад

Interview series should not be stopped 👑

@RoadsideCoder 2 года назад

It won't 😎

@anandgomaskar2210 Год назад

thanku so much uploade this video

@Lucifer-xt7un 2 года назад

Need more like this

@hemantpratapsingh236 2 года назад

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

@RoadsideCoder 2 года назад

Thanks a lot!

@MohitKhare Год назад

thanks a lot. really helped.

@Kader-su8jr 2 года назад

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

@veterancode2523 2 года назад

you should also visit this javascript coding interview questions challange playlist as well it will really help u ru-vid.com/group/PLAx7-E_inM6EkgZkrujZvewiM_QZRU4A2

@gulamsarwar8258 Год назад

Thanks so much for tNice tutorials bro

@pavelelantsev9507 2 года назад

very interesting lessons, thank you

@ahmetaydn4416 Год назад

Thank you so much, it was so helpful

@kevind1272 2 года назад

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

@RoadsideCoder 2 года назад

Yes more coming ✌️

@cosmincosmin5624 2 года назад

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 2 года назад

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

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

@ritwiksadhu5074 Год назад

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

@RoadsideCoder Год назад

🙌

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

@ashwinpatidar2878 10 месяцев назад

Awesome concepts

@jatinshankarchatterjee Год назад

Good content and explanation.🙂

@knmn8562 2 года назад

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

@RoadsideCoder 2 года назад

Wow congratulations man! ❤️

@abdulbasith650 Год назад

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

@aniketsriwastva6345 Год назад

Great explanation

@ankushladani496 2 года назад

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

@RoadsideCoder 2 года назад

Alright 🤟

@shariqansari7426 Год назад

yes bro please make more videos like this

@ashasr8640 Год назад

Thanks for sharing this video. please make some more interview videos

@RoadsideCoder Год назад

I have made more! You can check out my channel.

@rishabhchopra883 2 года назад

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

@shreyaskupekar 2 года назад

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

@VishalSharma-rn7mt 6 месяцев назад

Awesome

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

@shreymaurya3344 2 года назад

Amazing Video❤🤩

@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

@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 ❤️

@mattymax1721 2 года назад

your channel should have a million subs

@RoadsideCoder 2 года назад

If u keep supporting, it will surely reach there!

@sebastianstrand246 2 года назад

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

@dasdsa5039 Год назад

i love that tks 🤟

@openworld7585 2 года назад

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

@RohitSinghofficial 2 года назад

or for(var i=0;i

@mohitarora2190 2 года назад

can u pls explain how it gives this output ?

@RohitSinghofficial 2 года назад

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

@uttkarshsingh3771 2 года назад

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

@RoadsideCoder 2 года назад

Sure! Thanks man.

@reactjswithsid6779 Год назад

you nailed it ......great job

@RoadsideCoder Год назад

Thanks 🙏

@sourabhmahato5618 2 года назад

Please bring JS interview series. Much needed.

@RoadsideCoder 2 года назад

Its coming next!

@daisywuwoo1 Год назад

null, undefined, or you can explain in this way, undefined is a data type in javascript, null is a value and 99% of the time, it is manually set instead of naturally exist

@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

@raammeena6650 Год назад

Difference b/w map and forEach 1. Map return a new array does not change the original array 2.forEach loop through the array, does not return a new array and change the original array

@mrrishiraj88 2 года назад

Great share. Many a thanks

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