Fonctions (Functions)

Salut HaWker ! Jeff Bruchado par ici.

C'est un autre article de notre serie d'articles qui va couvrir notre voyage pour Apprendre la Programmation depuis Zero.

Aujourd'hui ce sera un autre article sur un contenu extremement important pour poursuivre votre apprentissage.

Bon, sans plus tarder, commencons !

Aujourd'hui, nous allons parler de l'un des sujets les plus importants en Programmation :

Fonctions (Functions).

Bien, a ce moment plongeons dans l'univers des Fonctions (Functions) en JavaScript et comprenons pourquoi elles sont si fondamentales.

Imaginez que vous creez un site, et dedans il y a une partie qui doit calculer le pourboire base sur le montant de l'addition du restaurant. Vous allez vouloir repeter le meme calcul chaque fois que quelqu'un entre un montant different ? Bien sur que non, n'est-ce pas ?

C'est la qu'entrent les Fonctions !

Les Fonctions sont comme de petits robots dans votre code.

Vous leur dites quoi faire une fois, et ensuite vous n'avez qu'a les appeler pour repeter cette tache autant de fois que vous voulez.

Elles sont mega importantes parce que :

Organisation : Rend le code plus propre et organise. Au lieu de repeter le meme code plusieurs fois, vous creez une fonction et l'appelez chaque fois que vous en avez besoin.

Reutilisation : Une fois que vous ecrivez une fonction, vous pouvez l'utiliser n'importe ou dans votre projet, ou meme dans d'autres projets.

Maintenance : Si vous devez changer la logique, vous n'avez qu'a modifier dans la fonction. Ainsi, le changement s'applique partout ou la fonction est appelee.

Scalabilite : A mesure que votre projet grandit, les fonctions aident a gerer la complexite, gardant les choses plus geables.

Pensez aux Fonctions comme des formules mathematiques. Vous mettez quelques valeurs (parametres), la fonction traite ces valeurs (execute un bloc de code) et, souvent, vous renvoie un resultat (retour de la fonction).

Par exemple, une fonction pour calculer le pourboire pourrait etre quelque chose comme :

function calculerPourboire(montantAddition) {
  return montantAddition * 0.1;
}

Et chaque fois que vous voulez calculer le pourboire, vous n'avez qu'a appeler calculerPourboire(montantDeLAddition) avec le montant de l'addition comme parametre.

Alors, voyez comme les Fonctions sont essentielles :

Elles reduisent la repetition, gardent votre code organise et facilitent les modifications et la scalabilite.

Sans elles, la programmation serait un veritable puzzle geant et confus.

Les Fonctions transforment la complexite en simplicite !

Parametres de fonctions

Basiquement ce sont les arguments ou parametres passes a une fonction quand elle est appelee.

Par exemple, dans la fonction suivante, a et b sont les parametres de la fonction :

function somme(a, b) {
  return a + b;
}

Vous les declarez a l'interieur des () dans la declaration de la fonction.

Et quand vous appelez, vous passez les valeurs des parametres, a l'interieur des () de l'appel, dans l'ordre de la declaration.

C'est-a-dire, quand la fonction est appelee, les arguments passes sont attribues aux parametres correspondants.

Par exemple :

function somme(a, b) {
  return a + b;
}

let resultat = somme(1, 2);
console.log(resultat); // 3

Bon, a cet instant vous avez compris ce que sont les parametres des fonctions, mais vous vous demandez peut-etre, et si je veux executer une fonction qui a des parametres, mais je ne veux pas passer de valeurs pour ces parametres, je veux juste le resultat par defaut, existe-t-il un moyen de faire ca ?

Et c'est exactement ce que je vais vous expliquer maintenant.

Parametres avec valeur pre-definie (Default Params)

Comprenons les Default Params (Parametres par defaut), ce sont des parametres qui ont deja une valeur par defaut pre-definie.

Ils sont utiles quand nous voulons qu'un parametre ait une valeur par defaut au cas ou l'utilisateur ne passe pas de valeur pour lui.

