title: Scope of the 'const' keyword in JavaScript
body: <p>I am trying to style my header differently, as soon as the vertical offset on the page is more than 200. My function (scrollHeader()) does not seem to work. I understand that the const keyword (const yOffset) is blockscoped, but my code does not work either when I put the const above the function declaration.</p>
  <p>I use VSCode. When I hover over the this.yOffset, it says 'any'. Does someone know why my variable is not being used?</p>
  <pre><code>/* ######################## ACTIVE LINK ######################## */
  
  const sections = document.querySelectorAll('section[id]')
  
  function activeLink() {
      const yOffset = window.pageYOffset; 
  
      sections.forEach(section =&gt; {
          var sectionHeight = section.offsetHeight;
          var sectionTop = section.offsetTop - 48; //48 is height of the header
          var sectionId = section.getAttribute('id');
  
          if (yOffset &gt; sectionTop &amp;&amp; yOffset &lt;= sectionTop + sectionHeight) {
              document.querySelector('.nav__menu a[href*=' + sectionId + ']').classList.add('active-link');
          } else {
              document.querySelector('.nav__menu a[href*=' + sectionId + ']').classList.remove('active-link');
          }
      })
  }
  
  window.addEventListener(&quot;scroll&quot;, activeLink);
  
  /* ###################### BACKGROUND HEADER ###################### */
                                    
  function scrollHeader() {
      const header = document.getElementById('header');
  
      if (this.yOffset &gt;= 200) {
          header.classList.add('scroll-header');
      } else {
          header.classList.remove('scroll-header');
      }
  }
  
  window.addEventListener(&quot;scroll&quot;, scrollHeader);
  </code></pre>