Great Video 🤩, Yesterday a interviewer asked me to do a small function like this const a = [1,2,3] // Output [1,2,3,1,2,3] I used spread method like this [...a,...a] Then he asked to do it in some other way, I could have used call and apply a.push.call(a,...a); a.push.apply(a,a); Thank you soo much for your hard work 😇🥰
You can simpley destruct the array inside Math.max(...numbers) in order to get the same output. Apply isn't necessarily required but thanks for opening new doors, was helpful to understand a new usecase.
one of the best videos I saw on the internet regarding polyfill for bind call and apply. Really really really thank you so much and god bless you, bro.
Amazing explanation. Just a little correction, in polyfills implementation for call and apply, I think we need to call and return the return value also i.e. return context.fn(...args).
#22:38 in the window object we have age, why it is displaying undefined. Normally var age=10; let sample={ age: 20, getage: ()=>{ console.log(this.age); } } sample.getage(); Output will be :10 I'm still in confusion 😃 why it is displayed undefined var age=10; let sample={ age: 20, getage: ()=>{ console.log(this.age); } } let sample2= { age: 30 }; sample.getage.call(sample2) o/p: 10
Because age variable is declared in the global scope with the keyword const and not var. Unlike var, variables declared with const doesn't belong to the window object when declared in the global scope. I recommend watching Akshay saini's video on let and const. 😃
@@RoadsideCoder make a tutorial series on JavaScript to teach .else plz recommend me from where you learn JavaScript good resources of js which makes my base strong on it plz.
At 15:40 sorry for pointing out but you did not clearly clarify why this would represent the global object here. The answer should be in non-strict mode javascript replace the `this` value to global object if it is assigned any value like null and undefined.
Bhaiya I have a Doubt at 18:33 I have written this code checkPassword(user.loginSuc.bind(user , checkPassword ), user.loginfail.bind(user , checkPassword )); still output is same why ?
Thank you for the video! I have a question about #14 for anyone. For the getAgeArrow function, why doesn't the 'this' keyword contain the context of const age = 10 as declared on line 4?
Because it is declared with the const keyword. Variables declared with let and const doesn't belong to the window object. If you replace const with var then it will give us 10 as variables declared with the keyword var in the global scope are added to the window object. Hope it helps ☺
People who are having issues with polyfills just run this , you will get it. Function.prototype.myCall=function(context,...args){ console.log("this ",this); console.log("context ",context); console.log("args ",args); context.func=this; console.log("context1 ",context); context.func(...args) }
When I executed the same code, (given below), I got the output as undefined. Please explain var status = 1; setTimeout(() => { const status = 2; const data = { status: 3, getStatus() { return this.status; }, }; console.log(data.getStatus.call(this)); }, 0);
Hey Piyush, great video again. I think we should delete the 'fn' once it gets executed in the polyfills, bcz we are adding the fn to the context as a method and it will remain attached to the context. So, ideally in call, apply & bind polyfills : Function.prototype.myBind = function(context, ...args){ context.fn = this; return function(){ context.fn(...args); delete context.fn; } } PS : Errors/Edge cases are not handled
Hey Jayant, we can create a function which returns a deepClone of the object passed as argument. In the polyfill, we can just create a clone of the context and add that fn method on it and call it futher, leading to not mutating the original context.
But there is one problem with above snippet. If the function which is binded if it got executed more than once it will throw an error since the function context is already deleted We need something like this Function.prototype.myBind =function(obj, ...args) { let _obj = JSON.parse(JSON.stringify(obj)); _obj.fn = this; return function(...extraArgs) { _obj.fn(...args, ...extraArgs); } }
Hi Piyush, just one thing, in the polyfills, I think we shouldn't add our function directly to the context object as it manipulates the original object. We can clone the object and then call our context.fn()
For pollyfill, can't we create call,apply and bind with Object protoype ? According to your implementation, it will throw error if we attach these methods with object having a function.
Function.prototype.myCall = function(context = {}, ...args){ if(typeof this !== 'function'){ throw new Error(this + ' is not callable') } context[this.name] = this; context[this.name](...args) } We can also make our context object function key as our function name by doing this.
Bhaiya bht din video nhi ayi ,how are you? One Request bhaiya can u start react and next combined course which will cover basics to advanced with project also ? I was trying to learn ,not able to focus what to learn
Just Watched your complete javascript interview questions playlist videos, you just killed it ✨✨..Can you please make a video specifically for a Polyfills and prototype , please?
Thank you soo much for this video, very informative I have one question, in question no 14 we have const age = 10, why this age isn't present in window object?? if I change const to var, var age = 10, then this is available in window object can you please explain why so??
since age is declared with Const, its scope will be Script so it will not be present in the global scope. Global or Window object shows only global scope elements
I have taken a challenge and created polyfills of call like this const person = { age: 20, }; function test() { console.log(`I am ${this.age} years old!`); } Function.prototype.myCall = function (...rest) { let params = rest.slice(1); this.apply(rest[0], params); }; test.myCall(person);
if you call 'myCall' function like this` myCall(null, "USD", 100), you will probably get an error, because you are trying to assign a function to property of null
Somebody help me in this problem Please write solution in javascript Write a function called do_allocation(number_of_people, number_of_buses) The function should return a list of number of people who can get into the next bus that comes in based on the following logic: Each bus’s capacity is the sum of the capacities of the previous two buses. Once all the people get in, then the buses can continue, but will have 0 people inside it. This is the case when the number of people are less and there are more buses. So after all the people are already boarded, then the remaining buses will have 0 people boarding. The output of the function is an array/list with the same length as number_of_buses. The total of this output array/list should be less than or equal to the number_of_people. The first bus’ capacity can be set to 1 by default. E.g. Def do_allocation(number_of_people, number_of_buses): …. Your code…. Return array[number of people got into first bus, number of people got into second bus, …. , number of people who got into last bus]
Just tried handling null cases: Function.prototype.myBind = function (context={}, ...params){ let currentFunc = this; if(context==null){ return function (...args1){ currentFunc(...params, ...args1); } } else{ context.fn = currentFunc; return function (...args1){ context.fn(...params, ...args1); delete context.fn; } } } var a = "to"; const obj = { a: "for", meth: function(a,b){ console.log("hello", this.a, a,b); } }; var f1=obj.meth.myBind(null,"my"); var f2=obj.meth.bind(null,"my"); var f3=obj.meth.myBind(obj,"my"); var f4=obj.meth.bind(obj,"my"); f1("world"); f2("world"); f3("world"); f4("world"); //hello to my world //hello to my world //hello for my world //hello for my world Or simply we can use: Function.prototype.myBind = function (...args){ let currentFunc = this; let params = args.slice(1); return function(...args1){ currentFunc.call(args[0],...params,...args1); } }
![BLACK BAG - Official Trailer [HD] - Only in Theaters March 14](http://i.ytimg.com/vi/Du0Xp8WX_7I/mqdefault.jpg)
🔴 Get my Complete Frontend Interview Prep course - roadsidecoder.com/course-details
Great Video 🤩, Yesterday a interviewer asked me to do a small function like this
const a = [1,2,3] // Output [1,2,3,1,2,3]
I used spread method like this [...a,...a]
Then he asked to do it in some other way, I could have used call and apply
a.push.call(a,...a);
a.push.apply(a,a);
Thank you soo much for your hard work 😇🥰
You can simpley destruct the array inside Math.max(...numbers) in order to get the same output. Apply isn't necessarily required but thanks for opening new doors, was helpful to understand a new usecase.
I found out that 'apply' is an old method for spreading actually, spread operator came in es6
@@madhav3444 I was also wondering why is he using apply for spreading. Thanks for the insight.
one of the best videos I saw on the internet regarding polyfill for bind call and apply. Really really really thank you so much and god bless you, bro.
Much needed video, especially wrt implementations using polyfills! Exanples and explanations on point 🚀
Thanks 🔥
ruclips.net/video/NkbOa1BcMnQ/видео.html
@@RoadsideCoder make a tutorial series on js else recommend me from where you learn js or else best resources or channels
You deserve a subscribe. Keep up the good work bro.
Thanks mate ❤️
Yes need video on prototypes of all objects.
Polyfills understanding lot. How to think. Keep Going......
Great set of questions and explanation, thanks!
Great Work! Easy to understand🥰
23:14 favourite moment 🤣🤣🤣🤣 but yes I was waiting
Amazing work Piyush.. Thank you so much your effort 😊
Thanks, Really Helped
15:52 how come the 'this' context print Window object even you binded it explicitly with 'null' ? What do you meant by hard-fixed ?
Most awaited tutorial for me.Thanks.❤❤
Welcome 🙏
Bhai quality 🌟🤜💥
Would love a video on prototypes too to be added in this playlist
usefull,simple to understand .Thanks
Thanks Bro ❤
Thanks
Amazing explanation.
Just a little correction, in polyfills implementation for call and apply, I think we need to call and return the return value also i.e. return context.fn(...args).
Hi Piyush,
Nice Video as always. 😊
At 14:51, we can also do the following:
Math.max(...arr) // use of spread operator and avoid loops or apply.
Yes true, But I wanted to just mention it with apply, so u have more than one approach 😄
@@RoadsideCoder haha, thats true too.
Nice output questions.
I have a question as we spread does that not create new object.
Thank You Bhaiya for this amazing video....
great series, keep up the good work!
super content...very much like it , Thanks lot Sir!
Yes. Please make a video on prototypes.
Can you tell me wHy you have written condition at 23:35 ?
#22:38 in the window object we have age, why it is displaying undefined.
Normally
var age=10;
let sample={
age: 20,
getage: ()=>{
console.log(this.age);
}
}
sample.getage();
Output will be :10
I'm still in confusion 😃 why it is displayed undefined
var age=10;
let sample={
age: 20,
getage: ()=>{
console.log(this.age);
}
}
let sample2= {
age: 30
};
sample.getage.call(sample2)
o/p: 10
Because age variable is declared in the global scope with the keyword const and not var. Unlike var, variables declared with const doesn't belong to the window object when declared in the global scope. I recommend watching Akshay saini's video on let and const. 😃
excited for this one
Can you pls do a React specific interview questions, this is what lacks in all the best RUclips channels
Yes, I will start a complete series on that soon!
Yes please make videos on react
@@RoadsideCoder ty bro
@@RoadsideCoder plz first of all make a serious on JavaScript tutorial and problem solving on it 🙁
@@RoadsideCoder make a tutorial series on JavaScript to teach .else plz recommend me from where you learn JavaScript good resources of js which makes my base strong on it plz.
Excited 🙌🏻
it work on my pc thx bro vеry much
At 15:40 sorry for pointing out but you did not clearly clarify why this would represent the global object here. The answer should be in non-strict mode javascript replace the `this` value to global object if it is assigned any value like null and undefined.
Great video. Make a video on js testing
Bhaiya I have a Doubt at 18:33 I have written this code
checkPassword(user.loginSuc.bind(user , checkPassword ), user.loginfail.bind(user , checkPassword ));
still output is same why ?
watched our whole series and it was awesome and pls make vidoe on prototype
Soon!
Thank you for the video! I have a question about #14 for anyone. For the getAgeArrow function, why doesn't the 'this' keyword contain the context of const age = 10 as declared on line 4?
Because it is declared with the const keyword. Variables declared with let and const doesn't belong to the window object. If you replace const with var then it will give us 10 as variables declared with the keyword var in the global scope are added to the window object. Hope it helps ☺
@@mr-36 Ah, thank you!
ruclips.net/video/NkbOa1BcMnQ/видео.html
People who are having issues with polyfills just run this , you will get it.
Function.prototype.myCall=function(context,...args){
console.log("this ",this);
console.log("context ",context);
console.log("args ",args);
context.func=this;
console.log("context1 ",context);
context.func(...args)
}
When I executed the same code, (given below), I got the output as undefined. Please explain
var status = 1;
setTimeout(() => {
const status = 2;
const data = {
status: 3,
getStatus() {
return this.status;
},
};
console.log(data.getStatus.call(this));
}, 0);
Same bro i also got the same output
Great video! Thank you for this ❤️
Can you please make one more playlist of LLD & HLD for frontend interviews?
yes sir make in lld playlist
ruclips.net/video/NkbOa1BcMnQ/видео.html
Prototype 🙌🏻
Awesome!
Can you also make a video based on Prototype Inheritance? Awesome content, as always!
Sure!
Could you please make those videos in hindi language. It will be very easy to us. Please please make videos in easy hindi language..
In call polyfill what does context.fn = this; line represent
Awesome!!
Nice vedio. Bro 5th bar comment. Kr re hu ki please start makimg vedio DSA with Javascript. Leetcode k sare easy level cover krlo please.
Excited
Video on prototype please
Hey Piyush, great video again. I think we should delete the 'fn' once it gets executed in the polyfills, bcz we are adding the fn to the context as a method and it will remain attached to the context. So, ideally in call, apply & bind polyfills :
Function.prototype.myBind = function(context, ...args){
context.fn = this;
return function(){
context.fn(...args);
delete context.fn;
}
}
PS : Errors/Edge cases are not handled
ruclips.net/video/NkbOa1BcMnQ/видео.html
Hey Jayant, we can create a function which returns a deepClone of the object passed as argument.
In the polyfill, we can just create a clone of the context and add that fn method on it and call it futher, leading to not mutating the original context.
But there is one problem with above snippet. If the function which is binded if it got executed more than once it will throw an error since the function context is already deleted
We need something like this
Function.prototype.myBind =function(obj, ...args) {
let _obj = JSON.parse(JSON.stringify(obj));
_obj.fn = this;
return function(...extraArgs) {
_obj.fn(...args, ...extraArgs);
}
}
please sir upload your video daily 🙏
Hi Piyush, just one thing, in the polyfills, I think we shouldn't add our function directly to the context object as it manipulates the original object. We can clone the object and then call our context.fn()
Please make a complete video on Promises.
Yes soon!
Polyfill for Promise is much needed video(Not so good content on this topic). Pls make video if possible
Soon
For pollyfill, can't we create call,apply and bind with Object protoype ?
According to your implementation, it will throw error if we attach these methods with object having a function.
Good explanation, but would be better if you explain them a bit slower :)
Their is an option in the yt video window -> settings -> playback speed(0 - 2x) you can slow it accordingly.
Function.prototype.myCall = function(context = {}, ...args){
if(typeof this !== 'function'){
throw new Error(this + ' is not callable')
}
context[this.name] = this;
context[this.name](...args)
}
We can also make our context object function key as our function name by doing this.
can u pls make similar series for Reactjs
Bhaiya bht din video nhi ayi ,how are you?
One Request bhaiya can u start react and next combined course which will cover basics to advanced with project also ? I was trying to learn ,not able to focus what to learn
Bro abhi sunday ko hi to dali hai video 😄
@@RoadsideCoder ha bhaiya ,btt regular video nhi dal raha ho na islia bola 🥲,like koi courses ....
@@brajagopalmukherjee1588 Ha job ki vjh se time ni mil pata, but I'm trying
We want video on prototype also....
When I use bind, along with the output, why am I getting undefined?
Please complete react js interview series
Bro, certification is necessary to get job
Using myCall, myBind Or myApply mutates the car1 object,
After using the polyfill try consoling the car1 object, you'll find fn method on it.
Please explain important methods in lodash with polyfills for group by and order by
Please like subscribe and Share ruclips.net/video/NkbOa1BcMnQ/видео.html
Bro, plz tell I want to solve many more problems in javascript based questions....can u tell where I can take
Just Watched your complete javascript interview questions playlist videos, you just killed it ✨✨..Can you please make a video specifically for a Polyfills and prototype , please?
Hey, Thank you so much. Sure, I'll make a video on prototypes and other topics too!
@@RoadsideCoder thanks buddy
Can you please make a video on debouncing and throttling?
Please like subscribe and Share ruclips.net/video/NkbOa1BcMnQ/видео.html
Thank you soo much for this video, very informative
I have one question, in question no 14 we have const age = 10, why this age isn't present in window object??
if I change const to var, var age = 10, then this is available in window object
can you please explain why so??
since age is declared with Const, its scope will be Script so it will not be present in the global scope.
Global or Window object shows only global scope elements
Thanks for clearing the doubt
Hi please make a vedio on event looping, if you have already made a vedio on this please the link.
I have taken a challenge and created polyfills of call like this
const person = {
age: 20,
};
function test() {
console.log(`I am ${this.age} years old!`);
}
Function.prototype.myCall = function (...rest) {
let params = rest.slice(1);
this.apply(rest[0], params);
};
test.myCall(person);
Exicted!
bro please do object oriented programming in js
4:40 🤣🤣🤣
All numbers are numbers but 69 is a feeling
😂😂😂
Great
Can you please make a video on interview questions on "promises" as well.
soon
Please explain how can we make custom promise
ES6 is the best part
💓🙏🏻
a video freser ke liye hai
Yes
if you call 'myCall' function like this` myCall(null, "USD", 100), you will probably get an error, because you are trying to assign a function to property of null
Somebody help me in this problem
Please write solution in javascript
Write a function called do_allocation(number_of_people, number_of_buses)
The function should return a list of number of people who can get into the next bus that comes in based on the following logic:
Each bus’s capacity is the sum of the capacities of the previous two buses.
Once all the people get in, then the buses can continue, but will have 0 people inside it.
This is the case when the number of people are less and there are more buses. So after all the people are already boarded, then the remaining buses will have 0 people boarding.
The output of the function is an array/list with the same length as number_of_buses.
The total of this output array/list should be less than or equal to the number_of_people.
The first bus’ capacity can be set to 1 by default.
E.g.
Def do_allocation(number_of_people, number_of_buses):
…. Your code….
Return array[number of people got into first bus, number of people got into second bus, …. , number of people who got into last bus]
This never points to function
4:38 69 IQ moves 😂
Why we wanna pay money for accesing ur videos brother
I didn't understand, when did I ask for money bro?
why 69?
must be a coincidence 👀
only questions are useful and get more knowledge from anywhere else with these questions
, you have not provided any proper explaination here.
Just tried handling null cases:
Function.prototype.myBind = function (context={}, ...params){
let currentFunc = this;
if(context==null){
return function (...args1){
currentFunc(...params, ...args1);
}
}
else{
context.fn = currentFunc;
return function (...args1){
context.fn(...params, ...args1);
delete context.fn;
}
}
}
var a = "to";
const obj = {
a: "for",
meth: function(a,b){
console.log("hello", this.a, a,b);
}
};
var f1=obj.meth.myBind(null,"my");
var f2=obj.meth.bind(null,"my");
var f3=obj.meth.myBind(obj,"my");
var f4=obj.meth.bind(obj,"my");
f1("world"); f2("world"); f3("world"); f4("world");
//hello to my world
//hello to my world
//hello for my world
//hello for my world
Or simply we can use:
Function.prototype.myBind = function (...args){
let currentFunc = this;
let params = args.slice(1);
return function(...args1){
currentFunc.call(args[0],...params,...args1);
}
}
𝐩𝐫𝐨𝐦𝐨𝐬𝐦