Qual è la differenza tra funzioni freccia e funzioni normali in JavaScript?

1. Sintassi:
   • Funzione normale: function myFunction() { ... }
   • Funzione freccia: () => { ... } o param => { ... }
2. Contesto this:
   • Funzione normale: this è determinato dal contesto di chiamata.
   • Funzione freccia: this viene ereditato lexicalmente dall'ambito circostante (non ha un proprio this).
3. Costruttori:
   • Funzione normale: Può essere usata come costruttore (new myFunction()).
   • Funzione freccia: Non può essere usata come costruttore.
4. Oggetto arguments:
   • Funzione normale: Ha il suo oggetto arguments con gli argomenti passati.
   • Funzione freccia: Non ha il suo oggetto arguments, l'accesso avviene tramite parametri rest (...args).
5. Funzioni nominate:
   • Funzione normale: Può essere nominata (function myFunction() { ... }).
   • Funzione freccia: Di default anonima, assegnata a una variabile (const myFunction = () => { ... }).
6. Return implicito:
   • Funzione normale: Richiede esplicitamente return per restituire un valore (eccetto in casi semplici come IIFE).
   • Funzione freccia: Con corpo di una sola riga può restituire implicitamente il risultato di un'espressione senza return.

Tabella comparativa:

Caratteristica	Funzione normale	Funzione freccia
Sintassi	function name() { ... }	() => { ... }
Contesto this	Dinamico (secondo la chiamata)	Lexical (dal contesto genitore)
Costruttore	Sì	No
Oggetto arguments	Sì	No (usa parametri rest)
Nominazione	Può essere nominata	Anonima (assegnata)
Return implicito	No (normalmente richiede return)	Sì (per corpo di una riga)

// Esempio di funzioni normali
function standardFunction() {
  console.log(this); // Dipende dal contesto di chiamata
  console.log(arguments); // Oggetto arguments disponibile
}

const obj = {
  method: standardFunction
};

standardFunction(); // `this` sarà window (nel browser) o undefined (in modalità strict)
obj.method(); // `this` sarà obj
new standardFunction(); // `this` sarà la nuova istanza

// Esempio di funzioni freccia
const arrowFunction = () => {
  console.log(this); // Eredità `this` dal contesto circostante (ad esempio, Global o modulo)
  // console.log(arguments); // Errore, `arguments` non disponibile
};

const outerObj = {
  outerMethod: function() {
    const innerArrowFunction = () => {
      console.log(this); // Eredità `this` da outerMethod (che è outerObj)
    };
    innerArrowFunction();
  }
};

arrowFunction(); // `this` sarà window (nel browser) o {} (in Node.js)
outerObj.outerMethod(); // `this` dentro innerArrowFunction sarà outerObj

// Return implicito in funzione freccia
const sum = (a, b) => a + b;
console.log(sum(2, 3)); // 5

// Funzione normale con ritorno esplicito
function multiply(a, b) {
  return a * b;
}
console.log(multiply(2, 3)); // 6

// La funzione freccia non può essere costruttore
// new arrowFunction(); // Errore: TypeError: arrowFunction_1 non è un costruttore