Programming Tutorial: How the JavaScript Bind Function Works

As you're learning how to code with the JavaScript programming language, sooner or later, you're most likely going to come across the bind function. Now, bind is something that can be a little bit confusing to grasp, especially in the beginning, but what I want to do is I want to be able to simplify it for you, so that you can understand what it does and how it's used in applications.

So what exactly is bind doing? Well, that's what we're going to walk through in this guide, and we're going to take a very straightforward case study approach. So, I'm going to create a couple user objects here. I'm going to say, "CONST userOne," and then inside of here, I'll say this user has a first name of Kristine and a last name of Hudgens, just like this. And I'm going to create another object, just so you can see how this is used with multiple objects. This next one is going to have a first name of Tiffany, just like this. So this is a basic set of JavaScript objects.

So that, if you've never gone through it before, that may seem a little bit odd, but this is a way that JavaScript allows you to connect a function with an object, so instead of having to create a function and pass in arguments, where you would say something like, "fname," and, "lname," for first name and last name, and then calling those inside of it, we're able to actually bypass that process and bind the function directly with the object, and whenever you see the bind function inside of React, or any of the JavaScript frameworks, that's exactly what it's doing.

Now, I want to add one more little caveat here. I'm going to comment this out right here, and let me show you what happens and why we can't use an arrow function. So, if you've seen a lot of arrow functions around, you may be curious on why I didn't use one. I'll copy this, and right here, with fullName, instead of using a function expression, I'm just going to use an arrow function, so I'll say equals, and then an arrow just like this. You can see that now, this is no longer working. We're getting undefined for both of these functions.

Follow me:

Full Guide:

[sammandujano]

payed for a UDEMY course and didn't understand a thing about bind, but with "this"(get the joke?) I got it. thx.

[dcernach]

As usual, one of the best explanations I've heard :) Great work in this video...

[kolyxix]

By far the best explanation. Very precise and striaght to the point. This is job well done.

[bornlove]

Thanks for the video. Very clear. What is the plugin yu are using for doing //? and getting a value?

[SoldierXfreedom]

I'm not really understanding the use factor for this. Why couldn't I just pass an object as one of my arguments for a function and accomplish the same thing without having to bind it.

[bettinimarcelo]

Very clear explanation. Did you do something like this for two way data binding? I'm trying to understand how VUE does the trick.

[hiteshchoudhary]

Great explanation, sir please tell that which debugging plugins are using for direct console.log inside editor and another is undefined direct in side editor???? Please tell

[lcaainvalid]

Great Explanation :)
I just cant comprehend why we would use the bind-function instead of just creating an separate function with parameters and then passing in the values. I guess its just for the sake of variation or making code less confusing sometimes

[solidstatejake]

Thanks a lot, Jordan. You really have to tell people in your Udemy courses about this channel, you're my favorite teacher. I would pay full Udemy price for a "Ruby on Reactive Rails" course! The 9 hours of the angular course just isn't enough.

[klsjdflksjfd]

Thank you very much for the video. Very informative and concise.

[noone-gsoz]

Really helpful, it would have been cool if you would have also explain how to make it work with arrow functions.

[leutrimiTBA]

whats the extension that tells the errors live called? And thanks for the explanation.

[BoredBricks]

So there’s no way to use bind with ES6 functions at all?

[seshankkm]

hi why does es6 arrow function doesnt work foe bind

[JC-fdho]

hey dude how much time do i need to be good at javascript

[zafarhussain]

the same thing we can do with only with function then why bind method .

[denyspavlenko]

Hello! Thank you for your video!
Can you tell me, it is a special plugin for vscode, when you paste //? after function call and then you get the result, or it is just a comment?

[mohammadarslanazhar]

var obj = {
firstname: "Joe",
lastname:"Dan",

getFullName: function(){
var FullName = this.firstname +" "+ this.lastname;
return FullName;
}

}

var name = function(){

console.log("Name: "+ this.getFullName() );

};

var bname = name.bind(obj);

bname();


// I have try this, but i donno y it is not working although its a valid JS code... plz help if anybody could figure it out.

[augustuscaeser]

i appreciate the effort but that was confusing af