➡ My Frontend Interview Preparation Course - roadsidecoder.com/course-details 🔴 Complete Interview Playlist - ua-cam.com/play/PLKhlp2qtUcSb_WQZC3sq9Vw3NC4DbreUL.html 👤 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 🔥
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.
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 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.
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 ua-cam.com/play/PLAx7-E_inM6EkgZkrujZvewiM_QZRU4A2.html
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. 👍👍👌👌
"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)
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.
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; }
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);
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
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
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();
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();
for flattening of array to anylevel we can use const flattenArr = (arr) => arr.reduce((acc,cur) => acc.concat(Array.isArray(cur) ? flattenArr(cur): cur),[])
@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)
32:10 Won't change the output order using push? Let say, 2nd promise will take 3 seconds to resolve, and 3rd will take 1 sec The result of 3rd will be at 1 index and result of 2nd will be on 2 index
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!
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);
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
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
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
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.
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();
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();
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
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.
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.
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😇😇😇😇
you should also visit this javascript coding interview questions challange playlist as well it will really help u ua-cam.com/play/PLAx7-E_inM6EkgZkrujZvewiM_QZRU4A2.html
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.
@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
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?
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
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 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.
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.
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.
i think Q2 answer is like this using with closure function a() { for (var i = 0; i < 3; i++) { (function (num) { setTimeout(function log() { console.log(num); }, num * 1000); })(i); } } a();
➡ My Frontend Interview Preparation Course - roadsidecoder.com/course-details
🔴 Complete Interview Playlist - ua-cam.com/play/PLKhlp2qtUcSb_WQZC3sq9Vw3NC4DbreUL.html
👤 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
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
ua-cam.com/play/PLAx7-E_inM6EkgZkrujZvewiM_QZRU4A2.html
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 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
This guy increased the standard of making tech videos simply. 👏
Wow, thanks for such an amazing appreciation ❤️
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.
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. 🥰
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
ua-cam.com/play/PLAx7-E_inM6EkgZkrujZvewiM_QZRU4A2.html
It is because you are using react v18, for v18 in strict mode useeffct with empty dependancies render twice on mount.
there is a simple way to flatten an array example below
arr.toString().split(',').map((a)=>parseInt(a));
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.
"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)
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.
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
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;
}
I seriously love you man. I didn't even know about flat and how it was actually used, goddamn it.
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);
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
for setTimeout question :
1.function c(){
for(var i = 0; i {
console.log(i)
}, 1000);
}
for(var i = 0; i
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.
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
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
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
for flattening of array to anylevel we can use
const flattenArr = (arr) => arr.reduce((acc,cur) => acc.concat(Array.isArray(cur) ? flattenArr(cur): cur),[])
@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)
32:10 Won't change the output order using push?
Let say, 2nd promise will take 3 seconds to resolve, and 3rd will take 1 sec
The result of 3rd will be at 1 index and result of 2nd will be on 2 index
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))
I am learning so much from this series, thank you man
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!
Extremely helpful video as usual !
Learnt a lot 👍
Can't wait for your next interview videos.
Thanks a lot 🙏
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 ❤️
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);
Thank you for sharing the questions with detail explanation. It is very much useful. Will watch more contents given by you.
thanks bro i got a job because of you.....stay blessed
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
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 ❤️
Great content man! keep making such useful videos.
9:00 you can only flatten an array arr, simply use reduce arr.reduce((a,b)=>a.concat(b)
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
The Answe to setTimeout function would be:-
for(var i=0;i{
console.log(y)
},5000,i)
}
1 2 0 is output bru
let arr = [[1,2],[3,4],[5,6,7,8],[9,10,11]];
let output =[];
function flat(arr){
for(let i=0;i
Short and crisp, well explained
You are good at explaining dude, keep it up💯
With closure
For(var i=0,i{
Console.log(i)
},i*1000){
}
}
Delay()
}
Correct 😎
Need more interviews videos! Top notch content
Bhai very good, these questions are legit.. thanks for sharing solutions
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 👏
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();
Thank you, the questions are explained in a clear way, extremely easy to understand.
Great video! I loved the content and tips!
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();
Thanks buddy for these kinda videos🙌
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
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.
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 a lot for the really cool video regarding frontend interview!
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()
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?
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 🙌
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
ua-cam.com/play/PLAx7-E_inM6EkgZkrujZvewiM_QZRU4A2.html
let arr=[
1,
2,
[3,4,5],
[6,7,8],
9
]
function flattenArray(arr,output){
for(let i=0;i
Nice video. U really are good at Javascript
your channel should have a million subs
If u keep supporting, it will surely reach there!
Map vs foreach
Map can able to handle async operation.
Foreach does not
Thank you so much, that was really helpful!
Thanks for the polyfill for Promise.All, I was looking for this explanation
Great video ... Very informative ..Keep going 👍👍👍
Thanks a lot!
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.
@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
Superb stuff!!
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
Q6. promiseall polyfill has wrong implementation. if condition should be (promises.length=== value.length)
Love the content. Thanks for sharing
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?
questions from this interview helped me crack a technical discussion round, which led to me getting an offer. thanks a lot!
Wow congratulations man! ❤️
Thank you so much brother for this amazing content 🔥🔥🔥🔥🔥🔥
🙌
you are awesome mentor, thank you so much !!!
Thanks for this informative video..it really helps.
haha i just love your sense of humor. Throwing in a few jokes as you teach is the best way to learn
Your videos are super helpful. Please do more interview and important videos in JS, React...
Yes more coming ✌️
Thank you so much, it was so helpful
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
Quality content helps a lot♥🙌
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!
Thanks a lot, these videos are so helpful.
Great Job!
Really good video! I will be watching more of his videos! #RealDeal
🙏🙌
you nailed it ......great job
Thanks 🙏
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
Great Video, Thanks.
Thanks for uploading this video 📷📸
Good content and explanation.🙂
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
Amazing. Learned a lot from this video! 🔥
🙏🙏
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.
flat array my solution
function flatArray(arr){
let result = []
function flatHelper(arr){
for (let i=0;i
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.
WE WANT REAL INTERVIEW VIDEO ALSO AND THIS SAME KIND OF VIDEOS MORE....🤘🤘
Alright 🤟
yes bro please make more videos like this
i think Q2 answer is like this using with closure
function a() {
for (var i = 0; i < 3; i++) {
(function (num) {
setTimeout(function log() {
console.log(num);
}, num * 1000);
})(i);
}
}
a();