CODEWITHSUNDEEP
javascript
Darc Nawg
Darc Nawg

Reputation: 1655

JavaScript: Trouble understanding logic in this while loop

Noob alert! I can't seem to understand the logic inside this while loop. It is taken from O'Reilly's "JavaScript: The definitive Guide" Chapter 15.3, example 15-2. I understand that it is decrementing n with n--. But I can't understand the reasoning or theory behind it with the boolean AND operator. What is this loop saying? While n is decremented and var e exists? To me, it seems like it should be incrementing, but when I changed the -- to ++ the function always returns null. Help me to understand deeper.

var firstpara = document.getElementsByTagName("p")[0];

/**
* Return the nth ancestor of e, or null if there is no such ancestor
* or if that ancestor is not an Element (a Document or DocumentFragment e.g.).
* If n is 0 return e itself. If n is 1 (or
* omitted) return the parent. If n is 2, return the grandparent, etc.
*/
function parent(e, n) {
    if (n === undefined) n = 1;
    while (n-- && e) e = e.parentNode;
    if (!e || e.nodeType !== 1) return null;
    return e;
}


parent(firstpara, 1); //returns <body>...</body> which is the parent node in my testpage

Upvotes: 0

Views: 53

Answers (3)

bruceceng
bruceceng

Reputation: 2182

The while conditional statement consists of two parts, n-- and e. As long as both are true, the loop continues. For the first part, it is false if (n--) == 0. Otherwise it is true. The 2nd part is true if e is defined. The first part is probably what you are hung up on. It is basically a short hand way of doing two statements: n = n - 1; followed by if (n != 0 AND e exists) then continue looping (pseudocode).

Upvotes: 1

Gilbert
Gilbert

Reputation: 3776

Assuming the double-asterisks are attempts at producing bold text in the example we are left with:

  while (n-- && e) e = e.parentNode;

The n-- counts down the generation... once it hits zero it becomes false and therefore stops the loop. The -- will decrement the zero leaving -1, but that's OK as it was the value of n before the decrement that was tested.

The "e" also stops the loop if the nodes run out early as no value is false.

The && assures that n must still be positive AND an e exists to continue the while. Either bing false will end the loop.

Paranoid me would code the loop more like:

 while (n-- > 0 && e) e = e.parentNode;

This assures that, no matter what, the code will not fail in strange ways. This is a general rule of loops I learned long ago and apply to all loops.

Upvotes: 0

Damodar Dahal
Damodar Dahal

Reputation: 569

It returns the nth parent of the <p> tag.

Suppose this is the sample code.

<div class="outer">
  <div class="inner">
    <p>Sample Code</p>
  </div>
</div>

parent(firstpara,1) would give you the first ancestor, which is <div class="inner">...</div> in this sample.

parent(firstpara,2) would give you the second ancestor, which is <div class="outer">...</div> in this sample.

parent(firstpara,0) would give you the same tag, ie, <p>...</p>

finally, parent(firstpara,10000) would give you null because such ancestor does not exist(probably).

I hope I made it clear.

Upvotes: 1

Related Questions