Funzioni in javascript

Tempo di lettura: 10 minuti

Quando si programma vengono scritte delle righe di codice. Capita che ci siano volte in cui ci sono righe di codice che dovremmo riscrivere perchè ci serviranno più volte.

Facciamo un esempio con dello pseudo codice. Immaginate di lavorare in un ufficio dove qualcuno vi passa un foglio e voi dovete timbrarlo.
Le operazioni da fare dovrebbero essere queste:

– ricevi il foglio
– premi il timbro nell’inchiostro
– batti il timbro sul foglio

Queste azioni possono essere descritte in una funzione come questa:


function timbraFoglio(foglio)
{
  // premi il timbro nell'inchiostro
  // batti il timbro sul foglio
}

In questo caso abbiamo creato una funzione. In javascript per definire una funziona dobbiamo utilizzare la parola chiave function seguita dal nome che vogliamo attribuire alla funzione. In questo caso il nome è “timbraFoglio” e fra le parentesi tonde abbiamo messo “foglio”, perchè ci aspettiamo che ci arrivi un foglio, che noi write my paper for me prendiamo e poi utilizziamo nelle nostre operazioni.
Abbiamo quindi creato la nostra funzione. Le abbiamo dato un nome e abbiamo deciso che dovrà ricevere un parametro.
Abbiamo messo le nostre operazioni all’interno delle parentesi graffe. In javascript, così come in altri linguaggi, tutto il codice che una funzione deve eseguire sta all’interno di due parentesi graffe (aperta e chiusa). In questo caso ho messo i caratteri “//” all’inizio di ogni riga perchè così javascript leggerà queste righe come dei commenti al codice e quindi non ci darà errore.
Arrivati a questo punto abbiamo quindi definito una funzione che si aspetta un parametro (foglio) e che al suo interno dovrebbe far qualcosa (al momento però non fa niente, ma non è importante). Abbiamo definito questa funzione ma write my paper for me non l’abbiamo mai usata. In poche parole abbiamo solo stabilito cosa dovrà fare la funzione ogni volta che noi vorremo utilizzarla.
Per utilizzarla basta richiamarla, cioè scrivere il suo nome, con parentesi tonde alla fine e con all’interno delle parentesi il parametro che dobbiamo inviargli (foglio).
Quindi così:


var mioFoglio;
timbraFoglio(mioFoglio);

In questo modo abbiamo prima creato una variabile che si chiama “mioFoglio” e abbiamo poi passato questa variabile come parametro della funzione.
Al momento non ci importa più di tanto cosa sia realmente la nostra variabile, questo è solo un esempio ragionato in modo astratto.

Una funzione può anche non aver bisogno di nessun parametro. Immaginiamo ad esempio una funzione che serve per prendere il timbro da un cassetto. La funzione potrebbe essere scritta in questo modo:


function prendiTimbro()
{
  // Apri il cassetto
  // Afferra il timbro
  // Chiudi il cassetto
  // Appoggia il timbro sul tavolo
}

Come vedete la funzione non accetta nessun parametro, ma esegue solamente una serie di istruzioni.

Un’altra cosa che una funzione può fare è quella di restituire qualcosa. Immaginiamo che dopo aver timbrato il foglio, dobbiamo restituirlo. Potremmo scrivere una funzione in questo modo:


function timbraFoglioERestituisci(foglio)
{
  // premi il timbro nell'inchiostro
  // batti il timbro sul foglio
  return foglio;
}

In javascript, così come in altri linguaggi, per restituire qualcosa da una funzione, bisogna usare la parola chiave “return” seguita dalla variabile che vogliamo restituire.
In questo caso abbiamo creato una funzione che riceve un foglio e poi lo restituisce.

Possono esistere anche funzioni che non accettano alcun parametro ma restituiscono qualcosa. Pensiamo ad esempio una funzione che viene richiamata quando vogliamo ricevere il timbro. Potrebbe essere scritta così:


function dammiIlTimbro()
{
  // Apri il cassetto
  // Afferra il timbro
  // Chiudi il cassetto
  return timbro;
}

