Le funzioni in JavaScript: dichiarazione, return e arrow function

Nel capitolo precedente abbiamo visto come usare i cicli e le istruzioni di controllo di flusso per governare l’esecuzione del codice. In questa parte del tutorial affrontiamo un altro elemento importante di JavaScript: le funzioni.

Le funzioni sono blocchi di codice che puoi eseguire quando vuoi: definisci un’operazione una volta sola e la richiami tutte le volte che serve, senza riscrivere niente. Ne esce un codice più efficace e più facile da mantenere, perché ogni operazione è definita in un solo punto e riutilizzata ovunque.

Ecco gli aspetti da tenere presenti quando scrivi delle funzioni in JavaScript:

• La dichiarazione di funzione
• Gli argomenti e i parametri
• Il valore restituito dalle funzioni
• Le arrow function

Dichiarare una funzione

In JavaScript ci sono due modi per dichiarare una funzione: la dichiarazione di funzione e l’espressione di funzione.

Dichiarazione di funzione

function maFonction() {
  // codice da eseguire
}

Espressione di funzione

const maFonction = function() {
  // codice da eseguire
}

Gli argomenti e i parametri

Gli argomenti sono i valori che passi a una funzione quando la chiami. I parametri sono le variabili definite nella dichiarazione della funzione, quelle che ricevono gli argomenti.

Ecco un esempio di funzione con un argomento e un parametro:

function maFonction(parametre) {
  console.log(parametre);
}

maFonction('Bonjour'); // mostra 'Bonjour' nella console

Il valore restituito dalle funzioni

Una funzione può restituire un valore con l’istruzione «return». Se non restituisce niente, si considera che restituisca «undefined».

function maFonction() {
  return 'Bonjour';
}

console.log(maFonction()); // mostra 'Bonjour' nella console

Puoi anche restituire più valori da una funzione, servendoti di un oggetto o di un array:

function maFonction() {
  return {
    message: 'Bonjour',
    nombre: 42
  };
}

console.log(maFonction());
// mostra { message: 'Bonjour', nombre: 42 } nella console

function maFonction() {
  return [1, 2, 3];
}

console.log(maFonction()); // mostra [1, 2, 3] nella console

Quando usi l’istruzione «return», la funzione si ferma subito e il codice che la segue non viene eseguito. Ecco un esempio che lo mostra:

function maFonction() {
  return 'Bonjour';
  console.log('Ce message ne sera jamais affiché');
}

console.log(maFonction()); // mostra 'Bonjour' nella console

Le arrow function

Le arrow function (le «funzioni freccia») sono una sintassi più concisa per scrivere funzioni in JavaScript. Tornano comode soprattutto quando ti serve una funzione semplice, che non ha bisogno di un corpo completo.

const maFonction = () => {
  // codice da eseguire
};

Se il corpo della funzione è una sola espressione, potete omettere le graffe e la parola chiave return: viene restituito il valore dell’espressione. Le parentesi, invece, restano obbligatorie quando la funzione non ha alcun parametro:

const maFonction = () => console.log('Bonjour');

Conclusione

Le funzioni sono un elemento chiave di JavaScript, indispensabile per scrivere codice efficace e facile da mantenere. Una volta che padroneggi la dichiarazione di funzione, gli argomenti e i parametri, il valore restituito e le arrow function, sei in grado di costruire funzioni solide e utili nelle tue applicazioni.

Nel prossimo capitolo affrontiamo un altro concetto importante di JavaScript: gli oggetti. Vedremo come crearli e come usarli per archiviare e manipolare i dati in modo strutturato.