Définition

Les fonctions font partie des briques de base de la programmation, tout particulièrement en JavaScript qui est un langage orienté prototype.

Une fonction permet de regrouper des instructions dans un même bloc, relativement indépendant du reste du programme, afin de réaliser un certain traitement.

Une fonction peut être nommée, ce qui permet notamment sa réutilisabilité.

Analogie

Une fonction effectue toujours le même traitement. Elle utilise des données entrantes, et de ce traitement est issue une unique valeur de retour.

Analogie du blender

Vous pouvez la voir comme un blender, qui prend en entrée des ingrédients, effectue toujours le même traitement (mixer), et fournit un résultat qui dépend des ingrédients placés en premier lieu.

Déclarer et appeler une fonction

Dans sa forme classique, une fonction :

• est précédée du mot-clé function.
• est nommée, avec les mêmes règles que pour les variables.
• peut utiliser des paramètres, indiqués dans les parenthèses après le nom.
• contient un bloc d’instructions entre accolades, placé après les parenthèses.
• peut renvoyer une valeur, via le mot-clé return ce mot clé interrompt l'exécution de la fonction.

Une fois écrite, la fonction peut être appelée autant de fois que nécessaire, avec des arguments pouvant varier.

1
2
3
4
5
6
7
8
9
// Le nom de la fonction est 'add'
// a et b sont des paramètres
function add(a, b) {
  // renvoie la somme de a et b
  return a + b;
}

// 4 et 6 sont des arguments
const result = add(4, 6); // => 10

Les fonctions anonymes

Vous pouvez déclarer une fonction sans lui donner de nom. Cette fonction sera dite anonyme. On utilise souvent les fonctions anonymes quand on doit passer une fonction en paramètre d’une autre fonction.

1
2
3
4
5
// setTimeout prend une fonction en 1er paramètre
// La fonction n'est pas nommée
setTimeout(function(message){
    console.log("Hello !");
}, 1000);

Affecter une fonction à une variable

Vous pouvez affecter une fonction anonyme à une variable. Dans ce cas, vous utiliserez le nom de la variable pour appeler la fonction.

Il y a une légère différence entre les 2 méthodes :

1
2
3
4
5
6
7
8
9
const result = add(4, 6); // => add is undefined
const add = function (a, b) {
  return a + b;
}

const result = add(4, 6); // => 10
function add(a, b) {
  return a + b;
}

Vous pouvez remarquer que la fonction nommée est déclarée avant l'exécution du script alors que dans le cas d'une variable, elle reste vide jusqu'à l'assignation.

Les fonctions fléchées

Une fonction fléchée est une fonction dont la notation est simplifiée pour en faciliter la lecture. Cette notation est apparue dans la version ES2015 (ES6).

Fonction anonyme :

1
2
3
const add = function (a, b) {
  return a + b;
}

Fonction fléchée multiligne :

1
2
3
const add = (a, b) => {
  return a + b;
}

Fonction fléchée simplifiée :

1
const add = (a, b) => a + b;

Notez qu'on ne peut utiliser la notation simplifiée que dans le cas où notre fonction ne contient qu'une ligne d'instruction. Dans ce cas, le return est sous-entendu.

Pourquoi utiliser les fonctions ?

Éviter la duplication de code

Vous serez souvent amenés à répéter des opérations au sein de vos programmes. Une fonction est un moyen de répéter plusieurs fois la même suite d'instructions sans avoir à la réécrire.

Exemple : Calculer une moyenne

Imaginez que vous devez calculer la moyenne des notes de plusieurs élèves.

Sans fonction

Si vous n'utilisez pas de fonction, vous obtenez 2 blocs de code très similaires :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const billsRatings = [9, 14, 12];
const marysRatings = [15, 11, 13.5];

let billsSum = 0;
for (let index = 0 ; index < billsRatings.length ; index++) {
  billsSum += billsRatings[index];
}
const billsAverage = billsSum /  billsRatings.length;

let marysSum = 0;
for (let index = 0 ; index < marysRatings.length ; index++) {
  marysSum += marysRatings[index];
}
const marysAverage = marysSum /  marysRatings.length;

Vous remarquez que le même algorithme est utilisé sur des données différentes. Vos instructions sont dupliquées autant de fois que vous devez effectuer le calcul de la moyenne.

Avec fonction

Afin d'éviter la duplication, vous allez déplacer l'algorithme dans une fonction qui sera réutilisable.

1
2
3
4
5
6
7
8
9
10
11
12
13
function computeAverage(ratings) {
    let sum = 0;
    for (let index = 0 ; index < ratings.length ; index++) {
        sum += ratings[index];
    }
    return sum /  ratings.length;
}

const billsRatings = [9, 14, 12];
const marysRatings = [15, 11, 13.5];
// On appelle la fonction à deux reprises
const billsAverage = computeAverage(billsRatings);
const marysAverage = computeAverage(marysRatings);

Désormais, calculer une nouvelle moyenne ne vous demande que d'appeller la fonction computeAverage() 1 fois de plus.

Limiter les risques d'erreurs

Même un petit bloc de code, comme une formule mathématique, se prête à la factorisation en fonction : répéter plusieurs fois une même formule multiplie le risque d’une erreur d’inattention.

Exemple : Convertir une température

Imaginez cette fois-ci que vous devez convertir une température anglaise (°F), en température francaise (°C)

Formule : tempCelsius = (tempFahrenheit - 32) * 5 / 9

Sans fonction

1
2
3
4
5
6
7
8
const temperatureSeattleF = 66;
const temperatureDenverF = 92;
const temperatureChicagoF = 84;

const temperatureSeattleC = (temperatureSeattleF - 32) * 5 / 9;
const temperatureDenverC = (temperatureDenverF - 32) * 5 / 9;
// Oops
const temperatureChicagoC = (temperatureChicagoF - 32) / 5 * 9;

Vous pouvez remarquer une erreur qui s'est glissée de manière quasiment imperceptible à la ligne 8.

Avec fonction

1
2
3
4
5
6
7
8
9
10
11
function fahrenheitToCelcius(tempFahrenheit) {
   return (tempFahrenheit - 32) * 5 / 9; 
}

const temperatureSeattleF = 66;
const temperatureDenverF = 92;
const temperatureChicagoF = 84;

const temperatureSeattleF = fahrenheitToCelcius(temperatureSeattleF);
const temperatureDenverF = fahrenheitToCelcius(temperatureDenverF);
const temperatureChicagoF = fahrenheitToCelcius(temperatureChicagoF);

En utilisant une fonction, vous n'avez besoin d'écrire la formule qu'une seule fois. Il sera donc beaucoup plus facile de détecter une erreur.

Dans le cas où vous codez des tests unitaires, une fonction sera d'autant plus intéressante car il vous suffit de tester la fonction pour être assuré qu'elle fonctionnera comme prévu à chaque fois que vous l'utiliserez.

Conclusion

Vous venez de découvrir les fonctions en JavaScript. Si vous avez des idées d’amélioration pour cet article, laissez-nous un commentaire !

Et si vous avez réussi à tout suivre, vous pouvez passer au chapitre suivant : “Javascript - Les objets littéraux”

Sources

• Developer Mozzila : Les fonctions
• Pierre Giraud - Javascript apprendre à coder : Fonctions JavaScript