Javascript Interview Questions ( Call, Bind and Apply ) - Polyfills, Output Based, Explicit Binding

#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

[@RoadsideCoder]

🔴 Get my Complete Frontend Interview Prep course - roadsidecoder.com/course-details

[@ajitshaw1936]

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 😇🥰

[@codeedict3919]

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.

[@juniorWeb247]

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.

[@dancelifevarsha4109]

Amazing work Piyush.. Thank you so much your effort 😊

[@TravelwithPujarini]

Excited 🙌🏻

[@karthikeyasoft]

Polyfills understanding lot. How to think. Keep Going......

[@conorkamperman957]

great series, keep up the good work!

[@abhishekvishwakarma9045]

excited for this one

[@_MS98]

Thanks, Really Helped

[@karthikeyasoft]

Great Work! Easy to understand🥰

[@investneur8232]

usefull,simple to understand .Thanks

[@harshsinghchauhan869]

Bhai quality 🌟🤜💥

[@ankushladani496]

Thank You Bhaiya for this amazing video....

[@siemen_subbaiah]

Would love a video on prototypes too to be added in this playlist

[@srinivasak4087]

super content...very much like it , Thanks lot Sir!

[@hamzahusein7059]

Much needed video, especially wrt implementations using polyfills! Exanples and explanations on point 🚀

[@RoadsideCoder]

Thanks 🔥

[@askrshar6154]

kzbin.info/www/bejne/hJzFgJRnd8iApLM

[@shoukathennadesigns5135]

@@RoadsideCoder make a tutorial series on js else recommend me from where you learn js or else best resources or channels

[@dhwajsharma]

Yes. Please make a video on prototypes.

[@Solo_playz]

Yes need video on prototypes of all objects.

[@pranupranav6279]

Thanks

[@rlxgroot278]

Excited

[@DevangPatil]

Awesome!!

[@jsagar95]

Awesome!

[@sandeepdubey9668]

Most awaited tutorial for me.Thanks.❤❤

[@RoadsideCoder]

Welcome 🙏

[@deepakverma2071]

Great video! Thank you for this ❤️ Can you please make one more playlist of LLD & HLD for frontend interviews?

[@pankajsajwan3304]

yes sir make in lld playlist

[@askrshar6154]

kzbin.info/www/bejne/hJzFgJRnd8iApLM

[@prateekgupta9744]

You deserve a subscribe. Keep up the good work bro.

[@RoadsideCoder]

Thanks mate ❤️

[@sumukhakb2701]

Great video. Make a video on js testing

[@muhammadnishad.p.n1170]

Prototype 🙌🏻

[@jayantsharma2669]

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

[@askrshar6154]

kzbin.info/www/bejne/hJzFgJRnd8iApLM

[@swastikpatro6436]

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.

[@gowthamfirestick3791]

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); } }

[@ashishchandwani9179]

Exicted!

[@samkurc6535]

it work on my pc thx bro vеry much

[@ranawaqas4080]

Great

[@sajalgupta7345]

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.

[@RoadsideCoder]

Yes true, But I wanted to just mention it with apply, so u have more than one approach 😄

[@sajalgupta7345]

@@RoadsideCoder haha, thats true too. Nice output questions.

[@logeesh2009]

I have a question as we spread does that not create new object.

[@simionandrei5409]

Can you also make a video based on Prototype Inheritance? Awesome content, as always!

[@RoadsideCoder]

Sure!

[@rohanpal2180]

can u pls make similar series for Reactjs

[@ShubhamJain-qx9tv]

In call polyfill what does context.fn = this; line represent

[@crystalclear178]

Please complete react js interview series

[@suhaskambale7998]

please sir upload your video daily 🙏

[@investneur8232]

Video on prototype please

[@ajayshekhawat2292]

watched our whole series and it was awesome and pls make vidoe on prototype

[@RoadsideCoder]

Soon!

[@kovendanragupathi7632]

Can you pls do a React specific interview questions, this is what lacks in all the best KZbin channels

[@RoadsideCoder]

Yes, I will start a complete series on that soon!

[@crystalclear178]

Yes please make videos on react

[@gtbaba123]

@@RoadsideCoder ty bro

[@shoukathennadesigns5135]

@@RoadsideCoder plz first of all make a serious on JavaScript tutorial and problem solving on it 🙁

[@shoukathennadesigns5135]

@@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.

[@santoshmore2953]

bro please do object oriented programming in js

