Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript jQuery Basics (2014) Creating a Password Confirmation Form Perform: Part 2

Timothy Bramlett
Timothy Bramlett
6,609 Points

One thing I am still really having trouble with is when to use just "." and when to use ".()" .

We use .() when using a function, right?

For instance .val() or .hide() . But why is .length not .length() ?

Can someone give me some simple rules for this?

4 Answers

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

Hi, Timothy. The difference between solely using a period (such as .length) and a period with a pair of parentheses (such as .hide()) is the difference between a property and a method.

When you use only a period, you are asking for a property of the object. For example, all strings have a bunch of inherent properties, and one of them is how long it is. In this case, calling str.length will return a single value. When you use something like .hide(), on the other hand, you are invoking a method (or function) of the object. Methods (most of the time) do things, such as run calculations or actually change the object itself (such as hiding it). There are some things that may seem odd, such as .val(), which only retrieves a value of an object, but in jQuery, most things are methods, which is why you see so many parentheses. In the case of .val(), passing an argument inside the parentheses will actually set the value of the object on which it is invoked, while no argument will simply return it's current value attribute, which is why it's a method.

Damien Watson
Damien Watson
27,419 Points

Hi Timothy,

The brackets are used to call (execute) a function, where without the brackets is to access a property. The length of a string is a property, not a function call.

var myObj = {
  text:"Hello"
}

function helloWorld() {
  return "Hello World";
}

// Get property
console.log(myObj.text);

// Run function
console.log(helloWorld());
Chris Shaw
Chris Shaw
26,650 Points

Hi Timothy,

The property length is standard to JavaScript, it's not unique to jQuery therefore we don't need to call it like a method because it's far from that. A good way to look at what-is-what is the jQuery docs, in these docs we can see everything jQuery is made up of and anything extra such as length should be considered as core properties and functions that the browser creates.

One thing most developers confuse is jQuery being some kind of superior language to JavaScript when in-fact, jQuery is JavaScript just wrapped in an massive object.

The MDN (Mozilla Developer Network) have a whole host of pages for the length property which extends beyond array's for example, see the below link for the Google results.

https://www.google.com.au/search?sourceid=chrome-psyapi2&ion=1&espv=2&ie=UTF-8&q=MDN%20length&oq=MDN%20length&aqs=chrome..69i57j0l5.1335j0j7

Hope that helps.

Timothy Bramlett
Timothy Bramlett
6,609 Points

Thank you all! That makes sense and clears up some of the confusion. I had thought that .() was invoking a method or function but was definitely getting confused by .val() which seemed to retrieve a property.

Basically though, and correct me if I am wrong... We use .() when the command can take a parameter and only use . when the thing we are returning/accessing is something like a property which obviously doesn't need to take any parameters?

Ryan Field
Ryan Field
Courses Plus Student 21,241 Points

For the most part, yes. Not all methods require arguments to be passed, though, so keep that in mind. In jQuery, you'll find a lot of things that seem to retrieve values but still use parentheses. In most of those cases, it is because the argument is optional, where passing one will set the value, and leaving it empty will retrieve it. The documentation can seem unwieldy at first, but once you get used to how things are written, but like Chris Upjohn said above, it's pretty easy to see what does what. :)

Timothy Bramlett
Timothy Bramlett
6,609 Points

Ryan Field, thanks! Yeah I haven't really used jQuery yet in any personal projects because I wanted to learn how to do it all in vanilla JavaScript first. Learning it that way has made jQuery a bit confusing to me because I keep thinking the vanilla JavaScipt way makes more sense to me.

Still, I can see how jQuery would save a LOT of typing. Using events and binding handlers in regular JavaScript seems to take a lot of code for me.