Les functions expressions /
en JavaScript

29/02/2016

JavaScript permet de créer des functions que nous pourrons stocker dans des variables. Bienvenue dans le monde des functions expression ou en francais des expressions en tant que fonctions. Ce concept est indispensable en JavaScript car il est très utilisé, mais pourquoi ? En fait la différence entre fonction déclaré et une function expression est lié à la facon dont le navigateur interprète et stock en mémoire ces informations.

Dans le cas d’une function déclarée de manière classique, toute la function est chargée dans la mémoire du navigateur même si elle n’est pas utilisée immédiatement. À la différence des expressions de fonction (ou function expression) qui elles sont appelées quand l’interpréteur atteint cette ligne de code.

Exemple basique

une déclaration de fonction basique


function kingOfCool(){ alert('Im k!nG of C00L'); }

Cette instruction est stockée en mémoire, même si celle-ci n’est pas appelée. À la différence d’une function expression qui ne sera chargée que lorsqu’elle sera appelée.

On peut déclarer une function avec un nom. Ne pas oublier le ; à la fin, car cela reste une variable comme une autre

var message = kingOfCool function(){
  alert('Im k!nG of C00L');
};

La déclaration du nom de la function « kingOfCool » n’est pas obligatoire, car on peut faire une « function anonyme ».

var message = function(){
  alert('Im k!nG of C00L');
};

C’est la même chose quand on utilise une function de la librairie jQuery par exemple. Dans cet exemple on passe une function anonyme en 2nd paramètre. On ne déclare donc pas de nom à la function que l’on passe en paramètre

$(element).on('click',function(){

});

Passer une function expression / à la place d'un paramètre

Exemple avec la méthode array.map();
Pour rappel array.map() permet d’appliquer un traitement à n’importe quelle valeur d’un array (de manière individuelle) et renvoyer cette nouvelle version de l’array. Le paramètre arrayCell peut être n’importe quoi


var monArray = [1,2,3,4,5,6]; var result = monArray.map(function(arrayCell){ return arrayCell *2; }); console.log(result); // affiche 2,4,6,8,10,12

Exemple avancé / Une function retournant des functions

var parkRides = [
  ["Birch Bumper", 40],
  ["Pines Plunge", 55],
  ["Cedar Coaster", 20],
  ["Ferris Wheel of firs", 90]
];

var fastPassQueue = [
  "Cedar Coaster",
  "Pines Plunge",
  "Birch Bumper",
  "Pines Plunge"
];


function buildTicket(allRides, parkRides, pick){

  if(parkRides[0] == pick){

    var pass = parkRides.shift();

    return function() {
      alert("Rapide ! Vous avez un fast pass pour "+pass+"!");
    };

  }else{
    for(var i = 0; i<allRides.length; i++){
      if(allRides[i][0] == pick){

        return function(){
          alert("Je vous imprime un ticket pour "+pick+" !\n"+
          "Votre temps d'attente est de "+allRides[i][1]+"min :)");
        };
      }
    }

  }
}


var wantsRide = "Cedar Coaster";


var ticket = buildTicket(parkRides,fastPassQueue,wantsRide);

ticket();


On peut retourner une fonction depuis une autre function.
Cependant dans l’exemple précédent si on appelle seulement


buildTicket(parkRides,fastPassQueue,wantsRide);

Le retour ne sera pas exécuté, tant que l’on ne stocke pas la function dans une function expression


var ticket = buildTicket(parkRides,fastPassQueue,wantsRide);

Il existe un moyen d’exécuter les function retournées sans passer par une function expression. Il s’agit en fait d’une syntaxe qu’il faut utiliser la voici :


buildTicket(parkRides,fastPassQueue,wantsRide)();

Notez bien l’utilisation des parenthèses comme sur une function à la fin.

Voilà pour la partie sur les expressions de fonction j’espère que cet article / bloc note vous sera utile.