Esistono ulteriori differenze tra i due oltre alla sintassi.

Come quasi tutti i linguaggi di programmazione moderni, JavaScript offre modi per creare funzioni per consentire la riusabilità del codice. Per coloro che non hanno familiarità con il linguaggio, ci sono due modi diversi per dichiarare una funzione in JavaScript.

In origine, il funzione è stata utilizzata la parola chiave e, successivamente, è stata creata la sintassi della freccia. Sebbene differiscano nell'accessibilità dell'ambito, sia la parola chiave della funzione che la sintassi della freccia creano risultati simili.

L'impossibilità di distinguere tra i due può causare problemi e portare a un utilizzo errato. È una necessità per il moderno sviluppatore JS capire come ogni dichiarazione di funzione influisce sull'ambito e sulla visibilità.

Quali sono le funzioni freccia di JavaScript?

Le funzioni della freccia di JavaScript sono un modo alternativo per definire funzioni che non usano il default funzione parola chiave:

funzionelogMessage(Messaggio) 





instagram viewer

{
consolare.log (messaggio);
}
cost logMessage = (Messaggio) => {
consolare.log (messaggio);
}
cost logMessage = Messaggio =>consolare.log (messaggio);

Sopra, puoi vedere lo stesso messaggio scritto in tre modi diversi. Il primo utilizza il normale metodo di dichiarazione della funzione. I prossimi due mostrano i due modi per utilizzare le funzioni freccia di ES6.

JavaScript ha adottato per la prima volta la sintassi della funzione freccia con il rilascio degli standard ECMAScript 2015. Le funzioni freccia offrivano un modo pulito e conciso per creare rapidamente funzioni e una soluzione interessante a diversi problemi di ambito di lunga durata all'interno di JavaScript.

Queste funzionalità hanno rapidamente reso le funzioni freccia un successo tra molti sviluppatori. I programmatori che esaminano una moderna base di codice JavaScript hanno la stessa probabilità di trovare funzioni freccia come funzioni normali.

In che modo le funzioni freccia sono diverse dalle funzioni normali in JavaScript?

A prima vista, le funzioni freccia non sembrano differire molto dalle funzioni dichiarate utilizzando la parola chiave function. Al di fuori della sintassi, entrambi incapsulano un insieme riutilizzabile di azioni che possono essere chiamate da altre parti del codice.

Nonostante le somiglianze tra i due, tuttavia, ci sono alcune differenze di cui gli sviluppatori devono essere consapevoli.

Differenza di portata

Ogni volta che una funzione regolare viene dichiarata in JavaScript, that funzione funziona come una chiusura che crea il proprio ambito. Ciò può causare un problema quando si utilizzano determinate funzioni specializzate come setTimeout E setInterval.

Prima di ES6, esisteva un numero significativo di soluzioni alternative che avrebbero portato gli elementi a livelli di ambito più elevati per l'utilizzo nei callback. Questi hack funzionavano, ma spesso erano difficili da capire e potevano causare problemi con la sovrascrittura di alcune variabili.

Le funzioni freccia hanno risolto entrambi i problemi in modo semplice ed elegante. Quando una funzione freccia viene utilizzata come parte di un callback, ha accesso allo stesso ambito della funzione da cui è stata chiamata.

Ciò ha consentito di utilizzare le funzioni come callback senza perdere l'accesso al contesto in cui è stato chiamato l'evento originale. Come semplice test per mostrare questo principio in azione, puoi impostare una funzione di messaggistica ritardata come quella qui sotto:

funzioneritardatoMessage(messaggio, ritardo) {

 setTimeout(funzione(Messaggio) {
consolare.log (messaggio);
 }, ritardo);
}
messaggio ritardato("Ciao mondo", 1000);

La funzione è semplice, accettare Messaggio E ritardo in millisecondi. Dopo che il ritardo è passato, dovrebbe registrare il messaggio nella console. Tuttavia, quando il codice viene eseguito, non definito verrà registrato nella console invece del messaggio passato.

