Que signifie addEventListener e=> ?

Question

J'essaie d'apprendre la base de ce code, mais je ne comprends pas la signification du e=>. Je suppose que c'est une sorte de raccourci, et j'ai fait quelques recherches mais je n'ai rien trouvé. Je veux tirer le meilleur parti de ce code. Alors pouvez-vous m'aider, ou au moins ne pas dévorer ? Quelle est cette syntaxe ?

const scriptURL = 'https://script.google.com/macros/s/AKfycbzslEnJtPfNT6z0ohrXP9cZYGhWvKVsFjQV7eLcriT3tok5D5ty/exec'
                            const form = document.forms['submit-to-google-sheet']
                            form.addEventListener('submit', e => {
                                e.preventDefault()
                                fetch(scriptURL, { method: 'POST', body: new FormData(form)})
                                .then($("#form").trigger("reset"))
                                .catch(error => console.error('Error!', error.message))})

Answer 1

e => {
    e.preventDefault();
}

est équivalent à

function (e) {
    e.preventDefault();
}

... Dans cet exemple précis

form.addEventListener('submit', e => { e.preventDefault(); ... });

e est l'eventObject, par lequel l'événement a été déclenché.

form.addEventListener('submit', eventObj => { eventObj.preventDefault(); ... });

Answer 2

Il s'agit d'un fonction de flèche :

e => {}

est la manière es6 de déclarer les fonctions/fermetures.

Dans la plupart des cas, il peut être utilisé de manière interchangeable avec :

function(e){}

Mais il y a quelques différences principalement avec le absence de liaison a this Il convient donc d'être prudent si vous vous attendez à ce qu'ils fonctionnent de la même manière lorsque vous utilisez le service this dans vos fonctions (c'est-à-dire les fonctions prototypes).