What does addEventListener e=> mean?

Question

I am trying to learn the base of this code, but I don't understand the meaning of the e=>. I guess that it's some kind of a shortcut, and I've done some research and didn't find anything. I want to make the most out of this code. So can you help me, or at least not devote? What is this syntax?

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();
}

is equivalent to

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

... In this specific example

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

e is the eventObject, which the event was triggered by.

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

Answer 2

This is an arrow function:

e => {}

is the the es6 way of declaring functions/closures.

In most cases it can be used interchangeably with:

function(e){}

But there are some differences, mainly with the lack of binding to this, so use with caution if you are expecting them to work in the same way when using this in your functions (ie: prototype functions).