Se in JavaScript ti sei già chiesto quando usare le funzioni freccia e quando usare le funzioni tradizionali, o più semplicemente qual è la differenza tra le due opzioni, sei nel posto giusto!
Note :
quando parlerò di una funzione tradizionale, parlerò di una funzione dichiarata con la parola chiave 'function'
una funzione freccia (ou arrow function en anglais) è una funzione dichiarata con la sintassi compatta () => {}
Parte 1 : This
La prima differenza tra le due opzioni è la gestione di "this", infatti le funzioni freccia conservano il "this" del contesto in cui la funzione è stata chiamata, il che non è necessariamente il caso di una funzione tradizionale. Ecco un esempio per illustrare: language=js class MyClass { prop = "hehe"; testArrow() { const f = () => { console.log(this.prop); }; f(); } testFunction() { function f() { console.log(this.prop); } f(); } } const instance = new MyClass();
Quando si farà la chiamata a : instance.testArrow() non ci sarà errore perché il this dell'istanza della classe è conservato, invece se si prova : instance.testFunction() Ci sarà un bell'errore JavaScript "Cannot read properties of undefined" ...
Per capire questo errore, bisogna saperne un po' di più sulla parola chiave this e su JavaScript in generale :
in una funzione tradizionale "this" corrisponde all'oggetto globale
in una funzione tradizionale E in modalità stretta ("use strict";) "this" sarà undefined
il corpo di una classe è sempre eseguito in modalità stretta
Ora, nel nostro caso, la funzione è dichiarata in una classe, quindi in modalità stretta, quindi "this" sarà undefined, da cui il nostro errore JavaScript "Cannot read properties of undefined".
Bonus :
Se si sostituisce il nostro metodo "testFunction" nella classe "MyClass" con il seguente codice :
testFunctionBinded() {
function f() {
console.log(this.prop);
}
f.bind(this)();
}
Questo metodo è identico, ad eccezione della chiamata a f().
Infatti, chiamando f e collegandola manualmente al corretto "this" con la seguente sintassi : f.bind(this)(); Non si avrà errore durante la chiamata a instance.testFunctionBinded()
Parte 2 : JavaScript Hoisting
In JavaScript, quando si usa la parola chiave "function", si può usare questa funzione prima della sua dichiarazione (purché si rimanga nello stesso blocco), questo è ciò che chiamiamo il hoisting.
In alcuni casi è abbastanza piacevole, ma spesso porta a errori difficili da debuggare, ad esempio :
if (true) {
function a() {
console.log("1");
}
if (true) {
a();
function a() {
console.log("2");
}
}
}
Qui, si dichiara una prima funzione "a", poi nel blocco successivo, all'inizio del blocco si chiama a() e alla fine del blocco si dichiara un'altra funzione "a". Durante la chiamata a a(), non è la funzione che si pensava a essere chiamata poiché la seconda funzione "a" è "hoisted"...
Spesso si mantengono le funzioni freccia in un "const" o un "let", il che permette di avere una lettura del codice molto più facile perché leggibile dall'alto verso il basso e quindi di eliminare il bug visto sopra.
Ecco fatto! Personalmente, preferisco usare le funzioni freccia, perché il comportamento è molto più facile da prevedere e il codice più facile da leggere!
