Explain complex javascript for loop

Question

I got this code from somewhere on the internet but I don't quite understand it. Especially the for loop part.

function FindPosition(oElement) {
  if( typeof( oElement.offsetParent ) != "undefined" ) {
    for( var posX = 0, posY = 0; oElement; oElement = oElement.offsetParent ) {
      posX += oElement.offsetLeft;
      posY += oElement.offsetTop;
    }
    return [ posX, posY ];
  }
  else {
    return [ oElement.x, oElement.y ];
  }
}

I don't understand particularly the for loop part here:

for( var posX = 0, posY = 0; oElement; oElement = oElement.offsetParent )

I expected there to be a middle expression or upper bound instead of just oElement

Please can someone explain to me?

oElement in the middle part is truthy while element exists. It traverses up through its parents until it gets to the root element, oElement becomes null which is falsy. — Yeldar Kurmangaliyev
– Yeldar Kurmangaliyev, Commented Aug 1, 2017 at 8:46
@YeldarKurmangaliyev sounds like this code could be written using a while loop, which could make the code easier to reason about. — evolutionxbox
– evolutionxbox, Commented Aug 1, 2017 at 8:57

Matey · Accepted Answer · 2017-08-01 08:50:10Z

3

A for loop header has 3 parts: initialization, condition, iteration.

Here, the condition (...; oElement; ...) is not in the form of a comparison against an upper bound (e.g. i < 100). Instead, it checks if oElement is true (i.e. not null, not undefined, not 0)

The iteration part(...; oElement = oElement.offsetParent) does not increase any indexing value as you are used to (e.g. i++). Instead, it moves upward in the element hierarchy by assigning oElement's parent to oElement.

The condition makes sure the upward traversal stops when there is no longer an offsetParent defined.

answered Aug 1, 2017 at 8:50

Matey

1,2106 silver badges7 bronze badges

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

Comments

Yury Tarabanko · Accepted Answer · 2017-08-01 08:46:13Z

2

This is just an example of using for-loop instead of do-while. If you rewrite this using do-while the overall idea behind the loop should be clear.

function FindPosition(oElement) {
  if( typeof( oElement.offsetParent ) != "undefined" ) {
    var posX = 0, posY = 0;
    do {
      // update coordinates using offset data
      posX += oElement.offsetLeft; 
      posY += oElement.offsetTop;

      // move up the DOM tree
      oElement = oElement.offsetParent

    } while(oElement != null) // while there is offsetParent

    return [ posX, posY ];
  }
  else {
    return [ oElement.x, oElement.y ];
  }
}

answered Aug 1, 2017 at 8:46

Yury Tarabanko

45.1k10 gold badges88 silver badges99 bronze badges

4 Comments

Desmoline Awa Over a year ago

thanks so much for the explanation. Please I am also not clear about [ oElement.x, oElement.y ]. Does this mean that html elements have x and y coordinates?

Yury Tarabanko Over a year ago

@Awa Never heard of it. Where did you get this code from?

Desmoline Awa Over a year ago

from here @YuryTarabanko

Yury Tarabanko Over a year ago

Not sure. This code might be written to take care of some non-standard browsers. But I have never heard of it.

Collectives™ on Stack Overflow

Explain complex javascript for loop

2 Answers 2

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related