Quando viene eseguita la funzione di callback, l'ambito cambia e il messaggio originale non è più accessibile. L'utilizzo del messaggio dall'interno della chiusura richiede che il messaggio venga sollevato su una variabile globale, il che potrebbe comportarne la sovrascrittura prima della richiamata.

Una funzione freccia è una soluzione adeguata per questo problema. Se sostituisci il primo argomento per setTimeout, l'ambito può essere mantenuto e la funzione avrà accesso al messaggio passato a ritardatoMessage.

funzioneritardatoMessage(messaggio, ritardo) {

 setTimeout(() => {
consolare.log (messaggio);
 }, ritardo);
}
messaggio ritardato("Ciao mondo", 1000);

Ora, quando eseguito, il ritardatoMessage funzione registrerà il messaggio. Inoltre, ciò consente di accodare più messaggi con ritardi diversi e si verificheranno comunque all'ora corretta.

Ciò è dovuto al fatto che ogni volta ritardatoMessage viene utilizzato, genera il proprio ambito con la propria copia della funzione freccia interna.

Leggibilità del codice

Sebbene le funzioni freccia siano utili come callback, vengono utilizzate anche per mantenere il codice pulito e conciso. Nella sezione precedente, puoi vedere che l'utilizzo di una funzione freccia rende immediatamente ovvio cosa accadrà quando il ritardatoMessage viene chiamata la funzione.

Man mano che le funzioni diventano più complesse, avere un po' di chiarezza può rendere il codice molto più leggibile. Quando si compongono oggetti, questo può semplificare il codice quando si aggiungono funzioni brevi:

classecontatore{
 _conteggio = 0;
 incremento = () => {
Questo._count += 1;
 }
 decremento = () => {
Questo._count -= 1;
 }
 contare = () => {
ritornoQuesto._contare;
 }
}
permettere ct = nuovo contatore();

Ruolo nella programmazione orientata agli oggetti

Sebbene le funzioni freccia di JavaScript siano parte integrante della programmazione funzionale, hanno anche un posto in programmazione orientata agli oggetti. Le funzioni freccia possono essere utilizzate all'interno delle dichiarazioni di classe:

classeorderLineItem{
 _LineItemID = 0;
 _Prodotto = {};
 _Qtà = 1;
costruttore(Prodotto) {
Questo._LineItemID = crypto.randomUUID();
Questo._Prodotto = prodotto
 }
 changeLineItemQuantity = (nuovoQtà) => {
Questo._Qtà = newQtà;
 }
}

L'utilizzo di una funzione freccia per dichiarare i metodi all'interno di una dichiarazione di classe non modifica il comportamento della funzione all'interno della classe. Al di fuori della classe, tuttavia, espone la funzione, consentendone l'utilizzo da parte di altre classi.

Non è possibile accedere alle funzioni regolari al di fuori della dichiarazione di classe senza essere chiamate. Ciò significa che mentre altre dichiarazioni di classe possono ereditare queste funzioni, non è possibile accedervi direttamente per comporre altre classi.

Quando dovresti utilizzare le funzioni freccia di JavaScript?

Le funzioni freccia di JavaScript sono una funzionalità incredibilmente potente che offre agli sviluppatori un controllo molto maggiore sull'ambito a cui ha accesso una funzione. Sapere quando un callback dovrebbe avere accesso all'ambito del genitore e quando non dovrebbe, può aiutare uno sviluppatore a determinare quale tipo di dichiarazione usare.

Le funzioni freccia offrono ai programmatori un modo chiaro e conciso per scrivere callback senza esporre parti dell'ambito che dovrebbero essere nascoste. Consentono inoltre la creazione di composizioni pulite e semplici, consentendo ulteriormente la programmazione funzionale in JavaScript.

Gli sviluppatori JS devono essere consapevoli delle differenze tra le due sintassi ed essere consapevoli di quale sintassi è appropriata quando dichiarano le loro funzioni.