this and bind() in Javascript

*** Previously published at my website

"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 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 of (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 realising about the situation that he's a literal dumb) We need to capture this peak(now taking finger of army chief and pointing it on the point of map) of Mountain XYZ"

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

<img src="http://clipart-library.com/images/piozGxaiE.jpg" width="200">

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 a about Javascript, it's not only object oriented programming language but also a functional programming language which 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 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 as 'person' which has 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, talk function is able to get this.dialogue and hence prints the dialogue, "We the North!"