Les fonctions

Ce que tu vas apprendre

• Déclarer une fonction, l'appeler et récupérer son résultat.
• Écrire des fonctions fléchées et utiliser des valeurs par défaut.
• Comprendre où une variable est visible.

Une fonction, c'est quoi

Une fonction est un bloc de code nommé que tu peux réutiliser. Tu l'écris une fois, tu l'appelles autant de fois que nécessaire.

function direBonjour() {
  console.log('Bienvenue sur mon site de recettes')
}

direBonjour()
direBonjour()

Les parenthèses après le nom appellent la fonction. Sans elles, tu désignes la fonction sans l'exécuter.

Paramètres et retour

Un paramètre est une valeur que la fonction reçoit. Le mot-clé return renvoie un résultat à l'endroit de l'appel.

function doubler(quantite) {
  return quantite * 2
}

const farine = doubler(150)
console.log(farine)  // 300

Les valeurs que tu passes à l'appel s'appellent des arguments. Ici, 150 est l'argument et quantite est le paramètre.

Plusieurs paramètres

Sépare-les par des virgules. L'ordre compte.

function prixTotal(prixUnitaire, quantite) {
  return prixUnitaire * quantite
}

console.log(prixTotal(2.5, 4))  // 10

Valeurs par défaut

Un paramètre peut avoir une valeur par défaut, utilisée quand l'argument est absent.

function saluer(nom = 'cuisinier') {
  return `Bonjour ${nom}`
}

console.log(saluer())          // "Bonjour cuisinier"
console.log(saluer('Camille')) // "Bonjour Camille"

Les fonctions fléchées

La fonction fléchée est une écriture plus courte, avec =>. On la stocke en général dans une variable.

const doubler = (quantite) => {
  return quantite * 2
}

Quand le corps tient en une expression, tu peux retirer les accolades et le return. Le résultat est renvoyé automatiquement.

const doubler = (quantite) => quantite * 2
const saluer = nom => `Bonjour ${nom}`
const nomDuSite = () => 'Mes recettes'

Avec un seul paramètre, les parenthèses sont facultatives. Sans paramètre, elles restent obligatoires.

Une fonction est une valeur

En JavaScript, on peut passer une fonction en argument à une autre fonction. La fonction reçue s'appelle un callback.

function repeter(fois, action) {
  for (let i = 1; i <= fois; i++) {
    action(i)
  }
}

repeter(3, (numero) => console.log(`Tour ${numero}`))

C'est partout en JavaScript : les méthodes de tableaux, les événements et l'asynchrone fonctionnent ainsi. Tu les croiseras dans les cours suivants.

La portée des variables

La portée est la zone du code où une variable existe. Une variable déclarée avec let ou const n'existe que dans son bloc, entre accolades.

function calculer() {
  const resultat = 42
  return resultat
}

calculer()
console.log(resultat)  // Erreur : resultat is not defined

Une fonction peut lire les variables déclarées autour d'elle.

const tva = 0.055

function prixTTC(prixHT) {
  return prixHT * (1 + tva)
}

L'inverse est faux : le code extérieur ne voit pas ce qui est déclaré à l'intérieur d'une fonction.

Garder des fonctions petites

Une bonne fonction fait une seule chose et porte un nom qui commence par un verbe : calculerPrix, afficherRecette, estVegetarienne.

Si tu écris un commentaire pour séparer deux parties dans une fonction, c'est souvent le signe qu'il faut en faire deux fonctions.

À retenir

• Une fonction se déclare avec function nom() {} et s'appelle avec nom().
• Les paramètres reçoivent des valeurs, return renvoie un résultat.
• Une valeur par défaut s'écrit function f(x = 1).
• La fonction fléchée (x) => x * 2 est une écriture courte, avec return implicite.
• On peut passer une fonction en argument : c'est un callback.
• Une variable déclarée avec let ou const n'existe que dans son bloc.