Fonctions Javascript

Qu'est-ce que la fonction ?

Une fonction est un groupe d'instructions qui exécutent des tâches spécifiques et peuvent être conservées et maintenues séparément du programme principal. Les fonctions permettent de créer des packages de code réutilisables qui sont plus portables et plus faciles à déboguer. Voici quelques avantages de l'utilisation des fonctions :

• Les functions réduisent la répétition de code dans un programme — une fonction vous permet d'extraire un bloc de code couramment utilisé en un seul composant. Vous pouvez maintenant effectuer la même tâche en appelant cette fonction où vous voulez dans votre script sans avoir à copier et coller le même bloc de code encore et encore.
• Les fonctions rendent le code beaucoup plus facile à maintenir - Puisqu'une fonction créée une fois peut être utilisée plusieurs fois, toute modification apportée à l'intérieur d'une fonction est automatiquement implémentée à tous les endroits sans toucher aux différents fichiers.
• Les fonctions facilitent l'élimination des erreurs - Lorsque le programme est subdivisé en fonctions, si une erreur se produit, vous savez exactement quelle fonction est à l'origine de l'erreur et où la trouver. Par conséquent, la correction des erreurs devient beaucoup plus facile.

La section suivante vous montrera comment définir et appeler des fonctions dans vos scripts.

Définir et appeler une fonction

La déclaration d'une fonction commence par le mot-clé function, suivi du nom de la fonction que vous souhaitez créer, suivi de parenthèses c'est-à-dire () et enfin placez le code de votre fonction entre accolades {}. Voici la syntaxe de base pour déclarer une fonction :

function nom_fonction() {

    // Code à exécuter

}

Voici un exemple simple d'une fonction, qui affichera un message bonjour :

/* definir une fonction */
function sayHello() {
    alert("Hello, welcome to this website!");
}

/* appeler la fonction */
sayHello(); // 0utputs: Hello, welcome to this website!

Une fois qu'une fonction est définie, elle peut être appelée de n'importe où dans le document, en tapant son nom suivi d'un ensemble de parenthèses, comme sayHello() dans l'exemple ci-dessus.

Remarque : Un nom de fonction doit commencer par une lettre ou un caractère de soulignement et non par un chiffre, éventuellement suivi par d'autres lettres, chiffres ou caractères de soulignement. Les noms de fonctions sont sensibles à la casse, tout comme les noms de variables.

Ajout de paramètres aux fonctions

Vous pouvez spécifier des paramètres lorsque vous définissez votre fonction pour accepter des valeurs d'entrée au moment de l'exécution. Les paramètres fonctionnent comme des variables d'espace réservé dans une fonction ; ils sont remplacés au moment de l'exécution par les valeurs (appelées arguments) fournies à la fonction au moment de l'invocation.

Les paramètres sont définis sur la première ligne de la fonction à l'intérieur du jeu de parenthèses, comme ceci :

function nom_fonction( paramètre1 , paramètre2 , paramètre3 ) {

    // Code à exécuter

}

La fonction displaySum() dans l'exemple suivant prend deux nombres comme arguments, il suffit de les additionner, puis d'afficher le résultat dans le navigateur.

 

function displaySum(num1, num2) {
    var total = num1 + num2;
    alert(total);
}
displaySum(6, 20); // Affiche: 26
displaySum(-5, 17); // Affiche: 12

Vous pouvez définir autant de paramètres que vous le souhaitez. Cependant, pour chaque paramètre que vous spécifiez, un argument correspondant doit être passé à la fonction lorsqu'elle est appelée, sinon sa valeur devient undefined. Considérons l'exemple suivant :

 

function showFullname(firstName, lastName) {
    alert(firstName + " " + lastName);
}
showFullname("Clark", "Kent"); // Affiche: Clark Kent
showFullname("John"); // Affiche: John undefined

Valeurs par défaut des paramètres de fonction ES6

Avec ES6, vous pouvez désormais spécifier des valeurs par défaut pour les paramètres de la fonction. Cela signifie que si aucun argument n'est fourni à la fonction lorsqu'elle est appelée, ces valeurs de paramètres par défaut seront utilisées. C'est l'une des fonctionnalités les plus attendues de JavaScript. Voici un exemple :

function sayHello(name = 'Guest') {
    alert('Hello, ' + name);
}

sayHello(); // Affiche: Hello, Guest
sayHello('John'); // Affiche: Hello, John

Alors qu'avant ES6, pour obtenir la même chose, nous devions écrire quelque chose comme ceci :

function sayHello(name) {
    var name = name || 'Guest'; 
    alert('Hello, ' + name);
}

sayHello(); // Affiche: Hello, Guest
sayHello('John'); // Affiche: Hello, John

Pour en savoir plus sur les autres fonctionnalités d'ES6, veuillez consulter le chapitre sur les fonctionnalités de JavaScript ES6 .

