javascript function
JavaScript

Javascript function : A quoi servent les functions et comment les utiliser?

Nous allons voir dans cet article, en javascript, à quoi servent une function et comment l’utiliser de façon efficace. Nous verrons qu’il y a plusieurs “types” de function : les functions classiques, les functions expression et les arrow functions. Commençons tout de suite par les functions les plus simples

Déclaration de function

Un petit mot sur les functions de façon globale avant de nous lancer dans des exemples. Une fonction ou function nous permet de définir une suite d’instruction, un comportement et pouvoir le répéter plusieurs fois de façon assez simple. Pour les plus matheux d’entre vous, une fonction permet de factoriser du code redondant. Voyons un exemple de déclaration de fonction tout de suite :

function creerPikachu(){
    console.log("Je créé un pikachu");
    console.log("Pikachu est là");
}

Je déclare une fonction creerPikachu qui va me permettre d’afficher deux phrases. Il s’agit uniquement de la déclaration pour l’instant. Rien ne va être écrit dans la console tant que je n’ai pas appelé la fonction pour pouvoir executer mes deux console.log. Pour déclarer une function, il faut justement utiliser le mot clef function suivi du nom de la function.

function creerPikachu(){
    console.log("Je créé un pikachu");
    console.log("Pikachu est là");
}
creerPikachu();
creerPikachu();

J’ai appelé la fonction creerPikachu, deux fois. Le code de la fonction va donc s’executer deux fois. Ceci m’évite de répéter mes deux console.log à chaque fois. Une fonction permet de faire beaucoup plus, mais tenons nous en à ça pour le moment.

Expression de function

En javascript, il est possible de déclarer une function avec une expression de fonction. Quand une fonction est déclarée comme cela, elle est très souvent anonyme. Une fonction anonyme n’a bien entendu pas de nom à proprement parler. C’est pour cela qu’on la stocke très souvent dans une variable pour pouvoir l’utiliser :

creerPikachu = function(){
    console.log("Je créé un pikachu");
    console.log("Pikachu est là");
}
creerPikachu();
creerPikachu();

Il n’est pas forcement sûr que la fonction soit anonyme :

creerPikachuNonAnonyme = function creerPikachu(){
    console.log("Je créé un pikachu");
    console.log("Pikachu est là");
}
creerPikachuNonAnonyme();
creerPikachuNonAnonyme();
console.log(creerPikachuNonAnonyme.name); // creerPikachu
console.log(creerPikachuNonAnonyme.length); // 0

Tu peux ainsi récupérer le nom de la fonction avec .name ou sa longueur ou son prototype, etc…

Arrow function

Nous allons finir avec les arrow functions. En ES6, les arrow functions sont arrivées. Elle permet de définir des fonctions très rapidement et de façon plus concises :

//ES5 expression de fonction
creerPikachu = function(){
    console.log("Je créé un pikachu");
    console.log("Pikachu est là");
}
creerPikachu();
creerPikachu();

//ES6 arrow function
creerPikachu = () => {
    console.log("Je créé un pikachu");
    console.log("Pikachu est là");
}
creerPikachu();
creerPikachu();

On peut avoir la déclaration l’opérateur “=>” qui définit la fameuse arrow de l’arrow fonction. N’hésiter pas à utiliser les arrow functions maintenant.

J’espère que cet article vous a plu.

Si vous voulez aller plus loin dans votre apprentissage en javascript, je ne peux que vous conseiller de lire cet article :
http://pierreterrat.com/javascript-:-le-guide-ultime-pour-bien-commencer-a-apprendre/

Beaucoup d’efforts et de temps sont passés pour vous fournir du contenu de qualité, merci de partager et de commenter cet article pour faire vivre ce blog.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *