Robert Whitney
Funzioni JavaScript – indice:
Fino ad ora abbiamo visto aspetti piuttosto importanti di JavaScript insieme ad alcune delle migliori pratiche di codifica più comuni che dovremmo seguire. Queste cosiddette pratiche esistono per un motivo e, mentre le utilizziamo, ci risparmieranno molti errori e frustrazioni che altrimenti affronteremmo. Una delle migliori pratiche che abbiamo visto è stata seguire il principio DRY, che sostanzialmente dice: Non ripeterti. Un modo in cui abbiamo applicato questo principio è stato utilizzare i cicli nel nostro programma, più specificamente “cicli for” che ci hanno fatto risparmiare molto tempo e codice. In questo tutorial vedremo un altro importante mattone nella programmazione, e si chiama “funzioni”.
Tipi di funzioni JavaScript
Le funzioni sono estremamente comuni nella programmazione, e questo include anche JavaScript. Infatti, sono così comuni che alcuni framework JavaScript come React sono stati costruiti attorno all’utilizzo delle funzioni JavaScript come un elemento fondamentale per creare il front end dei siti web. E lo hanno fatto per una buona ragione. Le funzioni JavaScript offrono un’alta flessibilità, fornendo al contempo codice altamente prevedibile e modulare. E questo si traduce in codice molto più chiaro con meno ripetizioni e molti meno errori. Una delle prime cose che dovresti sapere sulle funzioni è che ci sono due principali tipi di funzioni. Esse sono “funzioni pure” e “funzioni impure”. In generale, vorremo utilizzare funzioni pure dove possiamo, il più possibile. Le funzioni pure offrono numerosi vantaggi che le rendono molto più facili da gestire rispetto alle funzioni impure. Vediamo prima le funzioni JavaScript pure e poi approfondiamo anche le funzioni impure.
Funzioni pure in JavaScript
Le funzioni pure sono essenzialmente funzioni che seguono determinate regole. E poiché seguono queste regole, sono altamente prevedibili, più facili da debug in un sistema più grande, modulari insieme ad alcuni altri vantaggi.
Una funzione pura riceve un input e restituisce un output. Non modifica gli input direttamente né interagisce con l’ambiente in alcun altro modo. Detto ciò, non ti invia avvisi, non ti fornisce una dichiarazione mentre fa qualcos’altro, né interagisce con il suo ambiente in alcun altro modo.
In questo modo, quando lavori con una funzione pura, sai che indipendentemente da dove stai eseguendo il tuo codice o quando lo stai eseguendo, finché fornisci gli stessi input, otterrai gli stessi output. Vediamo questo con alcuni esempi.
// raddoppia il numero iniziale
function double(num){
return num * 2;
}
// triplica il numero iniziale
function triple(num){
return num * 3;
}
// aggiungi 100 al numero iniziale
function add100(num){
return num + 100;
}
// aggiungi due numeri
function addTwoNums(num1, num2){
const sum = num1 + num2;
return sum;
}
// moltiplica due numeri
function multiplyTwoNums(num1, num2){
const total = num1 * num2;
return total;
}
Tutte le funzioni JavaScript sopra sono funzioni pure. A uno sguardo più attento, potresti aver notato il modello che utilizziamo quando creiamo funzioni pure. Il primo passo è scrivere la parola chiave “function” per dire a JavaScript che vogliamo definire una funzione.
Successivamente, diamo alla funzione un nome, preferibilmente questo nome dovrebbe essere breve, ma abbastanza descrittivo affinché qualcuno che passa di lì possa capire cosa fa la funzione. Ad esempio, se stiamo aggiungendo 100 a un numero, possiamo chiamare la funzione “add100”, se stiamo raddoppiando un numero, possiamo chiamare la funzione “double” e così via.
Una volta che abbiamo nominato la funzione in modo appropriato, il passo successivo è fornire alcuni input. Forniamo gli input tra parentesi e se abbiamo più input li separiamo con una virgola. Proprio come abbiamo fatto nella funzione “multiplyTwoNums”. (Inoltre, come nota a margine, i numeri sono comunemente chiamati “nums” per abbreviare nella programmazione, quindi quando nominiamo una funzione possiamo utilizzare questa conoscenza comune per avere nomi di funzioni brevi ma descrittivi.)
Gli input che forniamo alla funzione sono anche comunemente chiamati “parametri”, quando creiamo le funzioni JavaScript decidiamo quanti parametri avrà la funzione. Quando decidiamo di utilizzare la funzione, forniamo quei parametri con “valori”. Quei valori che forniamo quando utilizziamo la funzione sono anche comunemente chiamati “argomenti”. Quindi, quando forniamo un input per la funzione, questo processo è anche chiamato “passare argomenti” a una funzione. Vediamo alcuni esempi di questo.
// prima definiamo la funzione che prende un numero
// e lo moltiplica per 10
function multiplyBy10(num1){
return num1 * 10;
}
// ora chiamiamo quella funzione // salviamo il risultato in una costante // e mostriamo i risultati const bigNum = multiplyBy10(3); alert(bigNum); // num1 qui è il parametro. // abbiamo passato il valore 3 come argomento alla funzione. // abbiamo salvato i risultati della funzione // in una costante chiamata bigNum. // abbiamo mostrato la costante chiamata bigNum all'utente.
Come hai visto nel codice sopra, anche quando vogliamo mostrare qualcosa all’utente, manteniamo la funzione separata dalla funzione di avviso. Se dovessimo mostrare i risultati all’utente all’interno della funzione, questo richiederebbe alla funzione di interagire con altre parti del computer e renderebbe la nostra funzione impura. Quindi, in generale, vogliamo utilizzare le funzioni per fornire loro input e aspettarci un valore restituito. Quando otteniamo quel valore restituito, allora possiamo effettivamente mostrarlo o eseguire altre funzioni JavaScript con esso a seconda delle nostre esigenze, ma il punto è mantenere separate le preoccupazioni di visualizzare i risultati e calcolare i risultati.
Quindi, fino ad ora abbiamo visto che possiamo utilizzare la parola chiave “function” per iniziare a dichiarare la funzione, poi nominiamo la funzione in modo appropriato, poi apriamo e chiudiamo le parentesi e diciamo alla funzione quali parametri richiederà, poi apriamo le parentesi graffe e diciamo alla funzione cosa vogliamo che faccia, una volta che arriviamo a un risultato restituiamo quel risultato con la parola chiave “return”. E poi chiudiamo le parentesi graffe. Tutti questi passaggi erano necessari per definire una funzione pura. Ora che abbiamo una funzione possiamo utilizzare una funzione in altre parti del nostro programma. Utilizzare una funzione è comunemente chiamato “chiamare una funzione”.
Chiamare una funzione è molto più semplice che dichiarare la funzione. Per chiamare una funzione possiamo utilizzare il suo nome, aprire le parentesi, passarle alcuni argomenti e chiudere le parentesi. Quando facciamo questo, la funzione ci restituirà il valore di ritorno che abbiamo definito. A seconda di cosa vogliamo fare con quel valore restituito, possiamo assegnarlo a una variabile o a una costante, possiamo eseguire ulteriori calcoli con esso, possiamo inviarlo ad altri computer, o possiamo anche mostrare direttamente i risultati. Vediamo alcuni esempi di questo.
// iniziamo con una funzione che prende due argomenti
// li moltiplica e restituisce il risultato.
// possiamo restituire direttamente il risultato,
// oppure possiamo creare temporaneamente una costante
// e restituire anche quella costante.
function multiplyTwoNums(num1, num2) {
const total = num1 * num2;
return total;
}
function multiplyTwoNumsSecondVersion(num1, num2){
return num1 * num2;
// le due funzioni sopra ci daranno esattamente lo stesso risultato
const result1 = multiplyTwoNums(3, 5);
const result2 = multiplyTwoNumsSecondVersion(3, 5);
// possiamo controllare l'uguaglianza dei risultati delle funzioni
// con un'altra funzione
function checkEquality(number1, number2){
return number1 === number2;
// se i risultati di entrambe le funzioni sono gli stessi,
// la funzione checkEquality restituirà "true"
// come tipo di dato booleano
const isEqual = checkEquality(result1, result2);
// ora possiamo utilizzare quel valore booleano per mostrare un messaggio
if (isEqual){
alert("Entrambi danno lo stesso risultato!");
} else {
alert("Non sono la stessa cosa!");
}
Eseguire il codice sopra in Chrome Snippets ci darebbe il seguente risultato:
Fino ad ora abbiamo lavorato con funzioni pure, e questo è di solito ciò a cui puntiamo per la maggior parte del tempo. Ma ciò non significa che lavorerai solo con funzioni pure. Una volta che hai compreso le funzioni pure, le funzioni impure sono relativamente più facili. Quando definiamo una funzione, o dichiariamo una funzione, dopo aver utilizzato il nome della funzione, in realtà non dobbiamo passarle alcun parametro. In quel caso, lasceremo le parentesi vuote, non dobbiamo nemmeno restituire qualcosa dalla funzione.
Ancora di più, poiché possiamo scrivere qualsiasi codice all’interno delle parentesi graffe di una funzione, possiamo interagire con il mondo esterno, inviare e ricevere dati, modificare dati esistenti, visualizzare avvisi e così via. Fare tutto questo non è vietato, e aggiungere dichiarazioni console.log durante il processo di sviluppo del codice può essere davvero utile. Ecco perché non ci allontaniamo direttamente dalle funzioni impure, ma poiché possono causare molta frizione ed errori nel codice, rendendo il tuo codice più difficile da testare, puntiamo a separare i compiti in funzioni JavaScript pure il più possibile. Anche quando usiamo per rendere le nostre funzioni impure aggiungendo avvisi o dichiarazioni console.log, di solito vogliamo rimuoverle dal nostro codice o eliminandole o commentandole.
Vediamo alcuni esempi di questo.
// saluta l'utente con una funzione impura
// non prende argomenti e non restituisce nulla
// interagisce anche con il mondo esterno
// mostrando un avviso
function greet(){
alert("Ciao Utente!");
}
// nota che i risultati non verranno mostrati
// a meno che non chiamiamo la funzione
greet();
// eseguiamo alcuni calcoli e registriamoli nella console
function squareNum(num1){
const result = num1 * num1;
console.log(result);
}
// questo mostrerà il risultato nella console JavaScript qui sotto
// La console che abbiamo appena usato è molto utilizzata nella programmazione
// incluso in JavaScript.
// le dichiarazioni console.log possono essere davvero utili
// per dirti cosa sta succedendo all'interno del tuo programma
// in questo modo, se qualcosa di inaspettato accade
// puoi vedere esattamente dove e quando accade
squareNum(7);
function multiplyTwoNums(num1, num2){
console.log("Il primo numero è " + num1);
console.log("Il secondo numero è " + num2);
const result = num1 * num2;
console.log("La moltiplicazione risultante è " + result);
}
// chiamiamo la funzione sopra con due numeri a nostra scelta // e controlliamo la nostra console JavaScript per i log multiplyTwoNums(5, 7);
Eseguire il codice sopra darebbe il seguente risultato:
Come puoi vedere dall’output, abbiamo la dichiarazione di avviso che viene visualizzata all’interno della prima funzione che eseguiamo. Abbiamo il numero risultante di 49 registrato nella console JavaScript. Subito dopo, abbiamo un output più dettagliato nella console riguardo alla terza funzione. Fare dichiarazioni console.log è piuttosto comune nella programmazione, a seconda del linguaggio di programmazione che utilizzi, il nome esatto può cambiare, ma l’idea rimane la stessa. Con le dichiarazioni console.log, possiamo dare un’occhiata interna al nostro programma e comprendere meglio il nostro codice. Questo è particolarmente uno strumento utile quando qualcosa va storto nel tuo programma e cerchi di capire dove hai esattamente commesso un errore.
Nel prossimo tutorial vedremo un altro argomento importante in JavaScript chiamato oggetti. Prima di passare al prossimo tutorial, è una buona idea rivedere questa parte ancora una volta affinché i concetti si consolidino. Ti consiglio anche di digitare gli esempi su cui abbiamo lavorato e di sperimentarli in prima persona. Quando sei pronto, continueremo con gli oggetti in JavaScript nel prossimo tutorial.
Robert Whitney
Esperto di JavaScript e istruttore che forma i dipartimenti IT. Il suo obiettivo principale è aumentare la produttività del team insegnando agli altri come cooperare efficacemente durante la programmazione.
