JavaScript: Trouble understanding logic in this while loop

Question

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

n-- will be true unless n is zero, so the loop stops when either n has been decremented to zero or when there's no parent after some number of iterations. — Pointy
– Pointy, Commented Apr 10, 2016 at 16:59

Damodar Dahal · Accepted Answer · 2016-04-10 16:57:31Z

1

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.

answered Apr 10, 2016 at 16:57

Damodar Dahal

5794 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Darc Nawg Over a year ago

Yes, but what I don't understand is why decrement n in the loop. I don't understand the (n-- && e), and why it was done like that. I guess I'm so used to seeing the ++ operator in code. :)

Darc Nawg Over a year ago

Understood Jonathan. That's why I started with noob alert :)

bruceceng · Accepted Answer · 2016-04-10 17:03:07Z

1

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).

answered Apr 10, 2016 at 17:03

bruceceng

2,2221 gold badge20 silver badges24 bronze badges

Comments

Gilbert · Accepted Answer · 2016-04-10 17:03:06Z

0

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.

edited Apr 10, 2016 at 17:03

answered Apr 10, 2016 at 16:59

Gilbert

3,80619 silver badges21 bronze badges

1 Comment

Darc Nawg Over a year ago

The fog in my brain has been lifted. I understand now. Thanks.

Collectives™ on Stack Overflow

JavaScript: Trouble understanding logic in this while loop

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related