[@Ashish-_-]

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()

[@s1k_guy]

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.

[@swastikpatro6436]

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.

[@acchugowda7767]

Hi please make a vedio on event looping, if you have already made a vedio on this please the link.

[@arijitroy5695]

Could you please make those videos in hindi language. It will be very easy to us. Please please make videos in easy hindi language..

[@evangriffith4121]

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?

[@mr-36]

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 ☺

[@evangriffith4121]

@@mr-36 Ah, thank you!

[@askrshar6154]

kzbin.info/www/bejne/hJzFgJRnd8iApLM

[@pavandhumwad4140]

Polyfill for Promise is much needed video(Not so good content on this topic). Pls make video if possible

[@RoadsideCoder]

Soon

[@ankushladani496]

We want video on prototype also....

[@sriramganesh7239]

Bro, plz tell I want to solve many more problems in javascript based questions....can u tell where I can take

[@DevangPatil]

Can you please make a video on debouncing and throttling?

[@askrshar6154]

Please like subscribe and Share kzbin.info/www/bejne/hJzFgJRnd8iApLM

[@logeesh2009]

Please explain important methods in lodash with polyfills for group by and order by

[@askrshar6154]

Please like subscribe and Share kzbin.info/www/bejne/hJzFgJRnd8iApLM

[@BharathKumar-iq7ku]

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?

[@RoadsideCoder]

Hey, Thank you so much. Sure, I'll make a video on prototypes and other topics too!

[@BharathKumar-iq7ku]

@@RoadsideCoder thanks buddy

[@syednaqvi6572]

23:14 favourite moment 🤣🤣🤣🤣 but yes I was waiting

[@ankushladani496]

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 ?

[@brajagopalmukherjee1588]

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

[@RoadsideCoder]

Bro abhi sunday ko hi to dali hai video 😄

[@brajagopalmukherjee1588]

@@RoadsideCoder ha bhaiya ,btt regular video nhi dal raha ho na islia bola 🥲,like koi courses ....

[@RoadsideCoder]

@@brajagopalmukherjee1588 Ha job ki vjh se time ni mil pata, but I'm trying

[@rajdeepjadav6263]

Please make a complete video on Promises.

[@RoadsideCoder]

Yes soon!

[@sobhanthakur4]

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);

[@pratikjagtap3169]

Same bro i also got the same output

[@dheerajraja9811]

Good explanation, but would be better if you explain them a bit slower :)

[@kinrev6719]

Their is an option in the yt video window -> settings -> playback speed(0 - 2x) you can slow it accordingly.

[@gouravprajapati3270]

When I use bind, along with the output, why am I getting undefined?

[@sunilkumar-zf4dx]

#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

[@mr-36]

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. 😃

[@priyankamahourlife]

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??

[@tangudusrinivasu8855]

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

[@rakshitdevra7060]

Thanks for clearing the doubt

[@Artur-pj2vl]

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

[@RahulKumar-ew1qw]

💓🙏🏻

[@sriramganesh7239]

Bro, certification is necessary to get job

[@shubhamchakraborty7904]

ES6 is the best part

[@ankushladani496]

Can you tell me wHy you have written condition at 23:35 ?

[@nidhisharma9146]

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.

[@tejendrarajawat4054]

All numbers are numbers but 69 is a feeling

[@Aptilover]

😂😂😂

[@ashishchandwani9179]

Can you please make a video on interview questions on "promises" as well.

[@RoadsideCoder]

soon

[@NarendraKumar-vc6yb]

Please explain how can we make custom promise

[@anuragsharma966]

4:40 🤣🤣🤣

[@coder-webdev5907]

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]

[@raj-pl8xz]

This never points to function

[@nirajsali6939]

a video freser ke liye hai

[@RoadsideCoder]

Yes

[@NeerajManoj]

The smile after writing 69 ... hahahaaahhahaaaahahaha

[@aquibmohd]

4:38 69 IQ moves 😂

[@syedeliyaz1993]

Why we wanna pay money for accesing ur videos brother

[@RoadsideCoder]

I didn't understand, when did I ask for money bro?

[@mohitkumbhare1491]

only questions are useful and get more knowledge from anywhere else with these questions , you have not provided any proper explaination here.

[@karthikk1098]

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); } }

[@santhoshkumarzod]

[@premsingh6967]

[@russellh8529]

𝐩𝐫𝐨𝐦𝐨𝐬𝐦