Quali sono le funzioni della freccia in JavaScript

Una delle migliori caratteristiche che Modern JavaScript ci ha fornito è il funzione freccia indicato attraverso "=>". Conosciuto anche come "freccia grassa"Viene fornito con vari vantaggi nella programmazione. Viene fornito con "questo" vincolo e utilizzando questi rende il codice più organizzato e più corto.

Queste funzioni sono il motivo per cui le funzioni della freccia sono rigorosamente preferite rispetto ad altri tipi di funzione della funzione. Ma anche con questi vantaggi arrivano anche alcuni svantaggi.

In questo articolo impareremo come scrivere le funzioni usando le funzioni della freccia in JavaScript e come convertire le tue semplici funzioni in funzioni di freccia. Ma prima di saltare in questo, capiamo alcuni concetti di base sulle funzioni di freccia in JavaScript.

Funzioni di freccia in JavaScript

ES6 ci ha fornito una delle funzionalità più importanti e utili che è una funzione freccia che aiuta nella dichiarazione delle funzioni in modo più semplice e riduce le righe di codice. La sintassi della funzione freccia è menzionata di seguito:

Sintassi:

let functionname = (p1, p2, ... pn) =>
dichiarazione (i)

Qui,

• funzione function: Il nome della funzione
• P1, P2, .. . pn: Questi sono i parametri delle funzioni
• dichiarazione (i): Le righe del codice JavaScript all'interno del corpo della funzione.

Usando questi possiamo convertire il nostro codice complesso in una versione più precisa e compatta. Di seguito sono riportate alcune delle funzionalità che fornisce:

Ritorno implicito

Attraverso questo l'uso di qualsiasi tipo di parentesi, funzioni o parole chiave di ritorno diventano opzionali, consentendo il ritorno implicito. Ecco un esempio:

// Funzione freccia
esempio.OnClick = (x, y, z) => questo.fare qualcosa()
// equivalente alla semplice funzione
esempio.OnClick = function (x, y, z)
Restituisci questo.fare qualcosa();
.legame (questo);

Attraverso l'uso delle funzioni della freccia, sta semplicemente permettendo una sola espressione e restituendola implicitamente.

"Questo" vincolante : Lega automaticamente la parola chiave "questo" al codice circondato da funzioni di freccia. Per esempio:

var x = this;
esempio.onClick = function ()
X.fare qualcosa();
;

A

esempio.OnClick = () => questo.fare qualcosa()

Inoltre, fornisce una versione più breve, più semplice e più compatta del tuo codice.

Come usare le funzioni della freccia in JavaScript

In JavaScript, possiamo usare le funzioni della freccia con parametri singoli, multipli o non. Sono utili per un'azione di una riga, riducendo il codice a più righe in meno righe e quindi salvando spazio. Capiamolo con l'esempio:

Funzione freccia javascript senza parametri

La sintassi seguente viene utilizzata quando la funzione freccia funziona con parametri zero.

Sintassi:

() => istruzione (s)

Qui, l'affermazione è il corpo della funzione contenente righe di codice.

Esempio:

let print = () => console.log ("ciao");
stampa();

Nell'esempio sopra, stiamo semplicemente stampando "ciao" usando la funzione freccia. Come puoi vedere, le funzioni della freccia non hanno alcun nome, quindi sono anche conosciute come funzioni anonime. Alla fine, non possiamo chiamarli o riutilizzarli di nuovo quando necessario in quanto non hanno alcun nome ma se dobbiamo chiamare o riutilizzare le funzioni della freccia, dobbiamo assegnarle a una variabile e quindi chiamarli usando quel nome variabile.

Qui, l'abbiamo assegnato alla variabile "stampa" e chiamato variabile nella seconda riga.

Produzione:

Funzione freccia JavaScript con parametro singolo

In caso di un singolo parametro, viene utilizzata la sintassi seguente:

Sintassi:

(p) => istruzione (s)

Oppure, puoi rimuovere le parentesi e riscriverla come:

p => istruzione (s)

Qui, l'affermazione è il corpo della funzione contenente righe di codice e P è il parametro passato.

Esempio:
In questo esempio la funzione freccia viene utilizzata come argomento del metodo Map () che converte un array di stringa in un array contenente la lunghezza della stringa:

Let Days = ['Monday', 'Martedì', 'Mercoledì'];
Lasciate lunghezze = giorni.mappa (giorni => giorni.lunghezza);
console.registro (lunghezze);

Produzione:

Funzione freccia JavaScript con più parametri

La sintassi seguente viene utilizzata quando si supera due o più parametri:

Sintassi:

(p1, p2,…, pn) => affermazione;

Qui, l'affermazione è il corpo della funzione contenente righe di codice e P è il parametro passato. In questo l'affermazione "=> è equivalente a:

=> istruzione return;

Nell'esempio seguente viene utilizzato un metodo di ordinamento () senza usare la funzione freccia, per ordinare i numeri in ordine decrescente:

let num = [3,1,5];
Num.sort (function (a, b)
restituire b - a;
);
console.log (num);

Questo può essere trasformato in una funzione freccia

let num = [3,1,5];
Num.Ordina ((a, b) => b - a);
console.log (num);

Nell'esempio sopra, la funzione ha una singola espressione "b-a", quindi restituisce semplicemente il risultato dell'espressione. Ma in caso di sintassi del blocco, devi menzionare la parola chiave di ritorno.

Produzione:

In questo modo, possiamo trasformare qualsiasi funzione in una funzione freccia. Ma ci sono due punti che devono essere tenuti a mente mentre si lavora con le funzioni della freccia:

• La funzione freccia non deve essere utilizzata per la creazione di metodi all'interno degli oggetti
• Le funzioni della freccia non possono essere utilizzate come costruttore.

Conclusione

Le funzioni della freccia sono il modo più semplice per dichiarare qualsiasi funzione e riduce le linee dei codici, senza influire sulla funzionalità del codice. In questo articolo abbiamo appreso che le funzioni della freccia sono estremamente utili, come convertono una sintassi complessa e una lunga linea di codice in codice più compatto e più semplice. Inoltre, non è necessario nominare una funzione freccia a meno che non si chiama o riutilizzi la funzione.

Inizialmente, le funzioni di freccia potrebbero sembrare difficili ma con il tempo a quando si comprende il concetto, diventano più facili e convenienti da implementare. Quindi, convertire il tuo codice in meno righe con una logica più semplice.