use of 'pageYOffset / pageXOffset' without 'window.' in 'coordinates' article

[paroche]

In the article: https://javascript.info/coordinates,

The code:

// get document coordinates of the element
function getCoords(elem) {
  let box = elem.getBoundingClientRect();

  return {
    top: box.top + pageYOffset,
    left: box.left + pageXOffset
  };
}

uses pageYOffset & pageXOffset without prefixing them with window., even though all previous discussions of the properties did use the window. prefix.

The window object was, I'm pretty sure, discussed in an earlier article, but I think it would be good to mention with this example, or, maybe better, in the previous article https://javascript.info/size-and-scroll-window#page-scroll how window properties are global variables, so that if one wants, window. can be omitted.

Additionally, in the interest of understanding code that one might encounter, perhaps a mention in the same place where window.pageYOffset et al are introduced that the window properties "scrollY" and "scrollX" are identical to "pageYOffset" and "pageXOffset" (though apparently they have less cross-browser compatibility, so are not recommended) would be good.

[koala-lava]

I personally didn't have problem with that as early in the tutorial author mentioned it several times that global properties can be used as window.property and just property. Although I'm neutral about scrollY/scrollX being mentioned.

[paroche]

Well, I thought it would be better to mention it.

[iliakan]

I updated references to use window.pageXOffset and window.pageYOffset. Is there anything left out?

[paroche]

I think that might forestall some confusion, though what I might suggest instead, perhaps, is to have the code as it was, but with a note below along the lines of "as you may recall from (earlier article), the properties of the window object, like pageXOffset and pageYOffset, are also global variables, so that, while the above could have used window.pageXOffset, etc. we can also just use pageXOffest etc. as shown." Or have something in the previous article https://javascript.info/size-and-scroll-window#page-scroll.

[iliakan]

I use window. in such references most of the time, so I think it's ok to put it everywhere.

Is there something that I miss?

[paroche]

OK. I thought from the original code here that not using window. was probably your default mode (it's shorter, and all). But if you think it would be helpful for people to be reminded that they don't need to use window., then maybe put something in. Otherwise, should be fine the way it is.

[iliakan]

Usually it's better to use window explicitly. Most code style tools will give nasty highlights otherwise.

In the tutorial it's definitely better to be explicit, I suppose.

[paroche]

Good to know. In https://javascript.info/global-object, where you talk about the global windows object, you warn against using global variables in general (at least, ones you create yourself), but maybe this point can be made there as well. So you favor using window. explicitly for window properties like pageYOffset, but not for window methods (like alert)? Also, for the properties, do you then depend on transpiling if the code is moved to a Node.js or other environment?

[paroche]

And yes, explicit is usually better. And a certain amount of repetition. I remember once I had a teacher in a course on partial differential equations, and he had a way of repeating some little salient phrase at the end of an explanation, almost as if he was talking to himself, that often made the crucial difference between understanding what he was saying or losing it.

[iliakan]

Yes, for properties of browser window I use window.*.

Functions such as alert, fetch and others are not properties of the browser window, but rather built-in functions of the environment.

In node.js there should be an import, and then fetch works, like:

import fetch from ...

fetch(...).then(...) 

So such usage (without window) is fine for host functions, and better for compatibilty.

Browser window properties on the other hand, are not compatible by default. There's no browser window in Node.js (unless emulated, then we're good to put window.*).