Javascript Interview Questions ( Call, Bind and Apply ) - Polyfills, Output Based, Explicit Binding
Вставка
- Опубліковано 7 лип 2024
- #JavascriptInterview #Javascript #FrontendInterview
Javascript Interview Questions on Call, Bind and Apply Methods ( or Explicit Binding ) will be discussed in this video including its in Polyfills, Output Based Questions, this keyword etc.
🟦 Follow me on Twitter and u will clear your interview 🤓 -
/ piyush_eon
⭐ Support the channel and learn from me One on One -
/ @roadsidecoder
🔗 Blog for the video -
roadsidecoder.hashnode.dev/ja...
🔗 "This" Keyword Interview Video -
• Javascript Interview Q...
🔗 Objects Interview Video -
• Javascript Interview Q...
🔗 Javascript Interview Series -
• Javascript Interview Q...
🔗 Cars24 Interview Experience -
• Frontend Interview Exp...
🔗 Unacademy Interview Experience -
• Frontend Interview Exp...
🔗 MERN Stack Tutorial with Redux -
• MERN Stack Project Tut...
🔗 React Beginner's Project Tutorials -
• React JS Project Tutor...
-------------------------------------------------------------------------
00:00 Intro
00:43 Ques 1 - What is Call?
02:54 Ques 2 - What is Apply?
03:38 Ques 3 - What is Bind?
04:53 Ques 4 - Output Based Question
06:10 Ques 5 - 'call' with function inside object
07:54 Ques 6 - Output Based Question
09:40 Ques 7 - Print all animals in Object
11:35 Ques 8 - Append Array with "apply"
13:30 Ques 9 - Using 'apply' to enhance built-in functions
14:59 Ques 10 - Bound Function
15:55 Ques 11 - Bind Chaining
16:48 Ques 12 - Fix the code
19:07 Ques 13 - Partial Application with bind
21:14 Ques 14 - Explicit Binding with Arrow Function
23:05 Ques 15 - Call Polyfill Implementation
26:54 Ques 16 - Apply Polyfill Implementation
28:18 Ques 17 - Bind Polyfill Implementation
32:14 Read Blog for this Video
32:23 Important Message 👀
-------------------------------------------------------------------------
Special Thanks to our members -
Srinivas Ayyagari
Saikiran K
🔴 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.
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.
Polyfills understanding lot. How to think. Keep Going......
Amazing work Piyush.. Thank you so much your effort 😊
excited for this one
Thanks, Really Helped
Great Work! Easy to understand🥰
usefull,simple to understand .Thanks
Bhai quality 🌟🤜💥
Thank You Bhaiya for this amazing video....
Excited 🙌🏻
great series, keep up the good work!
Would love a video on prototypes too to be added in this playlist
Great set of questions and explanation, thanks!
Yes need video on prototypes of all objects.
Much needed video, especially wrt implementations using polyfills! Exanples and explanations on point 🚀
Thanks 🔥
ua-cam.com/video/NkbOa1BcMnQ/v-deo.html
@@RoadsideCoder make a tutorial series on js else recommend me from where you learn js or else best resources or channels
Thanks
Yes. Please make a video on prototypes.
super content...very much like it , Thanks lot Sir!
Awesome!!
Awesome!
Most awaited tutorial for me.Thanks.❤❤
Welcome 🙏
it work on my pc thx bro vеry much
Excited
You deserve a subscribe. Keep up the good work bro.
Thanks mate ❤️
Great video. Make a video on js testing
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
ua-cam.com/video/NkbOa1BcMnQ/v-deo.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);
}
}
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
ua-cam.com/video/NkbOa1BcMnQ/v-deo.html
Prototype 🙌🏻
please sir upload your video daily 🙏
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.
Great
watched our whole series and it was awesome and pls make vidoe on prototype
Soon!
Video on prototype please
Exicted!
Can you also make a video based on Prototype Inheritance? Awesome content, as always!
Sure!
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.
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.
Please complete react js interview series
Can you pls do a React specific interview questions, this is what lacks in all the best UA-cam 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.
We want video on prototype also....
In call polyfill what does context.fn = this; line represent
bro please do object oriented programming in js
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()
Could you please make those videos in hindi language. It will be very easy to us. Please please make videos in easy hindi language..
can u pls make similar series for Reactjs
Polyfill for Promise is much needed video(Not so good content on this topic). Pls make video if possible
Soon
23:14 favourite moment 🤣🤣🤣🤣 but yes I was waiting
Please explain important methods in lodash with polyfills for group by and order by
Please like subscribe and Share ua-cam.com/video/NkbOa1BcMnQ/v-deo.html
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!
ua-cam.com/video/NkbOa1BcMnQ/v-deo.html
Hi please make a vedio on event looping, if you have already made a vedio on this please the link.
Can you please make a video on debouncing and throttling?
Please like subscribe and Share ua-cam.com/video/NkbOa1BcMnQ/v-deo.html
Please make a complete video on Promises.
Yes soon!
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
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
#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. 😃
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.
ES6 is the best part
Bro, plz tell I want to solve many more problems in javascript based questions....can u tell where I can take
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.
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
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 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
Can you tell me wHy you have written condition at 23:35 ?
All numbers are numbers but 69 is a feeling
😂😂😂
When I use bind, along with the output, why am I getting undefined?
Bro, certification is necessary to get job
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
Can you please make a video on interview questions on "promises" as well.
soon
Please explain how can we make custom promise
💓🙏🏻
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.
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]
a video freser ke liye hai
Yes
4:40 🤣🤣🤣
This never points to function
The smile after writing 69 ... hahahaaahhahaaaahahaha
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?
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);
}
}
𝐩𝐫𝐨𝐦𝐨𝐬𝐦