Les fonctions en Javascript - Cours introductif

Les fonctions en Javascript - Cours introductif

JavaScript propose des fonctions similaires à celles de la plupart des langages de script et de programmation.

En JavaScript, une fonction vous permet de définir un bloc de code, de lui donner un nom et de l'exécuter autant de fois que vous le souhaitez.

Une fonction JavaScript peut être définie à l'aide du mot-clé "function". (avant ES6)

L'exemple suivant montre comment définir et appeler une fonction en JavaScript.


function maFonction() {
	console.log('Hello World');
}

maFonction();

Dans l'exemple ci-dessus, nous avons défini une fonction nommée maFonction qui affiche un message dans la console "Hello World !". Cette fonction peut être exécutée en utilisant l'opérateur (), par exemple maFonction().

Sommaire :

Paramètres des fonctions


Une fonction peut avoir un ou plusieurs paramètres, qui seront fournis par le code appelant et peuvent être utilisés à l'intérieur d'une fonction. JavaScript étant un langage de script de type dynamique, un paramètre de fonction peut avoir une valeur de n'importe quel type de données.

function afficheBienvenue(nom, prenom) {
    alert("Bonjour " + prenom + " " + nom);
}

afficheBienvenue("Jean", "Luc");

Vous pouvez passer moins ou plus d'arguments en appelant une fonction. Si vous passez moins d'arguments, le reste des paramètres sera indéfini. Si vous passez plus d'arguments, les arguments supplémentaires seront ignorés.


function afficherBienvenue(nom, prenom) {
    alert("Bonjour " + prenom + " " + nom);
}

afficherBienvenue("Nicolas", "Picaut", "Mr."); // Affiche Bonjour Nicolas Picaut
afficherBienvenue("Nicolas"); // Affiche Bonjour Nicolas undefined
afficherBienvenue(); // affiche Bonjour undefined undefined

L'objet arguments en javascript


Toutes les fonctions en JavaScript peuvent utiliser l'objet arguments par défaut. Un objet arguments comprend la valeur de chaque paramètre.

L'objet arguments est un objet de type tableau. Vous pouvez accéder à ses valeurs en utilisant un index similaire à celui d'un tableau. Cependant, il ne supporte pas les méthodes de tableau.

function afficheBienvenue(firstName, lastName) {
    alert("Bonjour " + arguments[0] + " " + arguments[1]);
}

afficheBienvenue("Nicolas", "Picaut"); // Affiche Bonjour Nicolas Picaut

Un objet arguments est toujours valide même si la fonction n'inclut aucun paramètre.

function afficheBienvenue() {
    alert("Bonjour " + arguments[0] + " " + arguments[1]);
}

afficheBienvenue("Nicolas", "Picaut"); // Affiche Bonjour Nicolas Picaut

Un objet arguments peut être itéré en utilisant la boucle for.

function afficheNom() {

    for(var i = 0; i < arguments.length; i++){
        alert(arguments[i]);
    }
}

afficheNom("Nicolas", "Michel"); // affiche successivement Nicolas et Michel 

Valeur de retour en JS


Une fonction peut retourner zéro ou une valeur en utilisant le mot clé return.

function somme(val1, val2) {
    return val1 + val2;
};

var result = somme(10,20); // returns 30

function multiplier(val1, val2) {
    console.log( val1 * val2);
};

result = multiplier(10,20); // undefined

Dans l'exemple ci-dessus, une fonction nommée Sum additionne val1 et val2 et la renvoie. Le code appelant peut donc récupérer la valeur de retour et l'affecter à une variable. La deuxième fonction Multiply ne renvoie aucune valeur, la variable résultat sera donc indéfinie.

Une fonction peut renvoyer une autre fonction en JavaScript.

function multiplier(x) {

    function fn(y)
    {
        return x * y;
    }
    
    return fn;
}

var triple = plutiplier(3);
triple(2); // retourne 6
triple(3); // retourne 9

Expression de fonction


JavaScript nous permet d'attribuer une fonction à une variable, puis d'utiliser cette variable comme une fonction. C'est ce qu'on appelle l'expression de fonction.

var ajout = function somme(val1, val2) {
    return val1 + val2;
};

var result1 = ajout(10,20);
var result2 = somme(10,20); // non valide

Fonction javascript anonyme

JavaScript nous permet de définir une fonction sans nom. Cette fonction sans nom est appelée fonction anonyme. La fonction anonyme doit être assignée à une variable.

var disBonjour = function (){
    alert("Hello World!");
};

disBonjour();

var disBonjourPrenom = function (prenojm) {
    alert("Hello " + prenom);
};

disBonjour(); // Affiche Hello World

disBonjourPrenom("Michel"); // Affiche Bonjour Michel

Fonctions imbriquées


En JavaScript, une fonction peut avoir une ou plusieurs fonctions internes. Ces fonctions imbriquées sont dans la portée de la fonction externe. La fonction interne peut accéder aux variables et aux paramètres de la fonction externe. Cependant, la fonction externe ne peut pas accéder aux variables définies dans les fonctions internes.

function afficheMessage(prenom)
{
    function disBonjour() {
        alert("Bonjour " + prenom);
    }

    return disBonjour();
}

afficheMessage("Michel"); // Affiche Bonjour Michel

Fonction Javascript fléchée

Depuis l'arrivée de ES6, de nouvelles fonctionnalités natives javascrit ont vu le jour notamment les fonctions fléchées.

On peut utiliser et définir une fonction fléchée comme ci-dessous


const maFonction = (x, y) => {
	console.log(x * y);
}

maFonction(3, 5); // log 15 dans la console

Lorsque vous avez un seul paramètre, vous pouvez également enlever les paranthèses comme ci-dessous :


const maFonction = x => console.log(x * 2)

maFonction(2) // log 4 dans la console