➡ My Frontend Interview Preparation Course - roadsidecoder.com/course-details 🔴 Complete Interview Playlist - ruclips.net/p/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 🔥
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
@@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
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.
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.
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
@@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.
@@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.
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.
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. 👍👍👌👌
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.
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
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
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.
you should also visit this javascript coding interview questions challange playlist as well it will really help u ruclips.net/p/PLAx7-E_inM6EkgZkrujZvewiM_QZRU4A2
"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)
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();
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
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 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.
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.
Absolutely! I had faced this issue previously while implementing debounce in my react project. Creating a custom hook for debounce with useCallback fixed it
@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)
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!
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);
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
for flattening of array to anylevel we can use const flattenArr = (arr) => arr.reduce((acc,cur) => acc.concat(Array.isArray(cur) ? flattenArr(cur): cur),[])
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
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
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.
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?
Great video, but requires some correction in the implementation of Promise.all, you should not be doing result.push(res) as depending on the order of promise resolution the final returned values of Promise.all will change. Ideally the returned value from Promise.all should be an array with the resolved values of each promise in the order they were passes to Promise.all and not based on the order of resolution of individual Promise.
this is great content! But, when you were explaining bind, you said bind doesn't take any arguments, which is not right. The passing of arguments is optional while binding, it can take arguments, and if it has additional arguments, they can be passed on to the curried function.
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😇😇😇😇
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
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
I also got interviewed very recently and most of the questions were same, I was stuck in writing the polyfill for Promise.race, Please make a video on that. Thanks for the video.
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.
Great content dude! Just one edge case for `Promise.all()` -> since the array consists of Promises which might have some asynchronous operations, is it possible to maintain the proper ordering of the resolved values? Or let's say, for example, we were expecting ["hello", "hi"], but received ["hi", "hello"] -> can we maintain the ordering here?
Ln15, you have the index for the promise, ln13 you have an empty array of result, initialize the array of result to the same size as array of promises, instead of pushing the result when it resolve, simply insert it in the array of result based on the index of the original promise. Also watch out for ln18 there a bug, since it's async it resolve on the last promise being resolved and not when all promise resolved which is a bit more troubling.
you should also visit this javascript coding interview questions challange playlist as well it will really help u ruclips.net/p/PLAx7-E_inM6EkgZkrujZvewiM_QZRU4A2
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
Seems like the unacademy interviewers are also short of some good js question...but brother you please making these videos.. it really helps us a lot!!
@RoadsideCoder Great content brother, Learned a lot. one correction i think is needed in the promise.all question, the condition you mentioned for checking if all promise are resolved or not (index===promise.length-1), is not entirely correct i think so. problem-> if suppose all the promise are having settimeout and out of 3 promises the 2nd one will resolve after 5 sec and the first one and last one after 1 and 2 sec respectively. So when it will come to third promise it will resolve and return the result with first and third promise results, while the second promise will still be running. moreover the order of results will also alter due to timeout. while in promise.all will show results in order no matter the time taken by any promise
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; }
For the setTimeOut() part, this works: function a() { for (var i = 0; i < 3; i++) { function inner(i) { return setTimeout(function log() { console.log(i); }, i * 1000); } console.log(i); } } a();
This is the Js code that will flatten array for any level, even if you don't know the depth, const arr = [ //Your Array ] const destructure = (array) =>{ let ans = []; array.forEach((e)=>{ if(Array.isArray(e)){ ans.push(...destructure(e)); } else{ ans.push(e); } }); return ans; } let res = destructure(arr); console.log(res);
HI I am experinced in react for 10 months in a company and now due to some maangerial issue with company i am resigning from here. Will i get a job as experinced in react js. Also is these questions are for experinced front end developer .Can you make video on that also. Anyways love your work , keep doing that
using var keyword and output is 012 function a(){ for(var i =0; i < 3; i++){ setTimeout(function log(isValue){ return function(){ console.log(isValue); // Output is 012 } }(i), 1000 + i) } } a();
thanks @RoadsideCoder for such a nice vider, for Promise.all resolusion this is the correct version function myPromiseAll(promises) { let result = [] return new Promise((resolve, reject) => { promises.forEach((p) => { p.then((res) => { result.push(res); if (promises.length === result.length) { resolve(result) } }).catch((err) => reject(err)); }) }) }
You could of also used the index of the promises.forEach to insert the answer inside result at the right spot and by having result array initialize to the promises array size and a side counter for amount of resolved promise for the end condition.
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.
I Will share my experience, so that It will help atleast help anybody, so earlier in online interview I become very very nervous, I can't even speak, but since I had very bad experience in different companies, I also needed desperately a new job. So I started thinking, I got rejected in more than 40 interviews, than I started taking it as a game only, just like a cricket or Ludo, It doesn't actually matter if you can't recall or answer some technical questions, or problem, it is all about confidence and mentality. Believe me, you just need to not to show that you are nervous, and you don't have skills. It is just that you don't remember or done the think interviewer asking. Take it easy when you get rejected. It is greater achivement because you learn, and now working with company I wanted to work with. Only because I had given three to 5 interviews on daily basis.
Q2 setTimeout solution using closures and IIFE: function a() { for (var i = 0; i < 3; i++) { (function() { let j = i; setTimeout(function log() { console.log(j); }, i * 1000); }()); } } a();
@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.
Hey RoadsideCoder bhai, what is your total experience ? wanted to know for what experience level this interview can be asked, and wanted to know if you have decided to join any of the unicorn companies you have been interviewed in. Also thanks for these videos help me understand some new concepts or improve my knowledge on how i can implement on use it
Hi..It was an useful video for me. I hope that you could answer this question for, as I didn't get proper answer. Could you please tell me a difference between bold and strong tag in html also em vs i tag..Just a friendly ask..Thanks in advance
![Chlöe - Shake (Feat. Jeremih) [Official Visualizer]](http://i.ytimg.com/vi/aDs_1ufpfv8/mqdefault.jpg)
➡ My Frontend Interview Preparation Course - roadsidecoder.com/course-details
🔴 Complete Interview Playlist - ruclips.net/p/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 🔥
nice video
Done
Chutiya banana band karo 3rd class company bhi itna easy nhi puchta
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
Wow, great to know that!
Now you got job in that company at that time?
@@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
@@nicolaseratyra Nice...can i get your email or linkedin for frontend jobs, where I should apply as 3 months experience only
And i don't work as a front-end developer. I work more of full stuck with Java and JavaScript
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.
you should also visit this javascript coding challange playlist as well it will really help u
ruclips.net/p/PLAx7-E_inM6EkgZkrujZvewiM_QZRU4A2
This guy increased the standard of making tech videos simply. 👏
Wow, thanks for such an amazing appreciation ❤️
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.
Yes, correct! 🔥
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
@@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.
@@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.
nice answer
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.
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. 👍👍👌👌
Thanks brother. Means a lot.
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.
oh right! my bad.
Nice observation 🙌
Thanks Abhinav.
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
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
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.
Thank U very much Brother 🙏🙏🙏🙏🙏 I was stucked for some days thinking about this, Thanks for solving that problem !!
you should also visit this javascript coding interview questions challange playlist as well it will really help u
ruclips.net/p/PLAx7-E_inM6EkgZkrujZvewiM_QZRU4A2
It is because you are using react v18, for v18 in strict mode useeffct with empty dependancies render twice on mount.
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. 🥰
"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)
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();
Thanks for your code snippet
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
there is a simple way to flatten an array example below
arr.toString().split(',').map((a)=>parseInt(a));
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
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
Oh yes, this is an important minor detail that is easy to miss. Thanks
@@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.
I seriously love you man. I didn't even know about flat and how it was actually used, goddamn it.
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.
Absolutely! I had faced this issue previously while implementing debounce in my react project. Creating a custom hook for debounce with useCallback fixed it
@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)
previous video i commented to bring this series. Thanks for this video . Kindly produce more. I learnt that tranform div case to center div. !
Yes!
I am learning so much from this series, thank you man
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!
Thanks a lot. I'm glad that I'm able to do this ❤️
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);
Extremely helpful video as usual !
Learnt a lot 👍
Can't wait for your next interview videos.
Thanks a lot 🙏
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
for(var i=0;i console.log(i), i*100)
}
time(i)
}
with the help of closure the output is 0,1,2
or
for(var i=0;i
can u pls explain how it gives this output ?
@@mohitarora2190 so you're just changing the scope of var.
for flattening of array to anylevel we can use
const flattenArr = (arr) => arr.reduce((acc,cur) => acc.concat(Array.isArray(cur) ? flattenArr(cur): cur),[])
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
You are good at explaining dude, keep it up💯
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
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
Congrats on clearing the interviews Deepinder!! Glad I could help ❤️
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.
I think the answer for set timeout challenge is :-
function a(){
var b = -1;
for(var i=0;i
function a() {
for (var i = 0; i < 3; i++) {
function m(x) {
setTimeout(() => {
console.log(x);
}, x * 1000);
}
m(i);
}
}
a()
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 🙌
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?
Great video, but requires some correction in the implementation of Promise.all, you should not be doing result.push(res) as depending on the order of promise resolution the final returned values of Promise.all will change. Ideally the returned value from Promise.all should be an array with the resolved values of each promise in the order they were passes to Promise.all and not based on the order of resolution of individual Promise.
haha i just love your sense of humor. Throwing in a few jokes as you teach is the best way to learn
this is great content!
But, when you were explaining bind, you said bind doesn't take any arguments, which is not right.
The passing of arguments is optional while binding, it can take arguments, and if it has additional arguments, they can be passed on to the curried function.
Yes, and I have explained this in-depth in my call,bing,apply video separately
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😇😇😇😇
Wow, thanks a lot man. Which college are you from?
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
Thanks man, don't worry I'll be bringing a complete interview series for JS
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
I also got interviewed very recently and most of the questions were same, I was stuck in writing the polyfill for Promise.race, Please make a video on that. Thanks for the video.
Yes, it will be in my javascript interview series.
Bro how you apply for this i am fresher frontend developer so that's why i question you.
@@jethya3640 got the oppurtunity through relevel
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.
Thanks for this video! Are these the type of questions that could be expected in an entry-level frontend interview?
No - At advanced level, that too for React Specifically. Meaning about 8-10 years of experience if you show in your resume.
Great content dude!
Just one edge case for `Promise.all()` -> since the array consists of Promises which might have some asynchronous operations, is it possible to maintain the proper ordering of the resolved values?
Or let's say, for example, we were expecting ["hello", "hi"], but received ["hi", "hello"] -> can we maintain the ordering here?
function myPromiseAll(promises) {
let result = Array(promises.length);
let count = 0;
return new Promise((resolve, reject) => {
promises.forEach((p, index) => {
p.then((res) => {
count++;
result[index] = res;
if (count == promises.length) {
resolve(result);
}
}).catch((err) => reject(err));
})
});
}
use this one..
Ln15, you have the index for the promise, ln13 you have an empty array of result, initialize the array of result to the same size as array of promises, instead of pushing the result when it resolve, simply insert it in the array of result based on the index of the original promise. Also watch out for ln18 there a bug, since it's async it resolve on the last promise being resolved and not when all promise resolved which is a bit more troubling.
Please keep more interviews in other companies 😅 this is really helpful
you should also visit this javascript coding interview questions challange playlist as well it will really help u
ruclips.net/p/PLAx7-E_inM6EkgZkrujZvewiM_QZRU4A2
thanks bro i got a job because of you.....stay blessed
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
Thank you for sharing the questions with detail explanation. It is very much useful. Will watch more contents given by you.
9:00 you can only flatten an array arr, simply use reduce arr.reduce((a,b)=>a.concat(b)
Seems like the unacademy interviewers are also short of some good js question...but brother you please making these videos.. it really helps us a lot!!
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
Salary negotiation pe bhi ek video bana lo, basically what after we clear all the rounds :)
Map vs foreach
Map can able to handle async operation.
Foreach does not
Need more interviews videos! Top notch content
@RoadsideCoder Great content brother, Learned a lot.
one correction i think is needed in the promise.all question, the condition you mentioned for checking if all promise are resolved or not (index===promise.length-1), is not entirely correct i think so.
problem-> if suppose all the promise are having settimeout and out of 3 promises the 2nd one will resolve after 5 sec and the first one and last one after 1 and 2 sec respectively. So when it will come to third promise it will resolve and return the result with first and third promise results, while the second promise will still be running. moreover the order of results will also alter due to timeout. while in promise.all will show results in order no matter the time taken by any promise
Nice questions - please keep giving interviews and keep making videos
WE WANT REAL INTERVIEW VIDEO ALSO AND THIS SAME KIND OF VIDEOS MORE....🤘🤘
Alright 🤟
let arr=[
1,
2,
[3,4,5],
[6,7,8],
9
]
function flattenArray(arr,output){
for(let i=0;i
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;
}
Thanks buddy for these kinda videos🙌
Great content man! keep making such useful videos.
for setTimeout question :
1.function c(){
for(var i = 0; i {
console.log(i)
}, 1000);
}
for(var i = 0; i
Your videos are super helpful. Please do more interview and important videos in JS, React...
Yes more coming ✌️
For the setTimeOut() part, this works:
function a() {
for (var i = 0; i < 3; i++) {
function inner(i) {
return setTimeout(function log() {
console.log(i);
}, i * 1000);
}
console.log(i);
}
}
a();
inner() call missing
@@DevangPatil inner call parameter
map vs foreach:
Map will return a new array of the same length while foreach doesn't even have to return anything
Flat deeply nested array in one go -
const arr = [1,2,[3,4,[5,6,[7,8]]]]
let flattened;
function arrFlattener (arr){
if(arr.some(el => Array.isArray(el))){
flattened = arr.flatMap(el => el)
arrFlattener(flattened)
return flattened
}
}
console.log(arrFlattener(arr))
This is the Js code that will flatten array for any level, even if you don't know the depth,
const arr = [
//Your Array
]
const destructure = (array) =>{
let ans = [];
array.forEach((e)=>{
if(Array.isArray(e)){
ans.push(...destructure(e));
}
else{
ans.push(e);
}
});
return ans;
}
let res = destructure(arr);
console.log(res);
HI I am experinced in react for 10 months in a company and now due to some maangerial issue with company i am resigning from here. Will i get a job as experinced in react js. Also is these questions are for experinced front end developer .Can you make video on that also.
Anyways love your work , keep doing that
Thanks a lot for the really cool video regarding frontend interview!
using var keyword and output is 012
function a(){
for(var i =0; i < 3; i++){
setTimeout(function log(isValue){
return function(){
console.log(isValue); // Output is 012
}
}(i), 1000 + i)
}
}
a();
What are the 'args' in the debounce question on line 6 ? Great video btw :)
this is so tough 😪 pray for my interview
How did it go?
Can you give tips on how to make resume . And plz show your's as well to get a better reference
Short and crisp, well explained
thanks alot man ! Please make a interview series for frontend itself
thanks @RoadsideCoder for such a nice vider, for Promise.all resolusion this is the correct version
function myPromiseAll(promises) {
let result = []
return new Promise((resolve, reject) => {
promises.forEach((p) => {
p.then((res) => {
result.push(res);
if (promises.length === result.length) {
resolve(result)
}
}).catch((err) => reject(err));
})
})
}
You could of also used the index of the promises.forEach to insert the answer inside result at the right spot and by having result array initialize to the promises array size and a side counter for amount of resolved promise for the end condition.
Thank you, the questions are explained in a clear way, extremely easy to understand.
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.
You're welcome ❤️ More coming soon!
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));
I need you to present more video interview for FrontEnd Dev that they usually ask for the applicant in ReactJs, Typescript and Javascript
Can you make videos solving the frontend interview questions. Would be very helpful for many. And Loved your content ♥❤
Sure! Thanks man.
Thanks for the polyfill for Promise.All, I was looking for this explanation
questions from this interview helped me crack a technical discussion round, which led to me getting an offer. thanks a lot!
Wow congratulations man! ❤️
Bhai very good, these questions are legit.. thanks for sharing solutions
just 1 issue in promise.all =>
default promise.all is printing ["hello", "hi"]
your implementation is printing ["hi", "hello"]
it also only resolve when the last promise resolve, so it can resolve before all promises are resolved. (line 18)
Great video! I loved the content and tips!
I Will share my experience, so that It will help atleast help anybody, so earlier in online interview I become very very nervous, I can't even speak, but since I had very bad experience in different companies, I also needed desperately a new job. So I started thinking, I got rejected in more than 40 interviews, than I started taking it as a game only, just like a cricket or Ludo, It doesn't actually matter if you can't recall or answer some technical questions, or problem, it is all about confidence and mentality. Believe me, you just need to not to show that you are nervous, and you don't have skills. It is just that you don't remember or done the think interviewer asking. Take it easy when you get rejected. It is greater achivement because you learn, and now working with company I wanted to work with. Only because I had given three to 5 interviews on daily basis.
Well said 👏
your channel should have a million subs
If u keep supporting, it will surely reach there!
Q6. promiseall polyfill has wrong implementation. if condition should be (promises.length=== value.length)
React Developer: what is your responsibility ? how to tackle this question. please answer
Hi can you suggest me some site where we can practice frontend coding questions like the array flat and event delegation
Q2 setTimeout solution using closures and IIFE:
function a() {
for (var i = 0; i < 3; i++) {
(function() {
let j = i;
setTimeout(function log() {
console.log(j);
}, i * 1000);
}());
}
}
a();
@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.
centering a div with Grid - place-items center
Hey RoadsideCoder bhai, what is your total experience ? wanted to know for what experience level this interview can be asked, and wanted to know if you have decided to join any of the unicorn companies you have been interviewed in. Also thanks for these videos help me understand some new concepts or improve my knowledge on how i can implement on use it
Hey I've graduated in 2021
Hi..It was an useful video for me.
I hope that you could answer this question for, as I didn't get proper answer.
Could you please tell me a difference between bold and strong tag in html also em vs i tag..Just a friendly ask..Thanks in advance
Nice video. U really are good at Javascript
Amazing. Learned a lot from this video! 🔥
🙏🙏