Scroll Event Listener: Empty While loop, how does it work and why?

Question

This question is in reference to this post.

In summary, the requirement is to have the links in the navigation to change status based on the current scroll position, I was able to get the code presented here to work, but one line which I don't understand why it's done this way is

while(--index && window.scrollY + 50 < sections[index].offsetTop) {}

I would've commented on the original answer post, but apparently, my reputation is not enough yet.

This is the whole JavaScript code

const links = document.querySelectorAll('.links');
const sections = document.querySelectorAll('section');

function changeLinkState() {
  let index = sections.length;

  while(--index && window.scrollY + 50 < sections[index].offsetTop) {}
  
  links.forEach((link) => link.classList.remove('active'));
  links[index].classList.add('active');
}

changeLinkState();
window.addEventListener('scroll', changeLinkState);

Why is the while loop needed and since it's empty wouldn't it do anything? I tried removing the while loop and it ended up breaking the code.

Answer 1

while(--index && window.scrollY + 50 < sections[index].offsetTop) {}

This decrements the index with each iteration. The loop stops when window.scrollY + 50 < sections[index].offsetTop is false, and the index remains to the value of the last 'passed' check.

It is later used to update links[index].classList.add('active');

It could have been written like this also:

while (index >= 0 && window.scrollY + 50 < sections[index].offsetTop) {
    index--
}

It is required to check if index has a adequate value (aka not -1 or lower), or it will error when it reached -1, as sections[-1].something does not exist.