JS Function Methods call( ), apply( ), and bind( )

No video

JS Function Methods call( ), apply( ), and bind( )

Рет қаралды 38,268

Күн бұрын

Functions all share three methods - call( ), apply( ), and bind( ).
These methods let you call functions while letting you specify the context for calling the function. This lets you define what the "this" keyword will represent.
call( ) and apply( ) let you pass in parameters to the functions when you call them too.
bind( ) will let you set the context, pass in parameters, and return a copy of the function with the context and those values saved to be used later.
Code GIST: gist.github.co...

Пікірлер: 95

@weronikadabrowska2829 5 жыл бұрын

in that calming voice even javascript doesn't make blood boil

@jd.8019 4 жыл бұрын

I must say, you are a very good communicator. One of the most clear and concise explanations, in addition to your examples, I have seen. Thank you!

@captainalpha4853 5 жыл бұрын

Man, my life is useless without your courses! Thank you!

@mrSargi7 3 жыл бұрын

hurt my brain reading complicated articles with no results, thanks for this awesome explanation!

@qasimarthuna9254 4 жыл бұрын

I always look for your green thumbnail in my KZfaq search. And if I find I just don't even read your title and give it a shot. Because you are awesome and whatever knowledge you give, I want everything. Love you ❤️ from 🇮🇳

@6rs7rd7ts3 3 жыл бұрын

XD, it funny because i do search the green thumbnail and with out thinking i click the video

@pattyboi55 5 жыл бұрын

Steve any time I get stuck on something I look you up to explain it. You are great!

@xeonace 3 жыл бұрын

one of the best teachers about javascript on youtube

@rotrose7531 4 жыл бұрын

Every tutorial from you is GOLD, thank you.

@ShreyasKumar 3 жыл бұрын

Finally I binded myself to You.. Awesome teaching. Thank you.

@shrikantg3860 2 жыл бұрын

Perfect. to understand call apply and bind thanks for sharing

@jrs_devs 2 жыл бұрын

Every time I need to properly learn some base functionality of javascript, there's one of your videos about the topic ❤❤

@umarspi 4 жыл бұрын

after many tutorials, i got a clear vision here. awesome approach brother. thanks a lot

@anokhps3088 2 жыл бұрын

Its very clear,you are an amazing teacher is what all i have to say!Thank you.

@navidansari1895 6 жыл бұрын

this is the best and very clear explaination to these fucntions till date...

@SteveGriffith-Prof3ssorSt3v3 6 жыл бұрын

Thanks! If you found it useful please share. :)

@6rs7rd7ts3 3 жыл бұрын

Always great content, easy to understand and a calming voice.

@NeilMyatt 5 жыл бұрын

7:20 cat falls off wardrobe, no-one notices :-)

@SteveGriffith-Prof3ssorSt3v3 5 жыл бұрын

Cat "falls" off wardrobe...

@ericalexander3816 4 жыл бұрын

This is the first time I've watched your video and know nothing about you. But I know that you are Canadian :).

@persiansayed 4 жыл бұрын

Great, concise and simple explanation. I was reading lodash's implementation of "once" method. It calls "before" method in its body and there they have used "apply" to call the given function. Thank you, I was able to understand it after watching this video.

@SteveGriffith-Prof3ssorSt3v3 4 жыл бұрын

You may also be interested in this - kzfaq.info/get/bejne/gJZmiN1o0pOunmw.html It is the vanilla JS implementation of once, in the browser.

@persiansayed 4 жыл бұрын

@@SteveGriffith-Prof3ssorSt3v3 Thanks, it's quite helpful. I really like the way you explain in-depth and core concepts in your videos, it's quite hard to find such type of videos nowadays.

@SuperLukiano 5 жыл бұрын

Lost you on bind although I was already familiar with that function and I use it. You make it to complex for no reason. I was here for the call and apply and i got that one, thanks.

@kmchow4971 2 жыл бұрын

I think you just saved me from the official document hell.

@Dorff_Meister 3 жыл бұрын

Fantastic explanations. I do believe my new knowledge will help me solve my current problem. Thanks!

@EconomicsDomain 7 ай бұрын

Love the sound effects ;)

@huseynfy 2 жыл бұрын

Thanks man! Worth to watch.

@user-zn2gn7pn1i 5 жыл бұрын

7:19 I accidentally stepped on my cat's tail, I apologize :)))

@genadi2850 2 жыл бұрын

Very good explanation!

@walterokpala1229 Жыл бұрын

Best explanation seen !!!!

@chesterxp508 2 жыл бұрын

Another very cool tutorial !!!

@Thommyaso Ай бұрын

awesome explanation, thanks

@code-to-design 6 жыл бұрын

this one is my fifth, and i finally got it. amazing!

@stunningmesh6263 6 жыл бұрын

You are awesome please keep updating us with your knowledge

@Snoo29293 3 жыл бұрын

