jquery variables, the difference between with and without $ prefix

Question

Hi there, I have read another post/question regarding jquery variables and it was useful but I'm still having trouble understanding... Below is a bit of code from a simple tabbed content functionality that I'm modifying.

Please could someone explain why this works:

$tabMenuItem.click(function() {     
    var activetab = $(this).find('a').attr('href'); 
    $(activetab).show(); //show the active ID content
    return false;
});

..and why this throws a '$activetab.show is not a function' error:

$tabMenuItem.click(function() {     
    var $activetab = $(this).find('a').attr('href'); 
    $activetab.show(); //show the active ID content     
    return false;
});

From what I can gather, both ways show the variable to hold the correct value - only the second version won't let me attach a jquery method/function to it...?

I'm not a strong programmer, and any clarification would be appreciated!

Answer 1

Using the $ sign in front of a variable is a naming convention that JavaScript programmers use to identify that it is a jQuery object. Here's a good article going over some common naming conventions (Look at #3 regarding your question). Also its a good refresher for the intermediate programmer.

In your 1st example, activetab is a jquery object collection. Doing $(activetab) is redundant and is actually creating a jQuery object out of a jQuery object. You could simply do activetab.show();

Answer 2

I think you are asking two questions. First the difference between $ and without. Most developers use $ in front of a variable because later they know that this is a jquery object.

Second question, why that code doesn't work. It's because you are doing attr('href'). which returns the attribute value. You can't show because the show() is a jquery function that unhides a div in html. I think what you want is alert or console.log.

Answer 3

activetab is the href of the selected anchor tag. show() is a jQuery method. The method needs to be called by a jQuery object. $(activetab) is a jQuery object. Albeit probably not what you want.

If you wanted the second to work and using $ to prefix your variables, you still need to make it a jQuery object. You can do so by $($activetab).show().

Answer 4

I like to think of jQuery as a "wrapper", perhaps it's not the best use of the term, but let me explain:
When you put something like $(someobj), you are essentially adding jquery functionality to that object; you are "wrapping" jQuery around it. Once you do this, you have access to all the jQuery functionality for that object. However, since you've "wrapped" it, that object is no longer the same as the one you started from. In order to keep track of whether or not you're using a jQuery "wrapped" object, you can add a $ to the beginning of the variable name so that later on, when you read code, you'll know that that object has (or doesn't have) jQuery functionality.
Note: If you want to get the original object back from the jQuery object you can use $myjqueryobj.get().

In your examples, you're returning the href value for the first a tag within the clicked item. This is a string and passing it into the jQuery object like this: $(activetab) treats the href value as if it was a selector (which it's not). You can test what its value is by using alert(activetab); and you will see that it's not a jQuery object, it's a string.

Both methods work the same way because JavaScript doesn't care if a variable starts with $ or not. It's only there for the programmer's reference.