Come definire le funzioni in JavaScript

Introduzione

Una funzione è un blocco di codice che esegue un’azione o restituisce un valore. Le funzioni sono codice personalizzato definito dai programmatori che sono riutilizzabili e possono quindi rendere i programmi più modulari ed efficienti.

In questo tutorial, impareremo diversi modi per definire una funzione, chiamare una funzione, e utilizzare i parametri di funzione in JavaScript.

Definizione di una funzione

Le funzioni vengono definite o dichiarate con la parola chiavefunction. Di seguito è riportata la sintassi per una funzione in JavaScript.,

function nameOfFunction() { // Code to be executed}

La dichiarazione inizia con la parola chiavefunction, seguita dal nome della funzione. I nomi delle funzioni seguono le stesse regole delle variabili: possono contenere lettere, numeri, caratteri di sottolineatura e segni di dollaro e sono spesso scritti in caso di cammello. Il nome è seguito da una serie di parentesi, che possono essere utilizzate per i parametri opzionali. Il codice della funzione è contenuto in parentesi graffe, proprio come un’istruzione for o un’istruzione if.,

Nel nostro primo esempio, faremo una dichiarazione di funzione per stampare un’istruzione di saluto alla console.

// Initialize greeting functionfunction greet() { console.log("Hello, World!");}

Qui abbiamo il codice da stampare Hello, World!alla console contenuta all’interno della funzione greet(). Tuttavia, non accadrà nulla e nessun codice verrà eseguito fino a quando non invocheremo o chiameremo la funzione. È possibile richiamare una funzione scrivendo il nome della funzione seguito dalle parentesi.

// Invoke the functiongreet();

Ora li metteremo insieme, definendo la nostra funzione e invocandola.

// Initialize greeting functionfunction greet() { console.log("Hello, World!");}// Invoke the functiongreet();

Con la chiamata per greet();, la funzione verrà eseguita e riceveremo il Hello, World! come output del programma.

Output
Hello, World!

Ora abbiamo il nostrogreet() codice contenuto in una funzione e possiamo riutilizzarlo tutte le volte che vogliamo.

Utilizzando i parametri, possiamo rendere il codice più dinamico.

Parametri di funzione

Nel nostro filegreet.js, abbiamo creato una funzione di base che stampaHello, World sulla console., Utilizzando i parametri, possiamo aggiungere funzionalità aggiuntive che renderanno il codice più flessibile. I parametri sono input che vengono passati in funzioni come nomi e si comportano come variabili locali.

Quando un utente accede a un’applicazione, potremmo volere che il programma li saluti per nome, invece di dire semplicemente ” Ciao, Mondo!”.

Aggiungeremo un parametro nella nostra funzione, chiamatoname, per rappresentare il nome della persona che viene accolta.,

// Initialize custom greeting functionfunction greet(name) { console.log(`Hello, ${name}!`);}

Il nome della funzione ègreet, e ora abbiamo un singolo parametro all’interno delle parentesi. Il nome del parametro segue le stesse regole della denominazione di una variabile. All’interno della funzione, invece di una stringa statica composta da Hello, World, abbiamo una stringa letterale del modello contenente il nostro parametro, che ora si comporta come una variabile locale.

Noterai che non abbiamo definito il nostro parametroname da nessuna parte. Gli assegniamo un valore quando invochiamo la nostra funzione., Supponendo che il nostro utente si chiami Sammy, chiameremo la funzione e posizioneremo il nome utente come argomento. L’argomento è il valore effettivo che viene passato nella funzione, in questo caso è la stringa "Sammy".

// Invoke greet function with "Sammy" as the argumentgreet("Sammy");

Il valore di"Sammy"viene passato alla funzione tramite il parametroname. Ora ogni volta che name viene utilizzato in tutta la funzione, rappresenterà il valore "Sammy". Ecco l’intero codice.

Quando eseguiamo il programma sopra, riceveremo il seguente output.

Output
Hello, Sammy!

Ora abbiamo un esempio di come una funzione può essere riutilizzata. In un esempio di mondo reale, la funzione estrarrebbe il nome utente da un database invece di fornire direttamente il nome come valore di argomento.

Oltre ai parametri, le variabili possono essere dichiarate all’interno delle funzioni. Queste variabili sono note come variabili locali e esisteranno solo all’interno dell’ambito del proprio blocco funzione., L’ambito variabile determina l’accessibilità delle variabili; le variabili definite all’interno di una funzione non sono accessibili dall’esterno della funzione, ma possono essere utilizzate tutte le volte che la loro funzione viene utilizzata in un programma.

Valori di ritorno

Più di un parametro può essere utilizzato in una funzione. Possiamo passare più valori in una funzione e restituire un valore. Creeremo una funzione per trovare la somma di due valori, rappresentati da xey.

// Initialize add functionfunction add(x, y) { return x + y;}// Invoke function to find the sumadd(9, 7);

il programma di cui sopra, abbiamo definito una funzione con i parametri x e y e poi superato i valori di 9 e 7 per la funzione. Quando eseguiamo il programma, riceveremo la somma di quei numeri come output.

Output
16

In questo caso, con 9 e 7 passato il sum() funzione, il programma ha restituito 16.,

Quando viene utilizzata la parola chiave return, la funzione cessa di essere eseguita e viene restituito il valore dell’espressione. Anche se in questo caso il browser visualizzerà il valore nella console, non è lo stesso che usare console.log() per stampare sulla console. Richiamando la funzione verrà emesso il valore esattamente dove è stata invocata la funzione. Questo valore può essere utilizzato immediatamente o inserito in una variabile.

Espressioni di funzione

Nell’ultima sezione, abbiamo usato una dichiarazione di funzione per ottenere la somma di due numeri e restituire quel valore., Possiamo anche creare un’espressione di funzione assegnando una funzione a una variabile.

Utilizzando il nostro stesso esempio di funzioneadd, possiamo applicare direttamente il valore restituito a una variabile, in questo casosum.

// Assign add function to sum constantconst sum = function add(x, y) { return x + y;}// Invoke function to find the sumsum(20, 5);

Output
25

Ora la costantesum è una funzione. Possiamo rendere questa espressione più concisa trasformandola in una funzione anonima, che è una funzione senza nome., Attualmente, la nostra funzione ha il nome add, ma con le espressioni di funzione non è necessario nominare la funzione e il nome viene solitamente omesso.

// Assign function to sum constantconst sum = function(x, y) { return x + y;}// Invoke function to find the sumsum(100, 3);

Output
103

In questo esempio, abbiamo rimosso il nome della funzione, che era add, e trasformato in una funzione anonima. Un’espressione di funzione con nome potrebbe essere utilizzata per aiutare nel debug, ma di solito viene omessa.,

Funzioni freccia

Finora, abbiamo esaminato come definire le funzioni usando la parola chiavefunction. Tuttavia, esiste un metodo più recente e più conciso per definire una funzione nota come espressioni di funzione freccia a partire da ECMAScript 6. Le funzioni Freccia, come sono comunemente conosciute, sono rappresentate da un segno uguale seguito da un segno maggiore di: =>.

Le funzioni freccia sono sempre funzioni anonime e un tipo di espressione di funzione. Possiamo creare un esempio di base per trovare il prodotto di due numeri.

// Define multiply functionconst multiply = (x, y) => { return x * y;}// Invoke function to find productmultiply(30, 4);

Output
120

Invece di scrivere la parola chiave function, usiamo la freccia => per indicare una funzione. Altrimenti, funziona in modo simile a un’espressione di funzione regolare, con alcune differenze avanzate che puoi leggere sotto le funzioni Freccia sulla Mozilla Developer Network.

Nel caso di un solo parametro, le parentesi possono essere escluse. In questo esempio, stiamo quadrando x, che richiede solo un numero da passare come argomento., Le parentesi sono state omesse.

// Define square functionconst square = x => { return x * x;}// Invoke function to find productsquare(8);

Output
64

Nota: in caso di assenza di parametri, è necessario un set vuoto di parentesi () nelle funzioni freccia.

Con questi esempi particolari che consistono solo in un’istruzionereturn, le funzioni arrow consentono di ridurre ulteriormente la sintassi. Se la funzione è solo una singola rigareturn, sia le parentesi graffe che l’istruzionereturn possono essere omesse, come si vede nell’esempio seguente.,

// Define square functionconst square = x => x * x;// Invoke function to find productsquare(10);

Output
100

Tutti e tre questi tipi di sintassi producono lo stesso output. È generalmente una questione di preferenza o standard di codifica aziendale decidere come strutturare le proprie funzioni.

Conclusione

In questo tutorial, abbiamo coperto le dichiarazioni di funzione e le espressioni di funzione, restituendo valori dalle funzioni, assegnando valori di funzione alle variabili, e le funzioni freccia ES6.

Le funzioni sono blocchi di codice che restituiscono un valore o eseguono un’azione, rendendo i programmi scalabili e modulari.