confused by the javascript console log output of function variables

Question

I am a beginner when it comes to javascript/jquery..so if this question sounds silly,please forgive me.

While going through this tutorial ,I tried to write to javascript console ,values of some of the variables in the functions-so that I can better understand how the function works

$(document).ready(function(){
    $("div.post h2 a").click(function () {
    var a    = $(this),
    href = a.attr('href'),
    content  = a.parent().next();
    console.log('a='+a);
    console.log('a.get(0)='+a.get(0));
    console.log('a parent='+a.parent());
    console.log('a parent.get(0)='+a.parent().get(0));
    console.log("href="+href);
    console.log('content='+content);
    content.load(href + " #content");
    return false; 
});

I have modified the html slightly

<div class="post">
    <h2 id="h21"><a href="other/mypage.html">My Page</a></h2>
    <div class="content">
        Teaser text1...
    </div>
</div>
<div class="post">
    <h2 id="h22"><a href="other/myotherpage.html">My Other Page</a></h2>
    <div class="content">
        Teaser text2...
    </div>
</div>
});

when I click on the first link,I get this console log output

a=[object Object]
a.get(0)=file:///home/me/dev/misc/other/mypage.html
a parent=[object Object]
a parent.get(0)=[object HTMLHeadingElement]
href=other/mypage.html
content=[object Object]

I thought the $(this) expression in the function would be the element which was clicked(ie the first <a element).Why does it appear as [object Object].I couldn't make out how a.get(0) becomes file:///home/me/dev/misc/other/mypage.html

Similarly,shouldn't the variable content be equal to the first div (containing Teaser text1)? Why does it appear as [object Object]?

lonesomeday · Answer 1 · 2012-05-28T08:21:45.337

3

There is a difference between these two lines:

console.log(content);
console.log('content=' + content);

The first just logs the content variable. The second does a concatenation operation, concatenating the string and the object, before logging it. Concatenating a string and an object results in the object's toString method being called, which results in [object Object]. To avoid this, don't do the concatenation and just log content directly. As mindandmedia comments, you can do this by passing the values as separate arguments to console.log:

console.log('content=', content);

Finally, any native DOM link element with an href attribute does have a toString method. This returns the href value. So console.log('a.get(0)=' + a.get(0)) gets the href value of the first element in the a set.

edited May 28 '12 at 08:21

answered May 28 '12 at 08:16

lonesomeday

233,373
50
316
318

3

this, and also pro tip: you can log multiple things in one call by using commas: `console.log('content=',content); – mindandmedia May 28 '12 at 08:19
Does your tip work for IE? In IE8's Developer tools using console.log('object=', object) still gives output like "LOG: object=[object Object]". – GuruM Sep 21 '12 at 06:43
@GuruM I believe IE's console just calls `toString` on everything. See [this question](http://stackoverflow.com/questions/1956384/how-do-i-dump-javascript-vars-in-ie8) for where this has come up before. – lonesomeday Sep 21 '12 at 08:34

Guffa · Accepted Answer · 2012-05-28T12:09:53.347

I thought the $(this) expression in the function would be the element which was clicked(ie the first <a element).Why does it appear as [object Object].

The variable a contains a jQuery object, and the toString method isn't overridden for it, so it uses the default implementation that returns the type of the object.

I couldn't make out how a.get(0) becomes file:///home/me/dev/misc/other/mypage.html

The get methods returns DOM element objects from the jQuery object, and the toString method for an <a> element returns the URL that the link points to.

Similarly,shouldn't the variable content be equal to the first div (containing Teaser text1)? Why does it appear as [object Object]?

The variable content contains a jQuery element that contains the <div> element. Using content.get(0) would give you the DOM element.

score 0 · Answer 3 · answered May 28 '12 at 08:14

$(this) is a jQuery object, which is why it shows as [object Object]. All jQuery select functions return a jQuery object. As above, you can use .html() to get the HTML of a jQuery object, or .text() to just get the text.

It's because jQuery is chainable so you can do things like $(this).next().parent() etc etc. Each "chain" returns a jQuery object that can then have another function run on it.

Edit:

As a side note, you can use $(this)[0] to return the DOM Element I believe

score 0 · Answer 4 · answered May 28 '12 at 08:15

0

try removing the strings from each of your consoles so that you only output the actual variable.

e.g. replace:

console.log('a='+a);

with

console.log(a);

and so on.

answered May 28 '12 at 08:15

Dave Haigh

4,369
5
34
56

confused by the javascript console log output of function variables

4 Answers4