C'est-a-dire, ce parametre devient optionnel.

La syntaxe pour definir un parametre par defaut est la suivante :

function saluer(nom = 'Jeff') {
  console.log(`Bonjour, ${nom}!`);
}

Dans cet exemple, si l'utilisateur ne passe pas de valeur pour le parametre nom, la valeur par defaut Jeff sera utilisee.

Sinon, la valeur passee par l'utilisateur sera utilisee.

Par exemple :

saluer(); // "Bonjour, Jeff!"
saluer('Marie'); // "Bonjour, Marie!"

Bon, comme vous pouvez le constater ils sont bien utiles pour certaines situations specifiques, n'est-ce pas ?!

Parametre Rest (Rest Params)

C'est une syntaxe speciale pour passer un nombre indetermine d'arguments a une fonction.

Et pour faire cela, il suffit de definir le parametre de votre fonction avec la syntaxe suivante :

(...nomDuParametre), en utilisant les 3 points (...), avant la declaration du nom.

C'est utile quand nous ne savons pas combien d'arguments seront passes.

La syntaxe est la suivante :

function somme(...nombres) {
  let resultat = 0;
  for (let nombre of nombres) {
    resultat += nombre;
  }
  return resultat;
}

Dans l'exemple ci-dessus, le parametre nombres est un array qui contiendra tous les arguments passes a la fonction.

Par exemple :

function somme(...nombres) {
  let resultat = 0;
  for (let nombre of nombres) {
    resultat += nombre;
  }
  return resultat;
}

let resultat = somme(1, 2, 3, 4, 5);
console.log(resultat); // 15

IIFEs (Immediately Invoked Function Expressions)

Ce sont des fonctions qui sont definies et appelees immediatement.

Elles sont couramment utilisees pour creer des portees locales et proteger les variables et fonctions d'etre accessibles globalement.

Exemple d'une IIFE :

(function () {
  // code de la fonction ici
})();

Generalement l'IIFE est utilise quand vous initialisez votre application, et avez besoin de faire une requete avant qu'elle soit creee, comme consulter l'utilisateur, et valider s'il a la permission de charger l'application.

Fonctions pre-definies (Built-in Functions)

Ce sont des fonctions pre-definies que vous pouvez utiliser pour realiser des taches communes en JavaScript, c'est-a-dire, vous n'avez pas besoin de les declarer.

Voici des exemples de Built-in Functions :

• parseInt() pour convertir des strings en nombres entiers,
• Math.max() pour trouver la plus grande valeur dans une liste de nombres
• console.log() pour afficher des messages dans la console.

Exemple d'utilisation de la built-in function parseInt() :

let maString = '123';
let monInt = parseInt(maString);
console.log(monInt); // 123

Exemple d'utilisation de la built-in function Math.max() :

let nombres = [1, 2, 3, 4, 5];
let max = Math.max(...nombres);
console.log(max); // "5"

Portee et pile de fonctions (Scope and function stack (Call stack))

J'ai deja parle de Portee dans les articles precedents, et a cet instant je vais parler plus en detail a ce sujet par rapport aux fonctions.

