The meaning of ‘this’

In JavaScript, just like in real life, context is everything. 
And, just like in other programming languages,
 JavaScript has a special keyword to give access to a specific context.

The this keyword can be used to access values, methods,
 
and other objects on a context specific basis.
 
Meaning, this changes based on where it is used.
 
That is what makes this so powerful and
 it’s also what makes it such a huge headache to understand.

Let’s check out how the this keyword can be
 
used to do some pretty dynamic and cool things.

The JavaScript interpreter assigns a value to this based on where it appears.
 
There are four main ways that this takes a value.
 
The first is where it is used within a function.
 
Another, when methods of objects use this.
 
And, when a constructor is used to
 
create a new instance of a prototype.
 
The other way is within functions that are invoked using the .call,
 
.apply, or bind methods.
 I am not going to expound on the last way for using this but instead I will give some examples of the first three in action.

First, let’s look at how this works in a normal function call.

In this example, I have a function called printName.

var printName = function(name) {
  console.log("The name " + name + " was printed");
  console.log(this);
} 

printName("Gustavo"); // The name Gustavo was printed
                      // Window

I can run it in my browser by clicking the preview button.
 
And I can see what happens when I open the developer tools.
 
I can see that the script logged two things, the "The name Gustavo was printed" string, and
 
this, which is the window object in the context of a normal function.
 When you call a function in this way, this is going to be the global context.
 
In a browser, it’s the window object.

The second way that you can use
 
this is within in a method on an object.

It’s also one of the most powerful ways that this can be used.
 
Here, I have an object called Airplane.

var Airplane = {
 seats: 120,
 cabinCrew: 5,
 passengers: 100,
 logNumberofPassengers: function(){
   console.log("There are " + this.passengers + " passengers on this place"
  }
}

Airplane.logNumberofPassengers(); // 100

I’ve given Airplane some values,

as well as verbose method called LogNumberOfPassengers.
 In this method, as you might have guessed, is supposed to log the number of passengers.
 
And right here, we see the this keyword.
When the LogNumberOfPassengers property is called it logs 100
 as the number of passengers in the airplane. That’s because this, when it’s being called by a method on an object,
 
will always reference the object itself.
 
And of course, this dot any key is going to look up the value, if it exists.
 In this case, passengers exists, and the value is 100.

Now, let’s talk about one more way to use this.
When we use a constructor function to create a new object, this will actually
refer to the object that is created, not the constructor function.
 It’s also the most powerful.
 And, here’s a basic constructor function, for city.

var city = function(name, state) {
    this.name =  name || "New York City",
    this.state = state || "New York",
    this.printCityAndState = function(){ return console.log(this.name + " is in " + this.state) }
}

var newYork = new city();
var trenton = new city("Trenton", "New Jersey");

This constructor function takes two parameters, a name and a state parameter.
 
This logic here is saying, the instance dot name value,
 
will either be the name parameter that was passed in here.
 
Or, it’ll default to New York City,
 
if name wasn’t defined, or is faulty.

And the same thing for this dot state.
It’ll either correspond to the state parameter, or it’ll default to New York.
There are two objects.
 The first object is the one we created without any parameters, so
 it defaulted to our defaults New York City and New York.
And, the second one uses Trenton and New Jersey as parameters.
 And so, we end up with an object that has the name Trenton and
 
has a state Of New Jersey.

Now, the important thing to point out is that the this keyword here
 
does not correspond to the constructor function or what’s called the city
 
prototype it actually corresponds to the instance object itself.
 And that’s how you’re able to log different values for each object instance.

The printCityAndState method is going to return a string.
 
My city is the value of this.name.
 One of the reasons that the constructor function is so
 valuable is because you can basically repeat this 100 times or 500 times and
 
the this keyword will always respond to the object that’s been created,
 
allowing you to create applications with highly replicable code.

I hope that you’re feeling a lot more informed on how you can use this to make

your applications more powerful. One of the best ways to better understand this is to look at what
 
other developers are doing to find the most elegant and powerful ways to implement solutions using the keyword this.

Do your best, and forge your way ahead with the this keyword at your disposal.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s