Introduzione
Una funzione è un blocco di codice che esegue un'azione o restituisce un valore. Le funzioni sono codici personalizzati definiti 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 della funzione in JavaScript.
Definizione di una funzione
Le funzioni sono definite o dichiarate con la parola chiave function. Di seguito è la sintassi per una funzione in JavaScript.
function nameOfFunction() {
// Code to be executed
}La dichiarazione inizia con la parola chiave function, seguita dal nome della funzione. I nomi delle funzioni seguono le stesse regole delle variabili: possono contenere lettere, numeri, caratteri di sottolineatura e simboli di dollaro e sono spesso scritti in maiuscolo. Il nome è seguito da una serie di parentesi che possono essere utilizzate per parametri opzionali. Il codice della funzione è racchiuso tra parentesi graffe, proprio come un'istruzione for o un'istruzione if.
Nel nostro primo esempio, faremo una dichiarazione di funzione (function declaration) per stampare un'istruzione di greeting sulla console.
// Initialize greeting function
function greet() {
console.log("Hello, World!");
}Qui abbiamo il codice per stampare Hello, World! sulla console contenuta all'interno della funzione greet(). Tuttavia, non accadrà nulla e nessun codice verrà eseguito fino a quando non invocheremo (invoke) o chiameremo la funzione. È possibile richiamare una funzione scrivendo il nome della funzione seguito dalle parentesi.
// Invoke the function
greet();Ora li metteremo insieme, definendo la nostra funzione e invocandola.
// Initialize greeting function
function greet() {
console.log("Hello, World!");
}
// Invoke the function
greet();Con la richiesta di greet();, la funzione verrà eseguita e riceveremo l'output del programma Hello, World!.
Hello, World!
Ora abbiamo il nostro codice greet() contenuto in una funzione e possiamo riutilizzarlo tutte le volte che vogliamo.
Usando i parametri, possiamo rendere il codice più dinamico.
Parametri di funzione
Nel nostro file greet.js, abbiamo creato una funzione di base che stampa Hello, World sulla console. Usando i parametri, possiamo aggiungere funzionalità aggiuntive che renderanno il codice più flessibile. I parametri (Parameters) sono input che vengono passati a funzioni come nomi e si comportano come variabili locali.
Quando un utente accede a un'applicazione, potremmo volere che il programma li "saluta per nome", invece di dire semplicemente "Hello, World!".
Aggiungeremo un parametro nella nostra funzione, chiamato name, per rappresentare il nome della persona che viene accolta.
// Initialize custom greeting function
function greet(name) {
console.log(`Hello, ${name}!`);
}Il nome della funzione è greet e ora abbiamo un singolo parametro tra 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 template literal contenente il nostro parametro, che ora si comporta come una variabile locale.
Noterai che non abbiamo definito i nostri parametri name da nessuna parte. Gli assegniamo un valore quando invochiamo la nostra funzione. Supponendo che il nostro utente si chiami Noviello, chiameremo la funzione e inseriremo il nome utente come argomento (argument). L'argomento è il valore effettivo che viene passato alla funzione, in questo caso è la stringa "Noviello".
// Invoke greet function with "Noviello" as the argument
greet("Noviello");Il valore di "Noviello" viene passato nella funzione tramite il parametro name. Ora ogni volta che name viene utilizzato in tutta la funzione, rappresenterà il valore "Noviello". Ecco l'intero codice.
// Initialize custom greeting function
function greet(name) {
console.log(`Hello, ${name}!`);
}
// Invoke greet function with "Noviello" as the argument
greet("Noviello");Quando avremo eseguito il programma sopra, riceveremo il seguente output.
Hello, Noviello!
Ora abbiamo un esempio di come una funzione può essere riutilizzata. In un esempio del mondo reale, la funzione estrarrebbe il nome utente da un database invece di fornire direttamente il nome come valore dell'argomento.
Oltre ai parametri, le variabili possono essere dichiarate all'interno delle funzioni. Queste variabili sono note come variabili locali (local variables) e esistono solo nell'ambito del proprio blocco funzione. L'ambito delle variabili 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
È possibile utilizzare più di un parametro 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 x e y.
// Initialize add function
function add(x, y) {
return x + y;
}
// Invoke function to find the sum
add(9, 7);Nel programma sopra, abbiamo definito una funzione con i parametri x e y, quindi, passati i valori di 9 e 7 alla funzione. Quando eseguiamo il programma, riceveremo la somma di quei numeri come output.
16
In questo caso, con 9 e 7 passato alla funzione sum(), il programma è torna 16.
Quando viene utilizzata la parola chiave return, la funzione cessa di essere eseguita e viene restituito il valore dell'espressione. Sebbene in questo caso il browser visualizzerà il valore nella console, non è lo stesso che usare console.log() per stampare sulla console. Invocando la funzione verrà emesso il valore esattamente nel punto in cui è stata invocata la funzione. Questo valore può essere utilizzato immediatamente o inserito in una variabile.
Espressioni di funzioni
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 (function expression) assegnando una funzione a una variabile.
Utilizzando il nostro stesso esempio di funzione add, possiamo applicare direttamente il valore restituito a una variabile, in questo caso sum.
// Assign add function to sum constant
const sum = function add(x, y) {
return x + y;
}
// Invoke function to find the sum
sum(20, 5);25
Ora la costante sum è una funzione. Possiamo rendere questa espressione più concisa trasformandola in una funzione anonima (anonymous function), 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 constant
const sum = function(x, y) {
return x + y;
}
// Invoke function to find the sum
sum(100, 3);103
In questo esempio, abbiamo rimosso il nome della funzione, che era add, e lo abbiamo trasformato in una funzione anonima. Un'espressione di funzione denominata può essere utilizzata per facilitare il debug, ma di solito viene omessa.
Funzioni arrow
Finora abbiamo esaminato come definire le funzioni utilizzando la parola chiave function. Tuttavia, esiste un metodo più nuovo e più conciso per definire una funzione nota come espressioni di funzioni a freccia (arrow function expressions). Funzioni Arrow, come sono comunemente noti, sono rappresentati dal segno uguale seguito da un segno di maggiore: =>.
Le funzioni arrow 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 function
const multiply = (x, y) => {
return x * y;
}
// Invoke function to find product
multiply(30, 4);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 di cui puoi leggere in Funzioni Arrow sulla rete di sviluppatori Mozilla.
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 function
const square = x => {
return x * x;
}
// Invoke function to find product
square(8);64
Nota: in caso di assenza di parametri, è richiesto un set vuoto di parentesi () nelle funzioni arrow.Con questi esempi particolari che consistono solo in un'istruzione return, le funzioni freccia consentono di ridurre ulteriormente la sintassi. Se la funzione è solo una riga return, è possibile omettere sia le parentesi graffe che la frase return, come mostrato nell'esempio seguente.
// Define square function
const square = x => x * x;
// Invoke function to find product
square(10);100
Tutti e tre questi tipi di sintassi producono lo stesso output. È generalmente una questione di preferenza o standard di codifica aziendale per decidere come strutturare le proprie funzioni.
Conclusione
In questo tutorial, abbiamo coperto le dichiarazioni di funzioni e le espressioni di funzioni, restituendo valori da funzioni, assegnando valori di funzione a variabili e funzioni di freccia ES6.
Le funzioni sono blocchi di codice che restituiscono un valore o eseguono un'azione, rendendo i programmi scalabili e modulari.
