I lettori come te aiutano a sostenere MUO. Quando effettui un acquisto utilizzando i link sul nostro sito, potremmo guadagnare una commissione di affiliazione. Per saperne di più.

Una funzione è un pezzo di codice riutilizzabile che viene eseguito quando lo invochi. Le funzioni consentono di riutilizzare il codice, rendendolo più modulare e più facile da mantenere.

Esistono diversi modi per creare funzioni in JavaScript. Qui imparerai i diversi modi per creare funzioni e come usarle.

Dichiarazioni di funzione: il modo semplice

Un modo per creare funzioni in JavaScript è attraverso le dichiarazioni di funzione. Una dichiarazione di funzione è una funzione in JavaScript che segue la sintassi seguente.

funzionenomefunzione(parametri) {
// il codice va qui...
ritorno"Questa è una dichiarazione di funzione";
}

I componenti del blocco di codice di cui sopra includono:

  • IL funzione parola chiave: questa parola chiave dichiara una funzione.
  • nomefunzione: Questo è il nome della funzione. In pratica, dovrebbe essere il più descrittivo e significativo possibile, indicando cosa fa la funzione.
    • instagram viewer
  • parametri: Questo rappresenta i parametri della funzione. I parametri sono un elenco facoltativo di variabili che puoi passare a una funzione quando la chiami.
  • Il corpo della funzione: contiene il codice che la funzione eseguirà quando la chiami. È circondato da parentesi graffe {} e può contenere qualsiasi codice JavaScript valido.
  • IL ritorno istruzione: questa istruzione interrompe l'esecuzione di una funzione e restituisce il valore specificato. Nel caso precedente, chiamando la funzione restituirebbe la stringa "Questa è una dichiarazione di funzione".

Ad esempio, la seguente dichiarazione di funzione prende tre numeri come parametri e ne restituisce la somma.

funzioneaddTreNumeri(a, b, c) {
ritorno a + b + c;
}

Per chiamare una dichiarazione di funzione in JavaScript, scrivi il nome della funzione seguito da una serie di parentesi (). Se la funzione accetta dei parametri, passali come argomenti tra parentesi.

Per esempio:

addTreNumeri(1, 2, 3) // 6

Il blocco di codice sopra chiama il file addTreNumero funziona e passa 1, 2 e 3 come argomenti alla funzione. Se esegui questo codice, restituirà il valore 6.

Paranchi JavaScript dichiarazioni di funzione, il che significa che puoi chiamarle prima di definirle.

Per esempio:

isHoisted(); // La funzione viene sollevata
funzioneisHoisted() {
consolare.tronco d'albero("La funzione è sollevata");
ritornoVERO;
}

Come mostrato nel blocco di codice sopra, chiamando isHoisted prima di definirlo non genererebbe un errore.

Espressioni di funzioni: funzioni come valori

In JavaScript, puoi definire una funzione come un'espressione. È quindi possibile assegnare il valore della funzione a una variabile o utilizzarlo come argomento per un'altra funzione.

Sono anche conosciute come funzioni anonime poiché non hanno nomi e puoi chiamarle solo dalla variabile a cui le hai assegnate.

Di seguito è riportata la sintassi per un'espressione di funzione:

cost nomefunzione = funzione () {
ritorno"Espressione di funzione";
};

Per chiamare un'espressione di funzione in JavaScript, scrivi il nome della variabile che hai assegnato alla funzione seguito da una serie di parentesi (). Se la funzione accetta dei parametri, passali come argomenti tra parentesi.

Per esempio:

nomefunzione(); // Espressione di funzione

Le espressioni di funzione sono utili quando si creano funzioni che vengono eseguite in altre funzioni. Esempi tipici includono i gestori di eventi e le relative richiamate.

Per esempio:

button.addEventListener("clic", funzione (evento) {
consolare.tronco d'albero("Hai premuto un pulsante!");
});

L'esempio precedente utilizzava un'espressione di funzione che accetta un evento argomento come callback al addEventListener funzione. Non è necessario chiamare la funzione in modo esplicito quando si utilizza un'espressione di funzione come callback. Viene chiamato automaticamente dalla sua funzione genitore.

