Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript Understanding "this" in JavaScript

Gwen Sims-Williams
Gwen Sims-Williams
10,898 Points

Why use "this" instead of the object name?

In this video, Huston uses "this" inside an object to reference one of the object's properties. Why is it better to use "this" instead of using the object name to reference the same property?

For example, why is it better to write:

console.log(this.bridges);

instead of:

console.log(Portland.bridges);

since as far as I can see, both accomplish the same thing? The only benefit I can think of is it saves you some time should you decide to re-name the object. Are there other benefits which I'm missing?

4 Answers

There isn't really any efficiency advantage to using "this" instead of using the object's name. It's mostly for simplicity purposes (although it can admittedly be confusing at first) since "this" can be used to refer to any of the current object's members (members being things like variables or arguments). Even though it may seem pointless, it's generally seen as best practice.

Jeremy Castanza
Jeremy Castanza
12,081 Points

Gwen, my take on it was that it allows for some dynamic development. With console.log(this.bridges); a different object could be used depending upon the context of the code. With console.log(Portland.bridges), the code is more "hard-coded" in that the console.log method will only work with the Portland object. In other words, I think using this gives more flexibility to the developer when writing a program.

Christopher Cali
Christopher Cali
3,779 Points

To echo Jeremy's point, consider creating the property 'bridges' for a large number of objects being pulled from a data set. To do so, you would likely create a for loop that traverses the array of objects from your data. In this case, by using the keyword 'this' you can enable the dynamic creation of a 'bridges' property for many objects. If instead you used one of the object's name within the loop's instructions, I believe you would receive an error in creating the property.

//Create this array by pulling data into an array //array: [obj1, obj2, obj3, obj4, etc.];

var data = your_data_set.csv; for (var i = 0; i < array.length; i++){ this.bridges = data[obj.uniqueProperty]['bridges']; }

darryn
darryn
17,367 Points

console.log(Portland.bridges), as coded within this context, could potentially refer to a global variable if one already exists with that same name. Think of an extensive project with many variables, and you didn't realize another object already had the name Portland. This predicament wouldn't be fun to debug.

console.log(this.bridges), on the other hand, is bound to the object where the "this" keyword is used. In other words, it never looks for Portland, so it won't find another one by mistake.

Alexis Leroux
Alexis Leroux
13,212 Points

Hi Gwen,

I had the same question when I first encountered the 'this' keyword and a source that I found really helpful was Kyle Simpson's You Don't Know JS series. Specifically his e-book on 'this' and the Object Prototype.

Regarding your questions he says, "the this mechanism provides a more elegant way of implicitly "passing along" an object reference, leading to cleaner API design and easier re-use. The more complex your usage pattern is, the more clearly you'll see that passing context around as an explicit parameter is often messier than passing around a this context."

I hope anyone reading this will really check out his whole series! Really helped demystify the 'this' keyword.