In questo caso la funzione non ha bisogno di nessun parametro, ma restituisce qualcosa.

Molto importante, quando scrivete delle funzioni, è cercare di dare dei nomi chiari. Se avessi dato alla funzione precedente il nome “guardoLeNuvole” o anche “miaFunzione”, non sarebbe stato molto chiaro quello che avrebbe fatto o ci avrebbe tratto in inganno. In più cercate di usare la sintassi giusta per scrivere il nome di una funzione. A seconda dei linguaggi che utilizzate o di come siete abituati, esistono delle convenzioni che sarebbe giusto seguire. In javascript solitamente scrivo i nomi delle funzioni iniziando con la lettera minuscola e mettendo in maiuscolo la prima lettera di ogni parola (Camel Case). Ovviamente non sono ammessi spazi o caratteri speciali.

Di seguito del codice di esempio di una funzione che calcola la somma di due numeri. Da notare come una funzione può ricevere più parametri, basta che siano separati da una virgola:


function somma(numero1, numero2)
{
  var totale = numero1+numero2;
  return totale;
}

var totaleSomma = somma(1,2);

Abbiamo creato una funzione che calcola la somma di due numeri e l’abbiamo usata subito dopo per memorizzare la somma di due numeri all’interno di una variabile che si chiama “totaleSomma”.

Ovviamente una funzione può essere usata (richiamata) all’interno di un’altra. Modificando leggermente le funzioni che abbiamo scritto in precedenza, del codice di questo tipo potrebbe aver senso:


function timbraFoglio(foglio)
{
  var timbro = prendiTimbro();
  // batti il timbro sul foglio
  return foglio;
}


function prendiTimbro()
{
  var timbro;
  // Apri il cassetto
  // Afferra il timbro
  // Chiudi il cassetto
  return timbro;
}


function timbraFoglioERestituisci(foglio)
{
  return timbraFoglio(foglio);
}

var mioFoglio = "mio foglio";
mioFoglio = timbraFoglioERestituisci(mioFoglio);

In questo esempio stiamo richiamando delle funzioni all’interno di altre funzioni. Alcune funzioni ricevono parametri, altre restituiscono parametri e altre fanno entrambe le cose.

In questo caso, partendo dalla riga 24, il codice deve essere letto in questo modo:

– Crea una variabile che identifica il nostro foglio.
– Chiama la funzione “timbraFoglioERestituisci” passandogli “mioFoglio”.
– La funzione “timbraFoglioERestituisci” chiama direttamente la funzione “timbraFoglio”, passandogli il parametro “mioFoglio”, che però all’interno di “timbraFoglioERestituisci” viene identificato con il nome “foglio”.
– La funzione “timbraFoglio” accetta come parametro il nostro foglio. Crea una variabile timbro e il valore di timbro arriva dalla chiamata di funzione “prendiTimbro”, che non accetta alcun valore ma restituisce il valore della variabile “timbro” (riga 15).
– La funzione “timbraFoglio” dovrebbe eseguire del codice per timbrare il foglio (al momento abbiamo un commento).
– La funzione “timbraFoglio” restituisce “foglio” alla riga di codice che l’aveva chiamata;
– La funzione “timbraFoglioERestituisci” aveva richiamato “timbraFoglio”. Prende quindi il valore che arriva da “timbraFoglio” e viene subito restituito alla riga di codice che aveva chiamato la funzione “timbraFoglioERestituisci”.
– Alla riga 25 il risultato finalmente ottenuto viene salvato nella variabile “mioFoglio”.

E’ molto importante ricordare che quando una variabile è dichiarata all’interno di una funzione, quella variabile esiste solo all’interno delle parentesi graffe che definiscono quella funzione.
Quindi nel seguente esempio, quando proviamo a visualizzare il valore di “x” al di fuori della funzione, riceveremo un errore perchè la variabile non è stata definita. Quando invece chiamiamo la funzione “mostraValore”, il valore di “x” ci vorrà mostrato senza generare alcun errore.

function mostraValore()
{
 var x = 5;
 console.log(x);
}

console.log(x);
mostraValore();

Direi che per questa prima parte sulle funzioni, per ora è tutto.