title: 'this' is undefined in Javascript arrow function
body: <p>In the callback function of Javascript event, <code>this</code> is clicked element:</p>
  
  <pre><code>  document.querySelector('#my-element').addEventListener('click', function() {
      console.log(this);  // &lt;div id="my-element"&gt;
    });
  </code></pre>
  
  <p>But, when I use ES6 arrow function, <code>this</code> becomes <code>undefined</code>:</p>
  
  <pre><code>  document.querySelector('#my-element').addEventListener('click', () =&gt; {
      console.log(this);  // undefined
    });
  </code></pre>
  
  <p>Can someone, please, explain me this behaviour?</p>