Le funzioni costituiscono una delle colonne portanti di JavaScript. Permettono di riutilizzare parti di codice in modo flessibile, il che vuol dire meno codice da scrivere, il che vuol dire meno possibilità di errori, più tempo per portare il cane al parco.
Una funzione è un blocco di codice che possiamo riutilizzare più volte ed in modo flessibile; il codice scritto all’interno di una funzione può infatti operare su dati diversi, definiti e passati ad essa, quando tale funzione viene chiamata, producendo risultati diversi. Pensate ad una calcolatrice: al suo interno il codice “registra” i dati corrispondenti ai tasti digitati e compie i calcoli desiderati. Non dovete comprare una nuova calcolatrice ogni volta che volete fare un calcolo, basta tenere a portata di mano quella che avete!
JavaScript ci mette a disposizione tutta una serie di funzioni preconfezionate che possiamo chiamare ed utilizzare a piacimento. Ci da inoltre la possibilità di definire nuove funzioni, secondo le nostre particolari esigenze. In JavaScript possiamo quindi, ad esempio, chiamare la funzione random(), predefinita per l’oggetto Math, che ci restituirà un numero casuale compreso tra 0 ed 1.
Math.random(); // 0.9082075429676537
Inoltre, possiamo costruire una funzione ad hoc, che risponda ad una nostra specifica esigenza e svolga un determinato compito. Ad esempio potremmo aver bisogno di una funzione che restituisca un numero compreso tra 0 e 100. Per prima cosa dovremo definire la nostra funzione attraverso la parola chiave function, dandogli un nome e definendo il codice che dovrà eseguire ogni volta che la chiameremo.
function random100() {
var myResult = Math.random() * 100;
return Math.round(myResult);
}
var myNumber = random100();
console.log(myNumber + "%"); // 85%
Nell’esempio qua sopra, ogni volta che chiameremo la nostra funzione random100(), questa ci restituirà un numero intero compreso tra 0 e 100.
Possiamo spingerci oltre ed “equipaggiare” la nostra prossima funzione con dei parametri, dargli cioè la possibilità di accettare determinati argomenti, che verranno passati alla funzione quando la chiameremo. Poniamo il caso volere maggiore flessibilità, di aver bisogno di una funzione che restituisca un numero compreso tra 0 ed un numero intero a nostro piacimento, che decideremo volta per volta.
function randomN(n) {
var myResult = Math.random() * n;
return Math.round(myResult);
}
var myNumber = randomN(20);
console.log(myNumber + "%"); // 15%
La funzione che abbiamo definito nell’esempio appena descritto, ci permette di passare un argomento alla funzione: un numero, che verrà utilizzato dal codice all’interno della funzione stessa nell’esecuzione del calcolo, restituendo un numero a caso compreso tra 0 ed il numero che abbiamo indicato. E se, invece di passare un numero, come argomento, passassimo per errore una stringa di testo? La funzione non potrebbe funzionare per come è stata concepita e restituirebbe NaN (Not a Number).
var myNumber = randomN("pippo");
console.log(myNumber + "%"); // NaN%
Fortunatamente possiamo fare in modo che la nostra funzione effettui un controllo sul tipo di argomento ricevuto e risponda di conseguenza.
function randomN(n) {
var endResult;
if(isNaN(n)){
endResult = "'" + n + "'" + " non è un numero!";
} else {
var myResult = Math.random() * n;
endResult = Math.round(myResult);
}
return endResult
}
var myNumber = randomN("pippo");
console.log(myNumber); // 'pippo' non è un numero!
C’è di più. Ogni volta che chiamate una funzione in JavaScript, gli argomenti della funzione vengono memorizzati in un particolare array chiamato arguments. Poniamo il caso che voglia creare una funzione che calcoli la somma di una serie di numeri, passati alla funzione come argomenti; la somma potrebbe essere tra 2 numeri, oppure 4, o 100. Voglio una funzione che sia flessibile, che funzioni a prescindere dal numero di argomenti che mi troverò a passarle.
function sum(){
var somma = 0;
for(var i = 0; i < arguments.length; i++){
somma = somma + arguments[i];
}
return somma;
}
var myNumber = sum(546, 12, 4090);
console.log(myNumber); // 4648
Andiamo oltre; rendiamo la nostra funzione ancora più flessibile. Supponiamo ad esempio di poterla voler utilizzare anche nel caso in cui la serie di numeri da sommare sia definita dagli elementi di un array. Per fare ciò abbiamo bisogno di apportare alcuni accorgimenti al codice;
function sum(arr){
if(arr instanceof Array){
//console.log("it's an Array!");
var somma = 0;
for(var i = 0; i < arr.length; i++){
somma += arr[i];
}
}
else {
var somma = 0;
for(var i = 0; i < arguments.length; i++){
somma = somma + arguments[i];
}
}
return somma;
}
var myArray = [10, 22, 2];
var myNumber = sum(myArray);
console.log(myNumber); // 34
Bene, ma forse non abbastanza… Per com’è scritta adesso, infatti, la funzione non è in grado di darci il risultato della somma, nel caso in cui riceva come argomenti sia una serie di numeri contenuti in un array, che semplici numeri singoli. Per far ciò dovremo implementare ulteriormente il nostro codice.
function sum(arr){
var somma =0
for(var i = 0; i < arguments.length; i++){
if (arguments[i] instanceof Array){
var argArray = arguments[i];
for(var a = 0; a < argArray.length; a++){
somma += argArray[a];
}
}
else {
somma += arguments[i];
}
}
return somma;
}
var myArray = [10, 22, 2];
var myArray2 = [5, 10, 20];
var myNumber = sum(6, myArray, 10, myArray2);
console.log(myNumber); // 85
Come mostrato in quest’ultimo esempio, adesso posso passare alla funzione uno o più numeri ed anche uno o più array contenenti serie di numeri; grazie ad un nested loop (ciclo for annidato), la nostra funzione passerà in rassegna tutti gli elementi dell’arguments array ed effettuerà l’operazione corretta in base al tipo di dato, infine restituirà la somma totale.
Mmm, tutta questa fatica per delle semplici addizioni? Niente affatto. Fortunatamente con la stessa logica possiamo spingerci ben oltre, ad esempio scrivere funzioni per la costruzione di oggetti più o meno complessi. Avvalendoci di funzioni “speciali”, le cosiddette constructor functions: funzioni deputate alla costruzione di oggetti appunto.