No video

JavaScript Practical Applications of Call, Apply and Bind functions

  Рет қаралды 67,166

techsith

techsith

Күн бұрын

Utility of Call, Apply and Bind Methods, where and how to use them.
call() apply() and Bind() can be used in react angular or vuejs.
#JavaScript #bind #callapplybind
*My Udemy Courses
www.udemy.com/...
www.udemy.com/...
Follow me for technology updates
* / techsith
* / techsith
* / techsith1
* / 13677140
* / patelhemil
Help me translate this video.
* www.youtube.co...
Note: use translate.goog... to translate this video to your language. Let me know once you do that so i can give you credit. Thank you in advance.

Пікірлер: 118
@bot_matrix
@bot_matrix 5 жыл бұрын
Thank you sir! Compared to other KZfaq instructors, you are calm, collected and make everything easy to digest. You get a like from me!
@Techsithtube
@Techsithtube 5 жыл бұрын
Thanks for the very very positive comment. :) Keep on learning!
@DanielDogeanu
@DanielDogeanu 5 жыл бұрын
I was asked exactly this at the interview, today. I had no idea what they did. Now I know. Thanks!
@Techsithtube
@Techsithtube 5 жыл бұрын
Its good that you know now. :) You will be prepared for the next interview.
@haseebshahid5148
@haseebshahid5148 5 жыл бұрын
that = this ---- The classic arrow functions solved that ugly design pattern. great video!
@juancarlosfigueroa617
@juancarlosfigueroa617 5 жыл бұрын
That's the thing i was going to mention with arrow functions you also don't need to use bind since the arrow functions keep the scope open to the father scope
@veronicaeulenberg6612
@veronicaeulenberg6612 5 жыл бұрын
"Binding outer this to inner this." That's a pretty good explanation for binding this.
@Techsithtube
@Techsithtube 5 жыл бұрын
Veronica, thanks for watching!
@SoccerChannelviews
@SoccerChannelviews 6 жыл бұрын
great sir! keep going, this the real thing... supporting you till you get success, just keep making these awesome videos up
@Techsithtube
@Techsithtube 6 жыл бұрын
Thanks for all the support and thanks for watching! :)
@javascript_developer
@javascript_developer 6 жыл бұрын
Its very clear for call and apply. For bind I am very confused. Will do more exercise.
@Techsithtube
@Techsithtube 6 жыл бұрын
think of call and apply as renting tempararily . And bind is more like making it own.
@miroslavspirkoski5623
@miroslavspirkoski5623 5 жыл бұрын
Thanks for these amazing Javascript series, these series are a real lifesaver!
@aditibhatia100
@aditibhatia100 6 жыл бұрын
Amazing video, clears all the doubts in a very simple manner
@javascript_developer
@javascript_developer 3 жыл бұрын
thank you for the awesome. you make javascript understand very easy.
@yuvisaran
@yuvisaran 5 жыл бұрын
Great and simple explanation thank you so much
@Techsithtube
@Techsithtube 5 жыл бұрын
Thanks for watching Yuvisaran.
@binayakgshankar9188
@binayakgshankar9188 6 жыл бұрын
Watched more than 10 videos on the same, but this one cleared my concepts
@Techsithtube
@Techsithtube 6 жыл бұрын
Binayak, I am gald that you got the concept. Thanks for watching! :)
@soumyaranjanpanda7532
@soumyaranjanpanda7532 9 ай бұрын
Helpful video
@riccarrasquilla379
@riccarrasquilla379 10 ай бұрын
good tips. thx
@pratikfulkar4335
@pratikfulkar4335 3 жыл бұрын
great work
@SKU009
@SKU009 6 жыл бұрын
Must watch video, if anybody want to understand call, bind and apply.
@Techsithtube
@Techsithtube 6 жыл бұрын
Thanks for watching!
@kakmca
@kakmca 4 жыл бұрын
Nearly 3 years before I saw his video related to Angular Testing. I was so impressed, I liked his teaching very much. I became his fan. After 3 years, today I found this video of him. Sorry sir, but this comment's targeted to you. You please speak with your slang sir, don't try to create new slang.
@patrickdooley4031
@patrickdooley4031 4 жыл бұрын
Thanks TechSith. Great Explanation!
@joseigor8556
@joseigor8556 5 жыл бұрын
Sir, your tutorials are amazing!
@igorcweb
@igorcweb 6 жыл бұрын
This is gold!
@Welcometomyjourney20
@Welcometomyjourney20 6 жыл бұрын
Very helpful. Thanks. I think instead of using call/apply, better & shorter now to use es6 spread operator, to copy functionality from obj to obj. Commonly used in react now. Example: function doSomething (x,y,z){ } let args = [a,b,c] doSomething(...args)
@sirishaepari8938
@sirishaepari8938 4 жыл бұрын
@techsith Could also help us clear the difference between call, apply, bind vs prototype vs __proto__ ? As a developer, when/how should you use what?
@prerakdoshi3509
@prerakdoshi3509 6 жыл бұрын
Very Helpful. Thank you Sir
@Techsithtube
@Techsithtube 6 жыл бұрын
Thanks for watching!
@rampande5830
@rampande5830 5 жыл бұрын
thank you for sharing valuable knowledge.
@nagaprasad681
@nagaprasad681 6 жыл бұрын
you big bro your tutorials are rocking !! Respect !!
@MainDol1
@MainDol1 6 жыл бұрын
Very nicely explained!
@Techsithtube
@Techsithtube 6 жыл бұрын
Thanks for watching! :)
@vinodbhatt3789
@vinodbhatt3789 5 жыл бұрын
Very useful..
@vincesanchez7790
@vincesanchez7790 4 жыл бұрын
Great tutorial
@Techsithtube
@Techsithtube 4 жыл бұрын
Thank you! Cheers!
@olajumokeboladale-lawal8688
@olajumokeboladale-lawal8688 3 жыл бұрын
To turn the argument into an array, we could also do make the argument a spread operator when passing it into the function then convert it into an array by saying: Let arrArgs; Let argsToArray= function(){ return arrArgs=[...arguments]; }; Right? And then calling the function argsToArray(1,2,3) should console[1,2,3]?
@Techsithtube
@Techsithtube 3 жыл бұрын
Yep that would work .
@RethinkingUI
@RethinkingUI 5 жыл бұрын
worth watching it .
@ManontheBroadcast
@ManontheBroadcast 6 жыл бұрын
Could we also use Array.from() to turn the arguments object into an array? ...
@Techsithtube
@Techsithtube 6 жыл бұрын
yes that should also give the same result.
@sergeymigel4680
@sergeymigel4680 4 жыл бұрын
thank you
@seolead5826
@seolead5826 5 жыл бұрын
At 7:03 you had me laugh, great examples thanks
@Techsithtube
@Techsithtube 5 жыл бұрын
I am glad that you found it funny. thanks for watching! :)
@dmytro891
@dmytro891 6 жыл бұрын
Great video, thank you!
@ajoco99
@ajoco99 4 жыл бұрын
Nice tuto.thanks
@hkn1853
@hkn1853 6 жыл бұрын
excellent video god bless you
@osazemeusen1091
@osazemeusen1091 6 жыл бұрын
This is better than any paid tutorial I have gone through. Thanks why didn't you pass the "this" keyword into [].slice.call(arguments)? Observation: Math.min(...numArray) could also be substituted inplace of Math.min.apply(null, numArray)
@Techsithtube
@Techsithtube 6 жыл бұрын
[].slice.call(arguments) just slices the argument object to an array. so there is not need to pass 'this' here.
@shivangjoshi4233
@shivangjoshi4233 3 жыл бұрын
You can do Math.min(...numArray); to get same results as apply method
@dhimanchakraborty5639
@dhimanchakraborty5639 4 жыл бұрын
Sir, one confusion I have. When I am declaring a function like const fn = function(something) {} and call it with an object, javascript call function works, but when I try the same with arrow functions like const fn = something => {}, it doesn't work. I tried to print "this" in console with console.dir(this), and I got the object and window object for the two cases respectively. Please let me know why this thing is happening? Sir, your videos cleared many painful areas in JavaScript. Thank you so much.
@srihitha4721
@srihitha4721 4 жыл бұрын
Sir, I have a same scenario, and want to unit test lion class. Problem is cat calls a function of mamal which returns a promise. How do I unit test this scenario from lion class.
@soumitragiri1353
@soumitragiri1353 4 жыл бұрын
all the concept is going to clear, but where should i will be use bind(). for me , bind has not clear. could you please elborate why new button object is loosely couple bonding with prototype?
@aumgnfeig9367
@aumgnfeig9367 4 жыл бұрын
How are you defining "that" in the render function without using var, let or const?
@taruchumccullough9045
@taruchumccullough9045 4 жыл бұрын
Thank you !!
@frizm1543
@frizm1543 3 жыл бұрын
Any idea why the first apply example doesn't work with arrow functions?
@2002utube
@2002utube 5 жыл бұрын
I am not sure where I am in my JavaScript learning journey..suppose I practiced all these 52 Videos of advanced JavaScript and thoroughly understood the concepts all these 52 Videos where do I stand in my JavaScript journey...what should I do further to reinforce my learning of JavaScript so as to reach to an expert level?
@Techsithtube
@Techsithtube 5 жыл бұрын
I would suggest using those concepts after learning them . Either create your own tiny JS library. or use react where you can use your JS experience. With JS if you don't use it you lose it.
@vickyjain7110
@vickyjain7110 6 жыл бұрын
Please try to provide links to which u refer in ur video... In this video u said u ll provide template string tutorial link 10:23 .. which u haven't provided.. Thanks
@aswebdev
@aswebdev 6 жыл бұрын
Is it correct to say that the spread operator (...) has reduced a lot of the complexity that was brought about by call/apply/bind ? For e.g. We can do min like this using spread operator in es6 :- Math.min(...numArray);
@Techsithtube
@Techsithtube 6 жыл бұрын
yep, spread operators have some really good use. and it has simplify lots of complex things.
@kenosyt3697
@kenosyt3697 4 жыл бұрын
Why when you call the mammal constructor you use this and legs and not only legs????????
@abinayahui1905
@abinayahui1905 6 жыл бұрын
Great
@ruchirai5775
@ruchirai5775 5 жыл бұрын
At 13.54 I can even use arrow function to get this context ? We don't need to use bind isn't it ?
@Techsithtube
@Techsithtube 5 жыл бұрын
Yes ruchi, you can use arrow function there.
@saransh9306
@saransh9306 6 жыл бұрын
You said we can use call/apply when we want to borrow functionality from another objects...But Why would you use call or apply to borrow functionality from other objects when you can just simply do obj.FunctionName() inside another object to borrow functionality from other object? Example: var obj = new function(){ this.prop = 'inside obj'; this.Add = function(a,b) {return a+b}; this.getinfo = function(){console.log('inside getinfo of obj object')}; } var anotherObject = new function(){ this.getaddition = function(a,b){ return obj.Add(a,b) }; //borrowed functonality from obj without using bind. } what would be the use case in above example where using call/apply/bind is a must ??
@Techsithtube
@Techsithtube 6 жыл бұрын
in your example the function that you are tying to call doesnt have 'this' so it would work . if you want to use one objects method on another object you have to call the new objects 'this' ..
@saransh9306
@saransh9306 6 жыл бұрын
Thank you for clearing the doubt here..
@fatimahal-khateeb4627
@fatimahal-khateeb4627 4 жыл бұрын
why click loosely bounded to new object? 10:56
@believelody5531
@believelody5531 6 жыл бұрын
About "bind", in myObj object I did render() { this.asyncGet(this.parse); } and it works. So why using bind? Thanks for your great tutorial
@Techsithtube
@Techsithtube 6 жыл бұрын
what is asyncGet?
@madhanj5036
@madhanj5036 4 жыл бұрын
With New ES 6 feature, to find out the Minimum value from array use REST operator let myarr= [1,2,3]; console.log(Math.min(...myarr)); Its just FYI for all
@dheerpandey
@dheerpandey 6 жыл бұрын
Hi Techsith, I am getting "add clicked", when I calling "newButton.click();", how it is different from let looseClick = newButton.click; looseClick(); Running above code in chrome, also when I am executing the code in node console, getting exception i.e. => TypeError: Cannot read property 'content' of undefined. Why this is happening, please clarify.
@Techsithtube
@Techsithtube 6 жыл бұрын
looseClick is not part of the object anymore and not bound to the button so it wont work . And newButton.click() is part of the object . I am not sure why its not working in node. Try to debug in node.
@nafeesahmed4942
@nafeesahmed4942 6 жыл бұрын
I was hoping you will continue with angular 4.0,
@Techsithtube
@Techsithtube 6 жыл бұрын
I am still continuing with Angular tutorials . I will also release on other topics as well.
@GabrielVasile
@GabrielVasile 5 жыл бұрын
Easier in ES6 with the spread/rest operator function argsToArray(...args) { console.log(args); } and Math.min(...numArray)
@maskman4821
@maskman4821 6 жыл бұрын
what do you mean by translate your video to other language? like I translate what you said in this video to chinese and send to you, and you will put chinese subtitle as an option in the video???
@Techsithtube
@Techsithtube 6 жыл бұрын
I am not sure for how to do it for Chinese but youtube provides a link for translation of each video . here is a link for this video. kzfaq.info_video?ref=share&v=AYVYxezrMWA
@otaviomota6122
@otaviomota6122 5 жыл бұрын
i spend 1 hour to realize that these functions don't work using arrow function. Or i did wrong ? Do you have any tips that helps me to know when use i have to use arrow function and "normal function" ?
@Techsithtube
@Techsithtube 5 жыл бұрын
think of arrow functions pure functions that don't have its own this. so if you want to use this inside your function, don't use arrow function. I have a video on arrow function where I explain it.
@sushmithareddy4722
@sushmithareddy4722 6 жыл бұрын
Very difficult to understand. Please maybe make another video.
@kavind8938
@kavind8938 6 жыл бұрын
But Dude the below code works fine.. Is this because i am not using "let" .. can u explain plz var test=function (name){ this.name=name; } test.prototype.click=function(){ console.log("===>"+this.name+" clicked"); } var b=new test('tesing'); b.click();
@Techsithtube
@Techsithtube 6 жыл бұрын
there shouldnt be any problem with let etither. the example you sent would work in any case . now you can do this and see if it works. this were you have to rebind the method back to the object. var test=function (name){ this.name=name; } test.prototype.click=function(){ console.log("===>"+this.name+" clicked"); } var b=new test('tesing'); var bc = b.click; bc();
@kavind8938
@kavind8938 6 жыл бұрын
Practical Applications for PROMISE plzzzz
@jainshilpi3
@jainshilpi3 6 жыл бұрын
I am not that much clear with call,for call we are passing obj n value I donot understand this line mammal.call(this,legs) could u pls explain?
@Techsithtube
@Techsithtube 6 жыл бұрын
mammal is a constructor but also a function that sets some property with this.legs = legs; and when you call from another function mammal.call(this,legs) which means you are calling mammal function on using this of which ever function calling it from. for more info on that you can refer to this playlist kzfaq.info/sun/PL7pEw9n3GkoW0ceMeoycg9D00YjPAbtvt
@AkhiVlogsandtalks
@AkhiVlogsandtalks 5 жыл бұрын
Hi sir , I want to translate into Telugu ,pls provide the link
@TropicalTaquito
@TropicalTaquito 6 жыл бұрын
I’m trying to understand bind but I still don’t get it :l
@elfpimp1
@elfpimp1 6 жыл бұрын
Btw, subbed!
@elfpimp1
@elfpimp1 6 жыл бұрын
Hehehe, I keep refactoring your functions to fat arrow as you type them unless they're not refactorable!! :0)
@mr.techno-era7474
@mr.techno-era7474 3 жыл бұрын
@3:55 Javascript - weird language
@saransh9306
@saransh9306 6 жыл бұрын
didn't get how legs property became part of cat by calling mammal.call(this,legs) ? can you please explain the logic behind it?
@Techsithtube
@Techsithtube 6 жыл бұрын
mammal is a function that does "this.legs = legs" so if i call it inside the cat. its like cat.legs = legs. becase 'this' inside cat is actually cat. make sense?.
@saransh9306
@saransh9306 6 жыл бұрын
Yes it does make sense..Thank you:)
@jsnode2075
@jsnode2075 6 жыл бұрын
is there any upcoming React Series?
@Techsithtube
@Techsithtube 6 жыл бұрын
yes, I am going to start releasing by next week. Let me know if you have specific topics that you want to me to cover. Thanks for watching!
@abhayagarwal5097
@abhayagarwal5097 4 жыл бұрын
After 5mins I felt like I was lost in desert , didn't understand this cat example at all😑
@kiransahu157
@kiransahu157 5 жыл бұрын
Please don't use reserved key words for variable or function
@Techsithtube
@Techsithtube 5 жыл бұрын
I wonder which reserve keyword I used?
@kiransahu157
@kiransahu157 5 жыл бұрын
​@@Techsithtube you are doing a great job, Sir. Started watching all of your JS videos. All are awesome. But while understanding, getting confusions like button.prototype.'click ', after few min, I realize 'click ' is just a prototype property of the button. But i'm ok now. Thanks for the response. :p
@PierreSoubourou
@PierreSoubourou 3 жыл бұрын
It's hard for me to perceive real world usage each time
@Techsithtube
@Techsithtube 3 жыл бұрын
It is hard often times to times visualize application of such concepts. But, its heavely used in large projects.
@phanindrakumarpulletikurti
@phanindrakumarpulletikurti 6 жыл бұрын
Do you stopped angular4
@Techsithtube
@Techsithtube 6 жыл бұрын
I am still continuing with Angular tutorials . I will also release on other topics as well.
@phanindrakumarpulletikurti
@phanindrakumarpulletikurti 6 жыл бұрын
techsith ok
@Atif1702
@Atif1702 6 жыл бұрын
Who the hell are dislikers? what the heck you want more?
@rikilamadrid
@rikilamadrid 6 жыл бұрын
Honest question, why in most of the videos your sentences are cut off?
@Techsithtube
@Techsithtube 6 жыл бұрын
I try to cut the dead space between sentences. and unfortunately the editor i am using to do that doesn't have the refined tool so its usually half a second off .
@greensmarketingsolutions5
@greensmarketingsolutions5 6 жыл бұрын
Bind is so confusing
@idontknownoori500
@idontknownoori500 4 жыл бұрын
Stop comming in my youtube 😵
@hemalpatel19
@hemalpatel19 6 жыл бұрын
Very nicely explained!
@Techsithtube
@Techsithtube 6 жыл бұрын
Thanks for watching!
Magic? 😨
00:14
Andrey Grechka
Рет қаралды 20 МЛН
SPILLED CHOCKY MILK PRANK ON BROTHER 😂 #shorts
00:12
Savage Vlogs
Рет қаралды 50 МЛН
Incredible Dog Rescues Kittens from Bus - Inspiring Story #shorts
00:18
Fabiosa Best Lifehacks
Рет қаралды 28 МЛН
Gli occhiali da sole non mi hanno coperto! 😎
00:13
Senza Limiti
Рет қаралды 22 МЛН
Async Await JavaScript ES7
26:39
techsith
Рет қаралды 120 М.
javaScript Method chaining tutorial ( function chaining)
12:18
Javascript Closure tutorial ( Closures Explained )
12:52
techsith
Рет қаралды 543 М.
ES2022
15:12
techsith
Рет қаралды 17 М.
JavaScript call, apply and bind methods | JavaScript Tutorials
19:10
Visually Understanding JavaScript Prototypes
14:58
Steve Griffith - Prof3ssorSt3v3
Рет қаралды 53 М.
JavaScript call(), bind() and apply()
21:49
procademy
Рет қаралды 1,2 М.
Magic? 😨
00:14
Andrey Grechka
Рет қаралды 20 МЛН