Le funzioni freccia JavaScript possono renderti uno sviluppatore migliore

JavaScript ES6 ha portato cambiamenti entusiasmanti nel mondo dello sviluppo web. Nuove aggiunte al linguaggio JavaScript hanno portato nuove possibilità.

Una delle modifiche più popolari è stata l'aggiunta di funzioni freccia in JavaScript. Le funzioni freccia sono un nuovo modo per scrivere espressioni di funzioni JavaScript, offrendoti due modi diversi per creare funzioni nella tua app.

---

---

Le funzioni delle frecce richiedono un po' di adattamento se sei un esperto delle funzioni JavaScript tradizionali. Diamo un'occhiata a cosa sono, come funzionano e come ti avvantaggiano.

Cosa sono le funzioni freccia JavaScript?

Le funzioni freccia sono un nuovo modo per scrivere espressioni di funzione che erano incluso nel rilascio di JavaScript ES6 . Sono simili alle espressioni della funzione JavaScript che hai utilizzato, con alcune regole leggermente diverse.

Le funzioni freccia sono sempre funzioni anonime, hanno regole diverse per

this

e hanno una sintassi più semplice rispetto alle funzioni tradizionali.

come eliminare un file in uso

Queste funzioni utilizzano un nuovo token freccia:

---

---

=>

Se hai mai lavorato in Python, queste funzioni sono molto simili a Espressioni Python Lambda .

La sintassi per queste funzioni è un po' più pulita rispetto alle funzioni normali. Ci sono alcune nuove regole da tenere a mente:

---

---

• La parola chiave della funzione è stata rimossa
• La parola chiave di ritorno è facoltativa
• Le parentesi graffe sono facoltative

Ci sono molte piccole modifiche da esaminare, quindi iniziamo con un confronto di base delle espressioni di funzione.

Come utilizzare le funzioni freccia

Le funzioni delle frecce sono facili da usare. La comprensione delle funzioni delle frecce è più semplice se confrontata con le espressioni di funzione tradizionali.

Ecco un'espressione di funzione che aggiunge due numeri; prima utilizzando il metodo della funzione tradizionale:

let addnum = function(num1,num2){
return num1 + num2;
};
addnum(1,2);
>>3

È una funzione piuttosto semplice che accetta due argomenti e restituisce la somma.

Ecco l'espressione modificata in una funzione freccia:

let addnum = (num1,num2) => { return num1 + num2;};
addnum(1,2);
>>3

La sintassi della funzione è abbastanza diversa utilizzando una funzione freccia. La parola chiave function viene rimossa; il token freccia consente a JavaScript di sapere che stai scrivendo una funzione.

Le parentesi graffe e la parola chiave return sono ancora lì. Questi sono opzionali con le funzioni freccia. Ecco un esempio ancora più semplice della stessa funzione:

let addnum = (num1,num2) => num1 + num2;

La parola chiave return e le parentesi graffe non sono più presenti. Ciò che rimane è una funzione a una riga molto pulita che è quasi la metà del codice della funzione originale. Ottieni lo stesso risultato con molto meno codice scritto.

C'è di più nelle funzioni delle frecce. immergiamoci più a fondo in modo da avere un'idea migliore di ciò che possono fare.

Funzioni della funzione freccia

Le funzioni delle frecce hanno molti usi e caratteristiche diverse incluse.

come aggiungere la filigrana nel video

Funzioni regolari

Le funzioni freccia possono utilizzare uno o più argomenti. Se stai usando due o più argomenti devi racchiuderli tra parentesi. Se hai solo un argomento, non è necessario utilizzare le parentesi.

let square = x => x * x
square(2);
>>4

Le funzioni freccia possono essere utilizzate senza argomenti. Se non stai usando alcun argomento nella tua funzione, devi usare parentesi vuote.

let helloFunction = () => Console.log('Hello reader!');
helloFunction();
>>Hello reader!

Funzioni semplici come queste utilizzano molto meno codice. Immagina quanto sia più facile un complesso progetto come una presentazione JavaScript diventa quando hai un modo più semplice per scrivere funzioni.

Usando questo

Il concetto di

this

tende ad essere la parte più difficile dell'utilizzo di JavaScript. Le funzioni delle frecce fanno

this

più facile da usare.

Quando usi le funzioni freccia

this

sarà definito dalla funzione di inclusione. Questo può creare problemi che si presentano quando si creano funzioni nidificate e necessità

