this and bind() in Javascript

this and bind() in Javascript

this-and-bind-in-javascript

"When dealing with JavaScript, things can get really confusing specially when you have to deal with Object-Oriented JavaScript (OOP based). Although, in Object-Oriented JavaScript, everything is in a form of functions and objects which is much less complex to understand the language (Really?)".

What is this?

The keyword this in Javascript is being used exactly like the word 'this' in the English Language which means that whenever we are using this somewhere, we are talking about some context.

Let's dig even more by taking reference to (I'll go old school here), the times when there were kingdoms in the whole world and everyone wants to rule each other. A typical conversation at the time of war would be something like:

King: "We need to capture this peak of the mountain (pointing his finger on the map), before 05:00 hrs in order to control our situation better".

Army Chief: " I'm sorry to be so dumb, my king but which peak exactly?"

King: "This peak. (again pointing his finger on the map)"

Army Chief: "But boss, without even knowing any proper context for the peak which you are you talking about, how am I supposed to command my army to take action?"

King: "(After realizing about the situation that he's a literal dumb) We need to capture this peak(now taking the finger of army chief and pointing it on the point of map) of Mountain XYZ"

Army Chief: "I'll command the army right away"

In the above conversation, things got really confusing between two people because both were talking in their own individual contexts which further created confusion.

Similarly, in Javascript as well, things get really confusing when we deal with objects, functions, and this because we often make a mistake in context.

Stuff about Javascript

Here's a thing about Javascript, it's not only an object-oriented programming language but also a functional programming language that makes things much easier for a developer who is writing code in it. Higher-order functions like map(), reduce() and filter() do reduce the pain of manipulating the code with loops and finally the calculation related to the result.

As a matter of fact, Javascript as a whole is more and more about Objects and Functions. No matter whatever we wanna build with it, we need to make use of Objects and Functions.

Using this in Javascript

For Object-Oriented Programming languages, this keyword is one of the most important elements of the language, without it, the language is incomplete.

Let's understand better with some code.

let person = {
  name: 'HODOR',
  dialogue: 'HODOR!',
  talk: function() {
    console.log(this.dialogue)
  },
}

We have an object named 'person' which has a name, dialogue, and talk property. Now let's call it.

person.talk() // "HODOR!"

That's what was expected. Right? Now, let's call it in a different fashion.

let talkFunction = person.talk
talkFunction() // undefined

Yikes! This is what is happening over here.

When we are declaring variable talkFunction, it's no longer a method but rather a function. But again, why does it give undefined? It's because,

this keyword refers to the context where it is called and NOT where it is assigned.

So what do we do to use that talkFunction?

Here, bind() comes in action. A bind() is responsible for attaching an object to a function by which it has been called.

Let's take a look at the code again,

let person = {
  name: 'Jon Snow',
  dialogue: 'We the North!',
  talk: function() {
    console.log(this.dialogue)
  },
}

let talkFunction = person.talk
let bindedFunction = talkFunction.bind(person)
bindedFunction() // "We the North!"

Here, bind() attaches the 'person' object to talkFunction and therefore, the talk function is able to get this.dialogue and hence prints the dialogue, "We the North!"