Is there any usage difference between these two var $test.parent() and var test.parent?

Question

I have two variable and the bellow code to access the elements. I have access to both variables parent element as well as its child elements. I can not see any difference. Are they same or is there an any difference?

HTML

<div>Sample text : 
    <input id='test' type='text' value='test' />
</div>

JavaScript

$(function(){
        var test = $('#test');
        var $test = $('#test');
        console.log($test.parent().text());
        console.log(test.parent().text());
});

No, however, some developers like to prefix variables with `$` to signify that they contain jQuery objects. This is merely a preference. — haxxxton, Mar 16 '17 at 05:34

Manngo · Accepted Answer · 2017-03-24T10:39:37.047

I can see 3 possible aspects to this question, so I will answer all three:

The `$` sign

In JavaScript the $ is just another character which can be used as part of a variable name, and is part of the name. This is unlike PHP, where the $ sign is use as a prefix, and is not part of the name.

Just like any other valid character (except numerals) the $ can be used by itself as a valid name, and jQuery has used this to name their main function (AKA jQuery).

You can choose to name your variables anything you like, but many developers like to start some with $ sign as a reminder that it represents a jQuery object which is non-trivial object.

In other words, it makes no difference whether you decide to begin with the $ or not, as long as you remember what you’ve done.

Are the 2 variables the same?

Apropos the above, the two variable names are not the same. One has 4 characters, and one has 5. They don’t have any relationship to each other at all.

Are the two objects the same?

Every time you run the jQuery function, you get a new object. This object contains, among other things a reference to the DOM object referred to in your argument.

Even though the two jQuery objects refer to the same DOM object, the objects themselves are not the same.

This is a trap that many new jQuery developers fall in:

$current=$('div#something');
//  some stuff
if($current==$('div#something')) …; // always false

There you are. Three answers. Take your pick :)

score 0 · Answer 2 · edited May 23 '17 at 12:10

$(function(){
        var test = $('#test');
        var $test = $('#test');
        console.log($test.parent().text());
        console.log(test.parent().text());
        console.log(test[0] === $test[0]);
        console.log(test === $test);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>Sample text : 
    <input id='test' type='text' value='test' />
</div>

No difference-- test is the name of one variable and $test is the name of another-- but they are both set equal to the same thing, and are otherwise handled in the same way. The $ is only significant when used as its jQuery function form $(/*some stuff*/) -- otherwise, it is just a valid character for a variable name.

Note, however, that they refer to the same element but the objects themselves are different objects, so not strictly equal. Thus why the first comparison above evaluates to "true" but the second evaluates to "false". You can also evaluate their equality with the jQuery .is() method.

Is there any usage difference between these two var $test.parent() and var test.parent?

2 Answers2

The $ sign

Are the 2 variables the same?

Are the two objects the same?

The `$` sign