➡ 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 🔥
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.
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
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. 👍👍👌👌
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();
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?
"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)
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
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
@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)
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.
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);
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.
map -> will not update the array instead returns new array forEach -> will not return any array instead modifies the original array have a look at this code and observe the outputs let arr = [1, 2, 3, 4, 5]; console.log(arr) const mapResult = arr.map((arr, i) => (arr[i] = arr +3)); console.log(arr, mapResult) const forEachResult = arr.forEach((ar, i, arr) => (arr[i] = ar +3)); console.log(arr, forEachResult)
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
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.
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 @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.
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 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
for flattening of array to anylevel we can use const flattenArr = (arr) => arr.reduce((acc,cur) => acc.concat(Array.isArray(cur) ? flattenArr(cur): cur),[])
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
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
I have one question for promise so we do .then for resolve rigth so what if I want to store that response in a variable after .then how can we do that. I know about async await ,I want to know how to get the value in a variable with promise specifically as I need to perform various action on it and I can't do it inside .then but if I try to return it and do the console I get that promise is pending,which I kind of get it but still is there any way to extract the value without async await.
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.
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; }
Hello can you please explain this scenario why is this happening, by mistake I just wrote setTimeOut first and then returning the promise, but for commented part code is returning undefined like [undefined, "hi"] for uncommented code output is same as yours [hello,hi] const returnPromise = (text,time)=>{ // setTimeout(()=>{ // return new Promise((resolve, reje)=>{ // resolve(text) // }) // },time) return new Promise((resolve , reject)=>{ setTimeout(()=>{ resolve(text) },time) }) }
your commented code, the function returnPromise does not return anything so you get undefined. your return statement is in a sub function setTimeout which does not return the result to returnPromise but return it to setTimeout and setTimeout does not forward the result back anyway as it's async. If you were to uncomment your commented code and after the setTimeout add return Promise.resolve("test") it would return ["test","hi"] hope you can figure out the rest.
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();
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
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
@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
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.
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);
@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.
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😇😇😇😇
why can't we use `newArr.push(...customFlat(arr[i], depth--))` i.e 'depth--' instead of 'depth-1' ? If am using "depth--' it is not returning correct value.
@@deepalisrivastava3701 depth-1 and --depth are different things, depth -1 returns a new value, which is one less than the depth value, whileas --depth acutally changes the depth variable's value itself.
Can you pls share the resources from where u have learnt js and react like a roadmap to crack fde interviews . I mean the playlist in youtube to follow
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 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.
➡ 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
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
ua-cam.com/play/PLAx7-E_inM6EkgZkrujZvewiM_QZRU4A2.html
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.
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. 🥰
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
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.
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
I seriously love you man. I didn't even know about flat and how it was actually used, goddamn it.
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 man! Really appreciate your videos.. please keep on making such videos .. you are giving good js and react questions for ur audience.. well done
"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)
there is a simple way to flatten an array example below
arr.toString().split(',').map((a)=>parseInt(a));
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.
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
@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)
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.
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);
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.
map -> will not update the array instead returns new array
forEach -> will not return any array instead modifies the original array
have a look at this code and observe the outputs
let arr = [1, 2, 3, 4, 5];
console.log(arr)
const mapResult = arr.map((arr, i) => (arr[i] = arr +3));
console.log(arr, mapResult)
const forEachResult = arr.forEach((ar, i, arr) => (arr[i] = ar +3));
console.log(arr, forEachResult)
Sir .. tell me
Is proper definition is must?? Or having concept understanding and explain enough??
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.
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));
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
I am learning so much from this series, thank you man
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
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.
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 ❤️
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.
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!
thanks bro i got a job because of you.....stay blessed
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 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
Extremely helpful video as usual !
Learnt a lot 👍
Can't wait for your next interview videos.
Thanks a lot 🙏
for flattening of array to anylevel we can use
const flattenArr = (arr) => arr.reduce((acc,cur) => acc.concat(Array.isArray(cur) ? flattenArr(cur): cur),[])
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 ❤️
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
I have one question for promise so we do .then for resolve rigth so what if I want to store that response in a variable after .then how can we do that. I know about async await ,I want to know how to get the value in a variable with promise specifically as I need to perform various action on it and I can't do it inside .then but if I try to return it and do the console I get that promise is pending,which I kind of get it but still is there any way to extract the value without async await.
Thank you for sharing the questions with detail explanation. It is very much useful. Will watch more contents given by you.
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.
why it is failing to work if i add Promise.reject() in argument array on 1st element or in between but not last ?
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;
}
Bro Ur Live Demo links are not working on ur portfolio. can you fix them?
9:00 you can only flatten an array arr, simply use reduce arr.reduce((a,b)=>a.concat(b)
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()
Hello can you please explain this scenario why is this happening, by mistake I just wrote setTimeOut first and then returning the promise, but
for commented part code is returning undefined like [undefined, "hi"] for uncommented code output is same as yours [hello,hi]
const returnPromise = (text,time)=>{
// setTimeout(()=>{
// return new Promise((resolve, reje)=>{
// resolve(text)
// })
// },time)
return new Promise((resolve , reject)=>{
setTimeout(()=>{
resolve(text)
},time)
})
}
your commented code, the function returnPromise does not return anything so you get undefined. your return statement is in a sub function setTimeout which does not return the result to returnPromise but return it to setTimeout and setTimeout does not forward the result back anyway as it's async. If you were to uncomment your commented code and after the setTimeout add return Promise.resolve("test") it would return ["test","hi"] hope you can figure out the rest.
Video view cleaarly say we want to see much video like this
Please upload more interviews
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))
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
How to Master Data situations and algorithm in JavaScript i don't know pls tell me bro
Short and crisp, well explained
Hi can you suggest me some site where we can practice frontend coding questions like the array flat and event delegation
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
what is the meaning of ...customFlat(ar, depth -1) in the line 14 of flat array example.
Thanks for sharing this video. please make some more interview videos
I have made more! You can check out my channel.
You are good at explaining dude, keep it up💯
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 🙌
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
Thanks a lot for the really cool video regarding frontend interview!
let arr=[
1,
2,
[3,4,5],
[6,7,8],
9
]
function flattenArray(arr,output){
for(let i=0;i
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
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
@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
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.
infinite currying... how come my output is 21 instead of 23?
Is setTimeout will runs after 3 sec or 1 sec if the var i value is 3 ????
Why had you not initialized state inside the constructor in the class component?
Sir i am fresher 3rd year engeneering student i learn Frontend development and make 7 projects so how i get internship pliz suggest.?.?. 😞
Please make more videos on react js interview questions. It's very helpful. I can see only 2 video's on react js interview questions
3 videos are there
@RoadsideCoder it will be very helpful if u make the playlist of videos
can you tellme that how could i make Best portfolio ??
Just include major things like your tech stack, work experience and projects that you have built. If you're from a good college, mention that too.
WE WANT REAL INTERVIEW VIDEO ALSO AND THIS SAME KIND OF VIDEOS MORE....🤘🤘
Alright 🤟
Your videos are super helpful. Please do more interview and important videos in JS, React...
Yes more coming ✌️
Thank you, the questions are explained in a clear way, extremely easy to understand.
Where I learn js and react before the interviews???
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);
Salary negotiation pe bhi ek video bana lo, basically what after we clear all the rounds :)
Great content man! keep making such useful videos.
Hey just wanted to check you haven't asked dsa like competitive coding type ?
Please reply
hi bro regarding componentDidMount for me it is running two times on load but in the video it is running one time is there any issue for this?
@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.
Thanks for the polyfill for Promise.All, I was looking for this explanation
Need more interviews videos! Top notch content
I didn't have portfolio to show interviewer. What about me
Thanks buddy for these kinda videos🙌
questions from this interview helped me crack a technical discussion round, which led to me getting an offer. thanks a lot!
Wow congratulations man! ❤️
Q6. promiseall polyfill has wrong implementation. if condition should be (promises.length=== value.length)
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?
Why I am not able to watch video course recently brought interview preparation on rigi platform
ping me on instagram @roadsidecoder
why can't we use `newArr.push(...customFlat(arr[i], depth--))` i.e 'depth--' instead of 'depth-1' ? If am using "depth--' it is not returning correct value.
depth-- doesn't update the value instantly, it updates it in next line. However you can use --depth
@@RoadsideCoder Even --depth didn't work, Just depth-1 works fine. I dont know why.
@@deepalisrivastava3701 Contact me on instagram @RoadsideCoder.
@@deepalisrivastava3701 depth-1 and --depth are different things, depth -1 returns a new value, which is one less than the depth value, whileas --depth acutally changes the depth variable's value itself.
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.
Can you pls share the resources from where u have learnt js and react like a roadmap to crack fde interviews . I mean the playlist in youtube to follow
yes bro please make more videos like this
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
your channel should have a million subs
If u keep supporting, it will surely reach there!
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!
Great video! I loved the content and tips!
Map vs foreach
Map can able to handle async operation.
Foreach does not
The interview was for how many years of experience??
1