I didn't really understand why we needed to use call for the method example, doing this would work too: function bob(name, age){...} let obj = { method(fn, n, a){ fn(n, a); } } obj.method(bob, "Jack", 16)

@SteveGriffith-Prof3ssorSt3v3 3 жыл бұрын

most of the time it is used for delegation. The first parameter in call( ) apply( ) or bind( ) is what you want to use as `this`. You get to change the context for calling your method and do it with a single line of code. There are always alternative ways of doing pretty much anything in JavaScript. It is about understanding how all the tools work so you can use the best one for your current situation.

@Coxander 5 жыл бұрын

Best explanation that I have found . Thank you a lot! One question, have you considered creating a full JS course with projects and exercises? I would gladly pay for something like that. Tnx

@SteveGriffith-Prof3ssorSt3v3 5 жыл бұрын

Thanks. It's what I do full-time as my job, teaching web development. I have given lots of thought to creating a course on one of the many platforms like Udemy. I have been approached by a number of schools and publishers to do this too. It's just hard to find the time on top of my full time work and keeping up this channel. Sharing my channel with more people does help me though, so please share it.

@Coxander 5 жыл бұрын

@@SteveGriffith-Prof3ssorSt3v3 I have already recommended your YT channel on Reddit, and I will keep doing it in the future. I have learned a lot from you! I understand that you don't have enough time , but you are a great teacher and If you decide to create a course on Udemy I will support it 100%. Big thank you!

@mirzacerim6599 4 жыл бұрын

@@SteveGriffith-Prof3ssorSt3v3 Just came here to say, you make a course on js, i buy it right away on udemy. Even if i would by that time get to a point where i dont need it, i would still buy it. Not just js, whatever web dev related you make.

@mrcoder7327 5 жыл бұрын

This video really helped me improve my developing skills! Thanks

@namlevan2929 4 жыл бұрын

i 'm a little confused about these method. thank you so much i'm just subscribing your channel

@jalalbmnf Жыл бұрын

Hi. Thank you, it is a great content

@feroz1212011 4 жыл бұрын

Wow...great explanation, thanks.

@jiteshnarula9257 4 жыл бұрын

Very nicely explained! Thank you very much :)

@nasarshaik5207 4 жыл бұрын

sincerely thankyou so much sir..!

@twerner5496 3 жыл бұрын

It finally makes sense, thanks much

@piegpa Жыл бұрын

Excellent!

@gtsin 3 жыл бұрын

This is so complicated. Is there a better way than using call, apply, bind methods in 2021?

@SteveGriffith-Prof3ssorSt3v3 3 жыл бұрын

This is core functionality. Still in 2021.

@MeshTheSnake 4 жыл бұрын

amazing explanation, thank you!

@codea8901 2 жыл бұрын

Amazing tutorial once again Steve! One question I have is that in the bob function you have a return true statement at the end and wondered what's the purpose of that please? Many thanks.

@SteveGriffith-Prof3ssorSt3v3 2 жыл бұрын

Just to illustrate that when you use bind you get back a copy of the function, not the true.

@codea8901 2 жыл бұрын

@@SteveGriffith-Prof3ssorSt3v3 Thank you.

@RedEyedJedi 5 жыл бұрын

Absolutely awesome tutorial, thank you Steve. Your videos are extremely helpful.

@Jacobl119 2 жыл бұрын

Thank you!

@mrlectus 11 ай бұрын

Wish there was a real world practical example

@shubhsagar6234 4 жыл бұрын

Sir, I expected when Bob was called inside the bill object then the value of 'this' should be object bill not the window object...

@shubhsagar6234 4 жыл бұрын

I got it after the full video... Thanks... Yo

@ravithakor6238 5 жыл бұрын

easiest explanation nice

@noonecares6816 Жыл бұрын

Sorry where did we get fn() function inside the method?

@SteveGriffith-Prof3ssorSt3v3 Жыл бұрын