this

da applicare alla tua funzione principale

Ecco un esempio popolare che mostra la soluzione alternativa da utilizzare con le funzioni regolari.

function Person() {
var that = this; //You have to assign 'this' to a new variable
that.age = 0;
setInterval(function growUp() {
that.age++;
}, 1000);
}

Assegnando il valore di

this

a una variabile lo rende leggibile quando chiami una funzione all'interno della tua funzione principale. Questo è disordinato, ecco un modo migliore per farlo usando le funzioni delle frecce.

function Person(){
this.age = 0;
setInterval(() => {
this.age++; // Now you can use 'this' without a new variable declared
}, 1000);
}

Sebbene siano ottimi per le funzioni, non dovrebbero essere usati per creare metodi all'interno di un oggetto. Le funzioni freccia non usano l'ambito corretto per

this

.

Ecco un semplice oggetto che crea un metodo all'interno utilizzando una funzione freccia. Il metodo dovrebbe ridurre il condimenti variabile di uno quando viene chiamato. Invece non funziona per niente.

come salvare un video in streaming

let pizza = {
toppings: 5,
removeToppings: () => {
this.toppings--;
}
}
//A pizza object with 5 toppings
>pizza
>>{toppings: 5, removeToppings: f}
pizza.removeToppings(); //The method will not do anything to the object
>pizza
>>{toppings: 5, removeToppings: f} //Still has 5 toppings


Lavorare con gli array

Utilizzando le funzioni freccia è possibile semplificare il codice utilizzato per lavorare con i metodi array. Array e i metodi array sono parti molto importanti di JavaScript quindi li userai molto.

Ci sono alcuni metodi utili come il carta geografica metodo che esegue una funzione su tutti gli elementi di un array e restituisce il nuovo array.

let myArray = [1,2,3,4];
myArray.map(function(element){
return element + 1;
});
>> [2,3,4,5]

Questa è una funzione piuttosto semplice che aggiunge uno a ogni valore nell'array. Puoi scrivere la stessa funzione con meno codice usando una funzione freccia.

let myArray = [1,2,3,4];
myArray.map(element => {
return element + 1;
});
>> [2,3,4,5]

È molto più facile da leggere ora.

Creazione di oggetti letterali

Le funzioni freccia possono essere utilizzate per creare letterali oggetto in JavaScript. Le funzioni normali possono crearli, ma sono un po' più lunghi.

let createObject = function createName(first,last) {
return {
first: first,
last: last
};
};

Puoi creare lo stesso oggetto con una funzione freccia usando meno codice. Usando la notazione a freccia dovrai racchiudere il corpo della funzione tra parentesi. Ecco la sintassi migliorata con le funzioni freccia.

let createArrowObject = (first,last) => ({first:first, last:last});

Funzioni freccia JavaScript e oltre

Ora conosci diversi modi in cui le funzioni delle frecce JavaScript ti semplificano la vita come sviluppatore. Riducono la sintassi, ti danno più controllo usando

this

, semplifica la creazione di oggetti e offre un nuovo modo di lavorare con i metodi array.

L'introduzione delle funzioni freccia, insieme a molte altre funzionalità, in JavaScript ES6 mostra quanto sia diventato importante JavaScript nello sviluppo web. C'è molto di più che puoi fare però.

Vuoi saperne di più su JavaScript? Scopri questi framework JavaScript. Inoltre, il nostro Cheat sheet JavaScript fornisce preziose informazioni e ulteriori informazioni su come funziona JavaScript può renderti uno sviluppatore migliore.

Condividere Condividere Tweet E-mail 6 alternative udibili: le migliori app di audiolibri gratuite o economiche

Se non ti va di pagare per gli audiolibri, ecco alcune fantastiche app che ti consentono di ascoltarli gratuitamente e legalmente.

Leggi Avanti Argomenti correlati

• Programmazione
• JavaScript

Circa l'autore Anthony Grant(40 articoli pubblicati)

Anthony Grant è uno scrittore freelance che si occupa di programmazione e software. È un esperto di informatica che si diletta in programmazione, Excel, software e tecnologia.

Altro da Anthony Grant

Iscriviti alla nostra Newsletter

Iscriviti alla nostra newsletter per suggerimenti tecnici, recensioni, ebook gratuiti e offerte esclusive!

Clicca qui per iscriverti