Nel caso precedente, quando il listener di eventi riceve a clic evento, chiama la funzione di callback e passa il file evento oggetto come argomento.

A differenza delle dichiarazioni di funzione, le espressioni di funzione non vengono sollevate, quindi non puoi chiamarle prima di definirle. Il tentativo di accedere a un'espressione di funzione prima di definirla si tradurrà in un Errore di riferimento.

Per esempio:

isHoisted(); // ReferenceError: impossibile accedere a 'isHoisted' prima dell'inizializzazione
cost isHoisted = funzione () {
consolare.tronco d'albero("La funzione è sollevata");
};

Funzioni freccia: compatte e limitate

ES6 ha introdotto una scorciatoia per scrivere funzioni anonime in JavaScript chiamate funzioni freccia. Hanno una sintassi concisa che può rendere il tuo codice più leggibile, specialmente quando si tratta di funzioni brevi a riga singola.

A differenza di altri metodi di creazione di funzioni, le funzioni freccia non richiedono l'estensione funzione parola chiave. Un'espressione di funzione freccia è composta da tre parti:

  • Una coppia di parentesi (()) contenente i parametri. È possibile omettere le parentesi se la funzione ha un solo parametro.
  • Una freccia (=>), che consiste in un segno di uguale (=) e un segno maggiore di (>).
  • Un paio di parentesi graffe contenenti il ​​corpo della funzione. È possibile omettere le parentesi graffe se la funzione è costituita da un'unica espressione.

Per esempio:

// Singolo parametro, ritorno implicito
cost nomefunzione = parametro =>consolare.tronco d'albero("Funzione freccia parametro singolo")
// Più parametri, ritorno esplicito
cost nomefunzione = (parametro_1, parametro_2) => {
ritorno"Funzione freccia per più parametri"
};

Quando si omettono le parentesi graffe, la funzione freccia restituisce implicitamente la singola espressione, quindi non è necessario il ritorno parola chiave. D'altra parte, se non si omettono le parentesi graffe, è necessario restituire esplicitamente un valore utilizzando il ritorno parola chiave.

Anche le funzioni della freccia hanno un diverso Questo vincolante rispetto alle normali funzioni. Nelle funzioni regolari, il valore di Questo dipende da come si chiama la funzione. In una funzione freccia, Questo è sempre legato al Questo valore dell'ambito circostante.

Per esempio:

cost pippo = {
 nome: "Dave",
 salutare: funzione () {
 setTimeout(() => {
consolare.tronco d'albero(`Ciao, mi chiamo ${Questo.nome}`);
 }, 1000);
 },
};
foo.greet(); // Registra "Ciao, mi chiamo Dave" dopo 1 secondo

Nell'esempio sopra, la funzione freccia all'interno di salutare metodo ha accesso a questo nome, anche se il setTimeout la funzione lo chiama. Una funzione normale avrebbe il suo Questo legato all'oggetto globale.

Come suggerisce il nome, una funzione immediatamente invocata (IIFE) è una funzione che viene eseguita non appena viene definita.

Ecco la struttura di un IIFE:

(funzione () {
// codice qui
})();
(() => {
// codice qui
})();
(funzione (param_1, param_2) {
consolare.log (param_1 * param_2);
})(2, 3);

Un IIFE è costituito da un'espressione di funzione racchiusa all'interno di una coppia di parentesi. Seguilo con un paio di parentesi all'esterno del recinto per richiamare la funzione.

È possibile utilizzare gli IIFE per creare ambiti, nascondere dettagli di implementazione e condividere dati tra più script. Una volta erano usati come a sistema di moduli in JavaScript.

Creazione di una funzione in molti modi diversi

Capire come creare funzioni in JavaScript è fondamentale. Questo è vero per una funzione di base che esegue un semplice calcolo o una funzione sofisticata che interagisce con altre parti del codice.

Puoi utilizzare le tecniche discusse sopra per creare funzioni in JavaScript e strutturare e organizzare il tuo codice. Seleziona l'approccio che meglio si adatta alle tue esigenze, poiché ognuno ha vari vantaggi e applicazioni.