Funzioni

Molto spesso abbiamo la necessità di eseguire azioni simili in diverse parti dello script.

Ad esempio, vogliamo mostrare un messaggio quando un utente effettua il login/logout o per qualsiasi altro motivo.

Le funzioni sono le “fondamenta” di un programma. Consentono a un codice di essere utilizzato più volte, evitando ripetizioni.

Abbiamo già visto esempi di funzioni integrate nel linguaggio, come alert(message), prompt(message, default) e confirm(question). Ma possiamo benissimo anche creare delle nostre funzioni personali.

Dichiarazione di Funzione

Per creare una funzione dobbiamo utilizzare una dichiarazione di funzione.

Che appare cosi:

function showMessage() {
  alert( 'Hello everyone!' );
}

La parola chiave function va posta all’inizio; viene seguita dal nome della funzione, poi c’è una lista di parametri, racchiusi tra parentesi (separati da virgola, in questo esempio la lista è vuota, vedremo un esempio più avanti) e infine il codice della funzione, chiamato anche “corpo della funzione”, racchiuso tra parentesi graffe.

function name(parameter1, parameter2, ... parameterN) {
  ...body...
}

La nostra nuova funzione può essere chiamata tramite il suo nome: showMessage().

Ad esempio:

function showMessage() {
  alert( 'Hello everyone!' );
}

showMessage();
showMessage();

La chiamata showMessage() esegue il codice dentro la funzione. Qui vedremo il messaggio due volte.

Questo esempio mostra chiaramente uno dei principali scopi delle funzioni: evitare le ripetizioni di un codice.

Se avremo la necessità di cambiare il messaggio o il modo in cui viene mostrato, sarà sufficiente modificare il codice in un solo punto: la funzione che lo implementa.

Variabili locali

Una variabile dichiarata all’interno di una funzione è visibile solamente all’interno di quella funzione.

Ad esempio:

function showMessage() {
  let message = "Hello, I'm JavaScript!"; // variabile locale

  alert( message );
}

showMessage(); // Hello, I'm JavaScript!

alert( message ); // <-- Errore! La variabile è locale alla funzione

Variabili esterne

Una funzione può accedere ad una variabile esterna, ad esempio:

let userName = 'John';

function showMessage() {
  let message = 'Hello, ' + userName;
  alert(message);
}

showMessage(); // Hello, John

La funzione ha pieno accesso alla variabile esterna. Può anche modificarla.

Un esempio:

let userName = 'John';

function showMessage() {
  userName = "Bob"; // (1) cambiata la variabile esterna

  let message = 'Hello, ' + userName;
  alert(message);
}

alert( userName ); // John prima della chiamata di funzione

showMessage();

alert( userName ); // Bob, il valore è stato modificato dalla funzione

La variabile esterna viene utilizzata solo se non ce n’è una locale.

Se una variabile con lo stesso nome viene dichiarata all’interno di una funzione, questa oscurerà quella esterna. Ad esempio, nel codice sotto la funzione usa la variabile locale userName. Quella esterna viene ignorata: