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 jQuery Basics (2014) Creating a Mobile Drop Down Menu Perform: Part 1

Is it good practice to limit the use of $(this)?

In this lesson I notice we are reducing the use of $(this). Why do we do this. Does reduce load time or something similar?

2 Answers

Sean T. Unwin
Sean T. Unwin
28,690 Points

In this lesson we are defining a context for $(this), or in other words putting a label on $(this) with the name $anchor. This does not change the value nor anything else about $(this), it is simply a wrapper for the reference.

One reason we do this is for better readability of the code. This means that it is much easier to understand for the developer (you) and anyone else reading the code. This is the context. It is simpler to understand what is going on in the code by referencing $(this) with $anchor. Of note here, it is fairly common to put a '$' at the beginning of a variable which references a jQuery object. This is again for context and readability since, generally, the '$' is an identifier for jQuery.

There is really nothing lost here in terms of performance. This is especially true for functions because the variables which are set within the scope of that function are removed through garbage collection when the function exits.

Typically, creating and setting variables should not be a concern. They are tiny pieces of the overall picture in terms of performance for an app. It is far more important to optimize the operations and run-time of the functionality of the app.

Where it may be a concern, particularly for a browser-based JavaScript app, is polluting the global scope. This term is used when an app or script is unnecessarily defining variables in the root scope, e.g. the window object in a browser. This is also means that variables created in the global scope are kept until the app or browser tab is closed unless they are explicitly nullified.

Eventually, the path from here will be starting to understand design patterns and namespacing so that your app/ scripts are compartmentalized.

Ryan Field
PLUS
Ryan Field
Courses Plus Student 21,242 Points

$(this) is simply a reference to the element upon which a specific function or action was taken .

For example, if you have an unordered list (ul) with a bunch of list items (li) inside which there is a div with a radio button and a label, you could change the background color of that specific div by using the jQuery .change() method to detect the change and then navigate up from that specific radio button to the parent div and change only its colour without affecting anything else.

It's not always necessary depending on what you want your logic to do, but as far as I'm aware, it doesn't have any significant detrimental effects in terms of load times, etc.