Les fonctions en Javascript

Déclarer une fonction

Pour déclarer une fonction, un utilise la commande function suivi du nom de la fonction. Ensuite on peut accepter des paramètres dont on va indiquer le nom entre parenthèse. Les paramètres n'ont pas besoin d'avoir de type de données. On peut aussi retourner une valeur avec la commande return. Dès que la fonction rencontre une commande return, le traitement s'arrête et la valeur est retournée.

function maFonction(param1, param2) {
    // ...
    return resultat;
}

Assigner une fonction à une variable

On peut aussi stocker la fonction dans une variable. Dans ce cas la syntaxe reste la même mais on n'est pas tenu d'indiquer de nom de fonction.

const maFonction = function (param1, param2) {
    // ...
    return resultat;
}

Lancer une fonction

Pour lancer une fonction on utilise le nom de la fonction avec entre parenthèses les paramètres. S'il n'y a aucun paramètre on doit quand même utiliser des parenthèses vides. Quand la fonction retourne un résultat on peut récupérer directement le résultat dans une variable. On peut aussi se servir de la fonction directement dans une condition, comme par exemple si elle retourne une valeur booléenne.

script.js
function test() {
    return true;
}

// Lance la fonction test
test();
// Récupère la valeur de retour de la fonction test
let valeurTest = test();
// Utilise la valeur de retour de la fonction test dans une condition
if (test()) {
    // ...
}

Fonction de callback

En JavaScript il est très fréquent qu'une fonction demande en paramètre une deuxième fonction. On appelle ce type de fonction une fonction de callback. Un exemple qu'on voit fréquemment est la fonction addEventListener qui prend en paramètre le type d'événement à écouter et la fonction a exécuter quand l'événement est détecté. On va se servir de cette fonction pour illustrer la syntaxe.

On peut utiliser le nom d'une fonction déclaré dans le script

const monBouton = document.getElementById('btn');

function message() {
    console.log("Bonjour");
}

monBouton.addEventListener('click', message);

Danger

Vous remarquerez que j'ai appelé la fonction message sans paramètre ni parenthèse. En effet on doit uniquement donner le nom de la fonction sinon elle sera exécuté immédiatement au chargement du script.

On peut aussi déclarer la fonction directement dans le paramètre. On va privilégier ce cas quand la fonction n'aura pas a être exécutée ailleur dans le code. On peut même omettre le nom de la fonction. On va appeler ce type de fonction une fonction anonyme.

script.js
monBouton.addEventListener('click', function () {
    console.log("Bonjour");
});

Fonction fléchée (arrow function)

Il y a une autre syntaxe plus concise d'écrire une fonction, la fonction fléché. Avec cette syntaxe on doit assigner la fonction à une variable ou l'utliser comme fonction de callback.

Le principe est simple:

On enlève la commande function
On peut oublier le nom de la fonction s'il n'est pas utilisé.
Les parenthères des paramètres sont obligatoire, même s'il n'y en a pas.
Après les parenthèses on va utiliser le symbôle =>
Des accolades contiendront le code de la fonction.

script.js
const message = () => {
    return "Bonjour!";
}

const somme = (nombre1, nombre2) => {
    return nombre1 + nombre2;
}

monBouton.addEventListener('click', () => {
    console.log(somme(2,2));
});