Há diferênças na maneira de funcionar, para além do aspeto.
() => {}
é uma função flecha (arrow function) e corre sempre no contexto que tiver sido chamada. Não aceita .bind
, .call
, .apply
ou outras maneiras de impôr um contexto de execução.
No caso do teu código, um auscultador de evento, a diferênça é grande pois o this
normalmente é o elemento que recebeu o .addEventListener
e essa é a maneira de distinguir do event.target
que é perdido com event => {}
.
Repara neste exemplo (jsFiddle):
var div = document.querySelector('div');
var info = document.querySelector('#info');
div.addEventListener('click', function(e){
info.innerHTML += ['legacy', this, e.target.tagName, '<br>'].join(' ');
});
div.addEventListener('click', e => {
info.innerHTML += ['arrow', this, e.target.tagName, '<br>'].join(' ');
});
<div>
<button type="button">Clica-me!</button>
</div>
<p id="info"></p>
Nestes casos o this
comporta-se de maneira bem diferente.