Alors ne soyez pas gene si vous sentez que vous repetez quelque chose que vous avez deja etudie. (C'est meme mieux pour fixer le contenu !)

Comprenons le concept de portee a nouveau :

La Portee se refere a la facon dont une variable est visible dans differentes parties de votre code.

En d'autres termes, la portee determine la "visibilite" d'une variable.

Il existe deux types principaux de portee en JavaScript :

• Portee de bloc
• Portee de fonction

La portee de bloc est creee par tout type d'instruction de controle, comme if et for, et limite la visibilite des variables declarees dans le bloc au bloc lui-meme.

La portee de fonction est creee par une fonction et limite la visibilite des variables declarees dans la fonction a cette fonction et toutes les fonctions imbriquees a l'interieur.

Voici un exemple de code qui demontre la portee de bloc :

if (true) {
  const x = 5;
}

console.log(x); // Uncaught ReferenceError: x is not defined

Dans cet exemple, la variable x est declaree dans le bloc du if, donc elle n'est visible qu'a l'interieur du bloc lui-meme. Essayer d'acceder a la variable en dehors du bloc resulte en une erreur.

Voici un exemple de code qui demontre la portee de fonction :

function foo() {
  const x = 5;
}

console.log(x); // Uncaught ReferenceError: x is not defined

Dans cet exemple, la variable x est declaree dans la fonction foo, donc elle n'est visible qu'a l'interieur de la fonction foo et de toute fonction imbriquee a l'interieur. Essayer d'acceder a la variable en dehors de la fonction resulte en une erreur.

A ce moment, je vais commencer a parler de la pile de fonctions (ou "call stack" en anglais) :

Quand une fonction est appelee, elle est placee sur la "pile d'appels" (call stack).

Quand la fonction retourne, c'est-a-dire, quand elle termine l'execution, elle est retiree de la pile.

Bien, ayant compris cela, je vais vous montrer un exemple qui vous permet de voir le chemin que le code a parcouru pour arriver au point ou il est, c'est-a-dire, voir comment fonctionne la call stack et l'empilement des taches.

Exemple de code qui demontre comment la pile de fonctions fonctionne :

function foo() {
  console.log('Appel foo');
  bar();
  console.log('Retour de foo');
}

function bar() {
  console.log('Appel bar');
  baz();
  console.log('Retour de bar');
}

function baz() {
  console.log('Appel baz');
  console.log('Retour de baz');
}

foo();

Quand vous executez ce code, la sortie sera :

Appel foo
Appel bar
Appel baz
Retour de baz
Retour de bar
Retour de foo

Ici, nous pouvons voir que les fonctions sont ajoutees a la pile de fonctions quand elles sont appelees et retirees de la pile quand elles retournent.

Quand une fonction est appelee, elle est ajoutee au sommet de la pile et la prochaine fonction est appelee.

Quand la fonction retourne, elle est retiree du sommet de la pile et la prochaine fonction dans la pile est appelee. Cela continue jusqu'a ce que la pile soit vide et que l'execution du script se termine.

Conclusion

Les fonctions sont une partie tres importante, car elles nous permettent d'ecrire du code de maniere plus organisee et reutilisable.

Moi Jeff, je souligne que :

Il est important de dedier du temps pour comprendre comment fonctionnent les fonctions et comment les utiliser de maniere efficace, car cela peut beaucoup aider lors de la creation de vos applications.

Rappelez-vous qu'il est important de pratiquer ce que vous apprenez, car cela aidera a fixer les concepts et ameliorer vos competences d'abstraction.

Essayez de creer vos propres applications, et jouez avec les fonctions, en passant differents parametres et arguments.

Eh bien HaWker, nous arrivons a la fin d'un autre article.

J'espere que cet article a ajoute a votre repertoire de connaissances sur la Programmation.

Comme toujours, si vous avez une question ou voulez explorer un point plus en detail, repondez simplement avec votre question, dans cet email.

Et rappelez-vous, je suis la pour vous aider a vous ameliorer de 1% a chaque nouvel article !

Si vous etes arrive jusqu'ici, comme d'habitude, s'il vous plait, repondez a cet email avec "J'ai reussi a apprendre et comprendre les fonctions en programmation".

Ainsi je saurai que cette serie d'articles vous est utile, et que vous suivez et profitez.

Comme vous le savez deja ! Seul un veritable HaWker arrive jusqu'a la fin.

Felicitations !

Je suis content de vous avoir ici.

A bientot.

C'est parti !

- Jeff Bruchado

Felicitations d'etre arrive jusqu'ici, HaWker !

A ce moment ou vous avez appris les fonctions en programmation, que diriez-vous de tester vos connaissances ? Participez au quiz ci-dessous et voyez combien vous avez absorbe de notre article.

C'est une excellente facon de consolider l'apprentissage et de vous preparer pour les prochaines etapes de votre voyage de programmation.

Appuyez pour acceder au quiz.

Bonne chance et amusez-vous !