When we call bill.myMethod( bob ) we are passing in bob, which is a function. So, inside the bill object... bill = { ... myMethod: function (fn) { //fn is the function bob that we passed in } }

@kurdactivitie4533 5 жыл бұрын

good job man, keep up.

@ahmadmohamad8416 2 жыл бұрын

thank you

@jasbindarsingh1640 4 жыл бұрын

hey Steve, great video understood the working of call, apply, and bind, but can you state where I could use it and why, why do we pass a context to a function when it is doing the same thing.

@SteveGriffith-Prof3ssorSt3v3 4 жыл бұрын

When you need to create a closure around a value that will be used in the function when it gets called or when you need to change the context in which the function will run. Not something that you need to worry about until those other concepts make sense and you realize that you need them.

@jasbindarsingh1640 4 жыл бұрын

@@SteveGriffith-Prof3ssorSt3v3 thanks Steve, btw I am seeing a lot of things in JS revolve around closures.

@SteveGriffith-Prof3ssorSt3v3 4 жыл бұрын

@@jasbindarsingh1640 Closures are definitely a core feature in JS in how scope is handled.

@genovo Жыл бұрын

Apply is Array, Call is Comma, Bind is 'BloBject'. Dumb. I know, like a Blontext.

@RedEyedJedi 5 жыл бұрын

One question though Steve. If, fn.apply(bill, [n, s]); does exactly the same thing as fn.call(bill, n, s); why would you choose the version with 3 extra characters? Are you some sort of secret keyboard torturer? haha

@SteveGriffith-Prof3ssorSt3v3 5 жыл бұрын

Sometimes you will have a single variable which is an array. Other times you will have several variables. Choose the version that works for your circumstances.

@RedEyedJedi 5 жыл бұрын

@@SteveGriffith-Prof3ssorSt3v3 So the only difference between call and apply, is the parameters it takes?

@SteveGriffith-Prof3ssorSt3v3 5 жыл бұрын

@@RedEyedJedi yep

@RedEyedJedi 5 жыл бұрын

@@SteveGriffith-Prof3ssorSt3v3 Thanks Steve, I appreciate you taking your time to respond.

@donfully 5 жыл бұрын

Thank you sir

@orangelimesky 2 ай бұрын

David Attenborough of JavaScript YT Videos

@sol0matrix 6 жыл бұрын

Excellent

@sergeymigel4680 4 жыл бұрын

big thanks!

@yoelmarquez5029 3 жыл бұрын

Still a bit confusing but this helped

@aba3722 3 жыл бұрын

영어 모르는 한국인을 울고갑니다

@SteveGriffith-Prof3ssorSt3v3 3 жыл бұрын

:) And I wish my Korean was better so I didn't have to use Google Translate to read your comment.

@shrestha0144 2 жыл бұрын

7:20 was that a cat ?

@SteveGriffith-Prof3ssorSt3v3 2 жыл бұрын

Very probably.

@kulbhushandhongade382 4 жыл бұрын

where you are going man its not good

@hamidRaven13 Жыл бұрын

this keyword this was quite confusing

@SteveGriffith-Prof3ssorSt3v3 Жыл бұрын

kzfaq.info/get/bejne/m710i8qkrs24d58.html

@SanjarKodirov-ww3le 2 жыл бұрын

Hi i really love your lessons. But thins mouse voice is soo annoying can you fix this please ))))

@SteveGriffith-Prof3ssorSt3v3 2 жыл бұрын

I did years ago.

@williamjamesrapp7356 4 жыл бұрын

Sorry but it seems that all people who are smart at coding know little to nothing about TEACHING.

@SteveGriffith-Prof3ssorSt3v3 4 жыл бұрын

Are you referring to me? Or am I not understanding what you are trying to say? Because I have been an award winning professor for nearly 20 years. There is also a difference between explaining a method or concept and a tutorial that explains the exact solution to a problem that someone is having.

@williamjamesrapp7356 4 жыл бұрын

@@SteveGriffith-Prof3ssorSt3v3 I apologize. My own frustrations and inadequacies in learning I have spoken out of turn. Obviously your courses or examples here are not intended for people trying to learn JS but for people who already know JS and you are, giving examples of what ever this is. I am looking for something more along the beginners side of teaching CALL's are, you know someone who is trying to learn how to implement this in a real world situation and without context, like your example, to me this might as well be Chinese spoke by a Greek Professor to a class room full of Mexicans. It means nothing to me and there in lies my frustrations and I apologize if my comment , as smart and as award winning as you may be, has offended you. I have become comfortable with HTML, CSS, PHP, SQL, but as many hours of JS as I have watched it is abstract information to me without anyone ever using it in context to a WEB SITE or how to actually implement this in a web site. THAT IS MY ISSUE and NOT YOURS and I again apologize for offending you. But if this is how you TEACH I would not want to take one of your classes.

@SteveGriffith-Prof3ssorSt3v3 4 жыл бұрын

No offence taken. JavaScript is a huge topic. There is some that applies directly to the browser and some other things that have nothing to do with the browser. This topic is one that I teach my students after about 3 - 4 months worth of prior JS training. It's not a topic that is necessarily directly applicable to a web site. I have a playlist called JS from the Start. This list is about the topics that are just JS programming topics, not things that need a browser. I have another big playlist that is called JS in the Browser. That list is about scripting things for a website. I have lots of other smaller playlists about specific topics like loops, functions, arrays, AJAX, HTML5 APIs, etc. those lists have a mixture of things that are browser dependent and things that have nothing to do with websites, they are just programming concepts. The programming concepts are about learning the tools of the language. Once you know enough tools then you can start to use combinations of those tools to solve problems. If you are looking for website specific stuff, since you already have some programming experience with PHP, I would recommend that you look through the JS in the Browser and the HTML5 APIs playlists. Those sound more like what you are looking for.

@williamjamesrapp7356 4 жыл бұрын

@@SteveGriffith-Prof3ssorSt3v3 Thank you for your time and response. Have a fantastic weekend.