Renvoyer des valeurs à partir d'une fonction

Une fonction peut renvoyer une valeur au script qui a appelé la fonction en conséquence à l'aide de l'instruction return. La valeur peut être de n'importe quel type, y compris des tableaux et des objets.

L'instruction return est généralement placée sur la dernière ligne de la fonction avant l'accolade fermante et la termine par un point-virgule, comme illustré dans l'exemple suivant.

/* definir */
function getSum(num1, num2) {
    var total = num1 + num2;
    return total;
}


/* afficher la valeur retournée */
alert(getSum(6, 20)); // Affiche: 26
alert(getSum(-5, 17)); // Affiche: 12

Une fonction ne peut pas renvoyer plusieurs valeurs. Cependant, vous pouvez obtenir des résultats similaires en renvoyant un tableau de valeurs, comme illustré dans l'exemple suivant.

function divideNumbers(dividend, divisor){
    var quotient = dividend / divisor;
    var arr = [dividend, divisor, quotient];
    return arr;
}

/* enregistrer les valeurs dans une variable */
var all = divideNumbers(10, 2);
alert(all[0]); // Affiche: 10
alert(all[1]); // Affiche: 2
alert(all[2]); // Affiche: 5

Travailler avec des expressions de fonction

La syntaxe que nous avons utilisée auparavant pour créer des fonctions est appelée déclaration de fonction. Il existe une autre syntaxe pour créer une fonction appelée expression de fonction.

/* déclarer une fonction */
function getSum(num1, num2) {
    var total = num1 + num2;
    return total;
}


/* fonction expression */
var getSum = function(num1, num2) {
    var total = num1 + num2;
    return total;
};

Une fois que l'expression de la fonction a été stockée dans une variable, la variable peut être utilisée comme une fonction :

var getSum = function(num1, num2) {
    var total = num1 + num2;
    return total;
};

alert(getSum(5, 10)); // Affiche : 15

var sum = getSum(7, 25);
alert(sum); // Affiche : 32

Remarque : Il n'est pas nécessaire de mettre un point-virgule après l'accolade fermante dans une déclaration de fonction. Mais les expressions de fonction, en revanche, doivent toujours se terminer par un point-virgule.

Conseil : dans JavaScript, les fonctions peuvent être stockées dans des variables, transmises à d'autres fonctions en tant qu'arguments, transmises à des fonctions en tant que valeurs de retour et construites au moment de l'exécution.

La syntaxe de la déclaration de fonction et de l'expression de fonction semble très similaire, mais elles diffèrent dans la façon dont elles sont évaluées, consultez l'exemple suivant :

declaration(); /* Affiche: Hi, I'm a function declaration! */
function declaration() {
    alert("Hi, I'm a function declaration!");
}

expression(); /* Uncaught TypeError: undefined is not a function */
var expression = function() {
    alert("Hi, I'm a function expression!");
};

Comme vous pouvez le voir dans l'exemple ci-dessus, l'expression de la fonction a levé une exception lorsqu'elle a été invoquée avant d'être définie, mais la déclaration de la fonction s'est exécutée avec succès.

La déclaration d'une fonction analyse JavaScript avant l'exécution du programme. Par conséquent, peu importe si le programme invoque la fonction avant qu'elle ne soit définie, car JavaScript a hissé la fonction au sommet de la portée actuelle dans les coulisses. L'expression de la fonction n'est pas évaluée tant qu'elle n'est pas affectée à une variable ; par conséquent, il n'est toujours pas défini lorsqu'il est invoqué.

ES6 a introduit une syntaxe encore plus courte pour écrire une expression de fonction qui s'appelle la fonction de flèche (Arrow function), veuillez consulter le chapitre sur les fonctionnalités de JavaScript ES6 pour en savoir plus à ce sujet.

Cependant, vous pouvez déclarer les variables n'importe où dans JavaScript. Mais, l'emplacement de la déclaration détermine l'étendue de la disponibilité d'une variable dans le programme JavaScript, c'est-à-dire l'endroit où la variable peut être utilisée ou accessible. Cette accessibilité est connue sous le nom de portée variable .

Par défaut, les variables déclarées dans une fonction ont une portée locale, ce qui signifie qu'elles ne peuvent pas être visualisées ou manipulées depuis l'extérieur de cette fonction, comme illustré dans l'exemple ci-dessous :

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

greetWorld(); /* Affiche: Hello World! */

alert(greet); /* Uncaught ReferenceError: greet is not defined */

Cependant, toute variable déclarée dans un programme en dehors d'une fonction a une portée globale , c'est-à-dire qu'elle sera disponible pour tous les scripts, que ce script soit à l'intérieur d'une fonction ou à l'extérieur. Voici un exemple :

var greet = "Hello World!";
function greetWorld() {
    alert(greet);
}
greetWorld();  // Affiche: Hello World!


alert(greet); // Affiche: Hello World!