Simply js: pg. 139 "link._tooltip = null;" is it necessary?

if anyone can clarify what i’m not getting, it’ll be much appreciated!
:slight_smile:
(note: this is about pp 142-144 in simply javascript)
ok, the code in the tooltips works great. but i’m confused about what’s happening. there are variable/nodeValue assignments that make no sense to me. here’s the code, specifically (look in the comments for what i’m confused about):


showTip: function(link)
{
    Tooltips.hideTip(link);

    var tip = document.createElement("span");
    tip.className = "tooltip";
    var tipText = document.createTextNode(link.title);
    tip.appendChild(tipText); 
    link.appendChild(tip); 

/* from the above, i see that a span element 
(of class 'tooltip' w/ a text node filled w/ the 
link's 'title' attribute's text) is created, then that 
element is appended as a child node to the link 
itself. so far so good (i think). 
*/

    link._tooltip = tip; 

/* the above seems like a placeholder for the 
values to be re-inserted in the 'title' attr upon 
blur/mouseout.
*/

    link.title = "";      

// this clears 'title' attr so tips aren't twice displayed.
...}

hideTip: function(link)
  {
    if (link._tooltip) // if link._tooltip == true, do the following:
    {
      link.title = link._tooltip.childNodes[0].nodeValue;      

/* above assigns to the link's title attr the value 
of the _tooltip's firstChild's nodeValue.
*/

     link.removeChild(link._tooltip); 

// HERE is where i'm lost.
/* question: when did link._tooltip become the 
child node? i thought link.appendChild(tip) 
meant 'tip' became the child node. in other
words, i would have thought link.removeChild(link.tip)
would have been the correct line (it isn't :-) )
and the next line, link._tooltip just 
seems to clear contents 
of the placeholder.
*/

     link._tooltip = null;
...}

so, where did i drop the ball? the code works, obviously. but in the juggling of assignments i must have spaced out!
;-p

Hi gluis,

Happy to address you confusion on this. I believe where you’re tripping up is in regards to this line, in showTip, which sets the value of link._tooltip:

link._tooltip = tip;

At this point in the code, tip refers to the newly-created tooltip span, which has just been appended to the link for display. Assigning tip to link._tooltip doesn’t create a copy of this span, it stores a reference to the same span under a new name - a name that we will be able to access later in hideTip.

By the end of showTip, both tip and link._tooltip refer to the child span that was added to the link. The difference is that tip is a local variable that disappears as soon as showTip finishes executing, while link._tooltip is a property of the hyperlink node in the DOM, which will persist and be available to use within hideTip.

So, when we get to hideTip and want to remove the tooltip span from the document, we have these two lines:

link.removeChild(link._tooltip);
link._tooltip = null;

You asked why this first line wasn’t link.removeChild(link.tip);. Again, tip was a local variable created within the showTip function. It does not exist here, inside hideTip. Even if it did, it would be referred to as tip, not link.tip. link.tip would refer to a property named tip of the hyperlink node, which we never created.

What we did create was a property of the hyperlink node named _tooltip, containing a reference to the child node.

Let me know if this is still unclear.

that was great, thanks, kevin. my big problem came from forgetting that object properties can be created on the fly just by assigning a value to them (link._tooltip = tip; private property ‘_tooltip’ being assigned a reference to the same object ‘tip’ references. i didn’t remember that js could do this.). your reminder of the variables only referencing and not being the object lit the bulb.

one question that relates to this (and maybe u address it in the book–i’m just up to ch5 now): how does javascript handle objects that are no longer referenced? how do they get destroyed (or do they just sit around taking up memory until the page changes?)?

thanks again. it’s a great book to start js w/. i love the jump into it approach and i very much appreciate the standards based angle. i think it’s important to understand the quirks before using libraries like Core/jQuery/Prototype, etc. they’re great when u understand what they do, and dangerous when that’s all one understands. (then one is learning how to use a library, and not how to program in js). your writing style also keeps up the momentum and enthusiasm. you guys did a great job!

That’s a great question, and no it’s not explicitly covered in the book.

JavaScript operates under a garbage collection model. Different implementations (different browsers) have different algorithms, but the general approach is for the browser to periodically check if there are any objects that have no in-scope references to them left. An in-scope reference could be a local variable within a currently-executing function, a property on a DOM node, or a variable that is accessible to a piece of code that was passed to setTimeout and is waiting to be executed.

When it identifies an object that has no in-scope references, JavaScript frees up the memory that it occupies.

Returning to the tooltip example, take another look at how we remove a tooltip from the document:

link.removeChild(link._tooltip);
link._tooltip = null;

We want to get rid of the tooltip span, and that span has two in-scope references. The first line removes the span from the DOM tree, removing the first in-scope reference. The second line changes the value of the link’s _tooltip property, removing the second in-scope reference.

With no in-scope references remaining, the browser is able to clear the tooltip span from memory.

If we had left out the second line, the tooltip would have been removed from the document, but it would remain in memory, held there by the in-scope reference provided by the _tooltip property.

fantastic, thanks!

where on the w3c site can I find a discussion of this property? I am unable to find it.

thanks

carl