Les fonctions Javascript

Les fonctions sont une suite d’instructions effectuant une tâche ou calculant une valeur. Pour utiliser une fonction, il faut préalablement l’avoir définie.

Cet article fait suite aux tableaux en Javascript.

Déclarer une fonction

Une fonction est définie en utilisant le mot clef function, suivi du :

• nom de la fonction
• facultativement d’une liste d’arguments, entre parenthèses et séparés par des virgules
• des instructions de la fonction, entre accolades, { }

Déclaration d’une fonction sans arguments

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

Déclaration d’une fonction avec arguments

function direBonjourPersonne(prenom, nom) {
    console.log(`Bonjour ${prenom}, ${nom})`);
}
direBonjourPersonne("John", "Doe");

Les fonctions flechées

Les même fonctions, avec une autre syntaxe : les fonctions flechées

const direBonjour = () => console.log("Bonjour");
direBonjour();

const direBonjourPersonne = (prenom, nom) =>
    console.log(`Hello ${prenom}, ${nom}`);
direBonjourPersonne("John", "Doe");

Parcourir un tableau avec une fonction

let departements = [
    ["Oise", "60", "Hauts-de-France"],
    ["Haute-Saône", "70", "Bourgogne-Franche-Comté"],
    ["Paris", "75", "Île-de-France"],
    ["Bouches-du-Rhône", "13", "Provence-Alpes-Côte d'Azur"],
    ["Gironde", "33", "Nouvelle-Aquitaine"],
    ["Rhône", "69", "Auvergne-Rhône-Alpes"],
    ["Aude", "11", "Occitanie"],
    ["Loire-Atlantique", "44", "Pays de la Loire"],
    ["Hérault", "34", "Occitanie"],
    ["Morbihan", "56", "Bretagne"],
    ["Alpes-Maritimes", "06", "Provence-Alpes-Côte d'Azur"],
    ["Var", "83", "Provence-Alpes-Côte d'Azur"],
    ["Nord", "59", "Hauts-de-France"],
    ["Haut-Rhin", "68", "Grand Est"],
    ["Vaucluse", "84", "Provence-Alpes-Côte d'Azur"],
    ["Charente-Maritime", "17", "Nouvelle-Aquitaine"],
    ["Seine-Maritime", "76", "Normandie"],
    ["Pyrénées-Atlantiques", "64", "Nouvelle-Aquitaine"],
    ["Isère", "38", "Auvergne-Rhône-Alpes"],
    ["Pas-de-Calais", "62", "Hauts-de-France"]
];

function affiche(departementsArray) {
    departementsArray.forEach(function(dpt) {
        console.log("Département " + dpt[1] + " - " + dpt[0] + " | " + dpt[2]);
    });
}

affiche(departements);

Parcourir un tableau avec une fonction flechée

let departements = [
    ["Oise", "60", "Hauts-de-France"],
    ["Haute-Saône", "70", "Bourgogne-Franche-Comté"],
    ["Paris", "75", "Île-de-France"],
    ["Bouches-du-Rhône", "13", "Provence-Alpes-Côte d'Azur"],
    ["Gironde", "33", "Nouvelle-Aquitaine"],
    ["Rhône", "69", "Auvergne-Rhône-Alpes"],
    ["Aude", "11", "Occitanie"],
    ["Loire-Atlantique", "44", "Pays de la Loire"],
    ["Hérault", "34", "Occitanie"],
    ["Morbihan", "56", "Bretagne"],
    ["Alpes-Maritimes", "06", "Provence-Alpes-Côte d'Azur"],
    ["Var", "83", "Provence-Alpes-Côte d'Azur"],
    ["Nord", "59", "Hauts-de-France"],
    ["Haut-Rhin", "68", "Grand Est"],
    ["Vaucluse", "84", "Provence-Alpes-Côte d'Azur"],
    ["Charente-Maritime", "17", "Nouvelle-Aquitaine"],
    ["Seine-Maritime", "76", "Normandie"],
    ["Pyrénées-Atlantiques", "64", "Nouvelle-Aquitaine"],
    ["Isère", "38", "Auvergne-Rhône-Alpes"],
    ["Pas-de-Calais", "62", "Hauts-de-France"]
];

const affiche = (departementsArray) => departementsArray.forEach(dpt =>
    console.log(`Département ${dpt[1]} - ${dpt[0]} | ${dpt[2]}`)
);

affiche(departements);

Appeler une fonction avec des valeurs par défaut des arguments

La fonction afficherMessage prend deux arguments, message et repetition, avec des valeurs par défaut « Bonjour » et 1 respectivement. Vous pouvez appeler cette fonction sans arguments, auquel cas elle utilisera les valeurs par défaut, ou vous pouvez fournir un ou deux arguments pour remplacer les valeurs par défaut.

function afficherMessage(message = "Bonjour", repetition = 1) {
    for (let i = 0; i < repetition; i++) {
        console.log(message);
    }
}

afficherMessage(); // Affiche "Bonjour" une fois (valeurs par défaut utilisées)
afficherMessage("Salut"); // Affiche "Salut" une fois (repetition par défaut)
afficherMessage("Hello", 3); // Affiche "Hello" trois fois

Appeler une fonction avec des valeurs par défaut des arguments avec la syntaxe fléchée

const afficherMessage = (message = "Bonjour", repetition = 1) => {
    for (let i = 0; i < repetition; i++) {
        console.log(message);
    }
};

afficherMessage(); // Affiche "Bonjour" une fois (valeurs par défaut utilisées)
afficherMessage("Salut"); // Affiche "Salut" une fois (repetition par défaut)
afficherMessage("Hello", 3); // Affiche "Hello" trois fois