Fonctions JS

Chaque fois que l’on souhaite effectuer une tâche répétitive, on utilise des fonctions. En Javascript, il existe plusieurs syntaxes pour déclarer une fonction.

Fonctions nommées

Une fonction nommée commence par le mot-clé function, suivi du nom de la fonction (dans l’exemple ci-dessous : logCompliment). Le corps de la fonction et ses instructions (i.e. son bloc d’instruction) sont définis entre des accolades :

function logCompliment() {
    console.log("Vous vous débrouillez très bien !") ;
}

Une fois la fonction déclarée, vous l’invoquez ou l’appelez pour la voir s’exécuter :

function logCompliment() {
    console.log("Vous vous débrouillez très bien !") ;
}

logCompliment() ;

Fonctions anonymes

Une autre option serait d’utiliser la syntaxe de fonction anonyme, ce qui revient à déclarer la fonction comme une variable :

const logCompliment = function() {
    console.log("Vous vous débrouillez très bien !") ;
};

logCompliment();

Le resultat est le même. La seule différence, c’est qu’il n’est pas possible d’invoquer une fonction anonyme avant de la déclarer :

// Invoquer la fonction avant de la déclarer
hey();

// Fonction nommée
function hey() {
    alert("hey!");
}

// Invoquer la fonction avant de la déclarer
hey();

// Fonction anonyme
const hey = function() {
    alert("hey!");
};

TypeError: hey is not a function

Passage d’arguments

Une fonction peut prendre un ou plusieurs arguments en entrée :

const logCompliment = function(firstName) {
    console.log(`Vous vous débrouillez très bien, ${firstName}`);
};

logCompliment("Molly");

const logCompliment = function(firstName, message) {
    console.log(`${firstName}: ${message}`);
};

logCompliment("Molly", "Tu es vraiment cool !");

Retour de fonctions

La fonction logCompliment affiche un compliment sur la console, mais le plus souvent, une fonction est utilisée pour retourner une valeur.

Pour cela, on utilise le mot-clé return.

const createCompliment = function(firstName, message) {
    return `${firstName} : ${message}` ;
} ;

createCompliment("Molly", "You're so cool") ;

console.log(createCompliment("Molly", "You're so cool")) ;

Arguments par défaut

Il est possible d’avoir des valeurs par défaut pour les arguments. Dans le cas ou la valeur n’est pas fournie, la valeur par défaut est utilisée :

function logActivity(name = "Shane McConkey", activity = "skier") {
    console.log(`${name} adore ${activity}`);
}

const defaultPerson = {
    name: {
        first: "Shane",
        last: "McConkey"
    },
    favActivity: "skier"
};

function logActivity(person = defaultPerson) {
    console.log(`${person.name.first} adore ${person.favActivity}`);
}

Fonctions fléchées

Une façon plus “moderne” de déclarer une fonction est d’utiliser la syntaxe des fonctions fléchées. Avec les fonctions fléchées, il est possible de déclarer des fonctions sans utiliser le mot-clé function. Souvent, il n’est pas non plus nécessaire d’utiliser le mot-clé return.

Fonction anonyme :

const lordify = function(firstName) {
    return `${firstName} de Canterbury`;
};

console.log(lordify("Dale")); // Seigneur Dale de Canterbury
console.log(lordify("Gail")); // Seigneur Gail de Canterbury

Fonction fléchées :

const lordify = firstName => `${firstName} de Canterbury`;

Si la fonction possède plus d’un argument, il doivent être entourés de parenthèses :

// Fonction anonyme
const lordify = function(firstName, land) {
    return `${firstName} de ${land}`;
};

// Fonction fléchée
const lordify = (firstName, land) => `${firstName} of ${land}`;

console.log(lordify("Don", "Piscataway")); // Don de Piscataway
console.log(lordify("Todd", "Schenectady")); // Todd de Schenectady

Cette fonction peut tenir sur une seule ligne car il n’y a qu’une seule déclaration à renvoyer. S’il y a plusieurs lignes, il faut utiliser des accolades :

const lordify = (firstName, land) => {
    if (!firstName) {
        throw new Error("Un prénom doit être fourni");
    }
    
    if (!land) {
        throw new Error("Un territoire doit être fourni");
    }
    
    return `${firstName} de ${land}`;
};

console.log(lordify("Kelly", "Sonoma")); // Kelly de Sonoma
console.log(lordify("Dave")); // ! JAVASCRIPT ERROR