Perché dovresti stare attento usando le funzioni freccia in JavaScript

La sintassi della funzione freccia è arrivata con il rilascio di ECMAScript 2015, noto anche come ES6. Oggi, le funzioni freccia sono diventate la caratteristica preferita di molti programmatori JavaScript. Questo amore per le funzioni freccia è dovuto alla sintassi concisa e al comportamento diretto della parola chiave "this".

Ma le funzioni freccia presentano alcuni svantaggi. Scopri le principali differenze tra le funzioni freccia e le funzioni regolari e scopri perché, nella maggior parte dei casi, è meglio attenersi alle funzioni regolari.

1. È necessario definire una funzione freccia prima di utilizzarla

Non puoi sollevare una funzione freccia. Le regole di sollevamento predefinite di JavaScript consentono di chiamare una funzione prima di definirla, ma non è il caso delle funzioni freccia. Se hai un file JavaScript con funzioni, ciò significherebbe che tutto il codice importante sarà in fondo al file.

Si consideri ad esempio il seguente codice JavaScript:

cost doppiNumeri = (numeri) { 
 numeri.mappa(N => N * 2)
}
cost dimezzareNumeri = (numeri) { 
 numeri.mappa(N => N / 2)
}
cost sommaNumeri = (numeri) { 
 numeri.reduce((somma, nm) => { 
ritorno somma + n; 
 }, 0)
}
cost numeri = [1, 20, 300, 700, 1500]
cost raddoppiato = doubleNumbers (numeri)
consolare.log (halveNumbers (raddoppiato))
consolare.log (sommaNumeri (numeri))

Nel blocco di codice sopra, il codice importante è in basso. Le funzioni di supporto sono tutte definite prima del punto di esecuzione. Dover crea le tue funzioni JavaScript nella parte superiore del file può essere scomodo perché dovrai scorrere verso il basso per vedere il codice effettivo che fa il lavoro.

Se hai spostato le funzioni di supporto in basso e il codice effettivo in alto, otterrai un errore di riferimento. Il runtime considera la funzione come una variabile. Pertanto, è necessario definirlo prima di accedervi o richiamarlo. Ma se hai convertito tutte le funzioni freccia in funzioni regolari (con l'estensione funzione parola chiave), quindi il tuo codice funzionerebbe correttamente. Allo stesso tempo, il codice importante rimane in alto dove puoi individuarlo.

Questo è uno dei maggiori problemi con l'utilizzo delle funzioni freccia. Non mostrano alcun comportamento di hosting. In altre parole, devi definirli prima del luogo effettivo in cui li useresti. D'altra parte, puoi sollevare funzioni regolari.

2. Le funzioni delle frecce potrebbero confondere alcune persone

Un altro motivo per utilizzare le funzioni normali invece delle funzioni freccia è la leggibilità. Le funzioni regolari sono più facili da leggere perché usano esplicitamente l' funzione parola chiave. Questa parola chiave identifica che il codice in questione è una funzione.

D'altra parte, si assegnano funzioni freccia alle variabili. Come principiante, questo potrebbe confonderti nel pensare che il codice sia una variabile, piuttosto che una funzione.

Confronta le due funzioni di seguito:

cost dimezzareNumeri = (numeri) => {
ritorno numeri.mappa(N => N / 2)
}
funzionedimezzareNumeri(numeri) { 
ritorno numeri.mappa(N => N / 2)
}

A prima vista, puoi facilmente capire che il secondo pezzo di codice è una funzione. La sintassi chiarisce che il codice è una funzione. Tuttavia, il primo è ambiguo: potresti non capire facilmente se si tratta di una variabile o di una funzione.

3. Non è possibile utilizzare le funzioni freccia come metodi

Quando si utilizza una funzione freccia, il Questo la parola chiave corrisponde a tutto ciò che è al di fuori della cosa in cui siamo dentro. Nella maggior parte dei casi, è l'oggetto finestra.

Considera il seguente oggetto:

cost persona = {
 nome di battesimo: "Kile",
 cognome: "Cucinare",
 printNome: () => {
consolare.tronco d'albero(`${Questo.nome di battesimo}``${Questo.cognome}` )
 }
}
persona.printName()

Se esegui il codice, noterai che il browser stampa non definito sia per nome che per cognome. Dato che stiamo usando una funzione freccia, Questo la parola chiave corrisponde all'oggetto finestra. Inoltre, non c'è nome di battesimo O cognome proprietà ivi definita.

Per risolvere questo problema, è necessario utilizzare invece una funzione normale:

cost persona = {
 nome di battesimo: "Kile",
 cognome: "Cucinare",
 printNome: funzione() {
consolare.tronco d'albero(`${Questo.nome di battesimo}``${Questo.cognome}` )
 }
}
persona.printName()

Funzionerà bene perché Questo si riferisce a persona oggetto. Se farai molto questo tipo di programmazione orientata agli oggetti, dovrai assicurarti di utilizzare funzioni regolari. Le funzioni freccia non funzioneranno.

Quando utilizzare le funzioni freccia

Usa le funzioni freccia principalmente nei luoghi in cui hai bisogno di una funzione anonima. Un esempio di tale scenario riguarda una funzione di callback. È meglio usare una funzione freccia quando si scrive una richiamata perché la sintassi è molto più semplice rispetto alla scrittura di una funzione completa.

Confronta questi due e decidi quale è più semplice:

funzionedimezzareNumeri(numeri) {
ritorno numeri.mappa(N => N / 2)
}
funzionedimezzareNumeri(numeri) {
ritorno numeri.mappa(funzione(N) {
ritorno N / 2
 })
}

Entrambi i casi passano una funzione di callback al metodo map(). Ma la prima richiamata è una funzione freccia mentre la seconda è una funzione completa. Puoi vedere come la prima funzione occupa meno righe di codice rispetto alla seconda funzione: tre vs. cinque.

L'altro momento in cui utilizzare le funzioni freccia è ogni volta che si desidera gestire una particolare sintassi "questa". L'oggetto "questo" cambierà a seconda che tu stia usando funzioni regolari o funzioni freccia per cose particolari.

Il seguente blocco di codice registra due listener di eventi "click" sull'oggetto documento. La prima istanza utilizza una funzione regolare come callback, mentre la seconda utilizza una funzione freccia. All'interno di entrambi i callback, il codice registra l'oggetto di esecuzione (this) e il target dell'evento:

documento.addEventListener("clic", funzione(e) {
consolare.tronco d'albero("FUNZIONE", Questo, e.bersaglio)
})
documento.addEventListener("clic", (e) => {
consolare.tronco d'albero("FRECCIA", Questo, e.bersaglio)
})

Se dovessi eseguire questo script, noterai che "questo" riferimento è diverso per entrambi. Per la funzione regolare, questa proprietà fa riferimento al documento, che è uguale a e.bersaglio proprietà. Ma per la funzione freccia, questo fa riferimento all'oggetto finestra.

Quando utilizzi una funzione regolare come callback, questa farà riferimento all'elemento in cui attiviamo l'evento. Ma quando usi una funzione freccia, questa parola chiave viene impostata automaticamente sull'oggetto finestra.

Ulteriori informazioni sulle funzioni freccia rispetto alle funzioni regolari

Ci sono molte altre sottili differenze tra le funzioni regolari e le funzioni freccia. La padronanza di entrambi i tipi di funzione è fondamentale per acquisire la padronanza di JavaScript. Impara quando usare l'uno e quando usare l'altro; capirai quindi le implicazioni dell'utilizzo di una funzione normale o di una funzione freccia nel tuo JavaScript.