title: Conversion to arrow function inside foreach loop results in TypeError
body: <p>I have this code block that I use to bind an event listener to every anchor tag with a <code>#</code> href. I decided to convert event listener's callback function to an arrow function but while the original code works, the modified one results in an error: <code>TypeError: undefined has no properties</code>. I have used arrow callback functions many times before and they do work fine. What makes it break in this instance?</p>
  
  <p>Original code that works:</p>
  
  <pre class="lang-js prettyprint-override"><code>document.querySelectorAll('a[href^="#"]').forEach((anchor) =&gt; {
    anchor.addEventListener('click', function (e) {
      e.preventDefault();
      document.querySelector(this.getAttribute('href')).scrollIntoView({
        behavior: 'smooth',
      });
    });
  });
  </code></pre>
  
  <p>Broken arrow callback function:</p>
  
  <pre class="lang-js prettyprint-override"><code>document.querySelectorAll('a[href^="#"]').forEach((anchor) =&gt; {
    anchor.addEventListener('click', (e) =&gt; {
      e.preventDefault();
      document.querySelector(this.getAttribute('href')).scrollIntoView({
        behavior: 'smooth',
      });
    });
  });
  </code></pre>
  
  <p>Edit: I fixed the issue like this but I still cannot figure out how these two are different</p>
  
  <pre class="lang-js prettyprint-override"><code>document.querySelectorAll('a[href^="#"]').forEach((anchor) =&gt; {
    anchor.addEventListener('click', (e) =&gt; {
      e.preventDefault();
      anchor.scrollIntoView({
        behavior: 'smooth',
      });
    });
  });
  </code></pre>
  
  <p>Or:</p>
  
  <pre class="lang-js prettyprint-override"><code>document.querySelectorAll('a[href^="#"]').forEach((anchor) =&gt; {
    anchor.addEventListener('click', (e) =&gt; {
      e.preventDefault();
      e.target.scrollIntoView({
        behavior: 'smooth',
      });
    });
  });
  </code></pre>