JavaScript pour les Jedis, épisode I : au cœur des fonctions

Comme vous le savez tous, 2015 est l'année de JavaScript. C'est pour cette raison que j'ai décidé de me consacrer à la rédaction d'une série d'articles concernant les fondamentaux de JavaScript, un langage très populaire, mais en même temps encore méconnu. Ces articles auront pour but de vous expliquer en détail le fonctionnement de ce langage afin de faire de vous des JavaScript Jedis.

En effet, grâce à cette série d'articles, nous allons apprendre et comprendre JavaScript afin de tirer le meilleur de ce langage. À vrai dire, j'en ai un peu marre de voir beaucoup de développeurs traiter ce langage de tous les noms, car ils n'arrivent pas à faire ce qu'ils ont l'habitude de produire avec leurs langages favoris. Mais en réalité, cela vient du fait que ces mêmes personnes ne prennent même pas la peine d'apprendre le langage, probablement à cause de sa syntaxe très ressemblante à Java. Par conséquent, ces développeurs finissent donc par développer une sorte de haine contre JavaScript.

Vous vous demandez sûrement pourquoi nous commençons cette série par les fonctions, et non pas par les objets. Eh bien ! Étant donné la nature fonctionnelle de JavaScript, pour moi, maîtriser cet aspect du langage fera de vous des Jedis. En effet, la plupart des développeurs via d'autres langages orientés objet essayent plus de reproduire des paradigmes propres à ces langages et font l'impasse sur les fonctions et les fermetures (closures). JavaScript est composé de ces trois concepts : les objets, les fonctions et les closures. Maîtriser JavaScript passe par l'apprentissage de cet aspect fonctionnel du langage ; et croyez-moi, le niveau de sophistication du code que vous écrirez dépend de cet apprentissage.

L'une des raisons qui font que les fonctions et la nature fonctionnelle de JavaScript sont des concepts très importants vient du fait que « la fonction » est le premier module d'exécution en JavaScript. C'est-à-dire que lorsque votre code est exécuté, il l'est au sein d'une fonction ; à l'exception des scripts qui sont interprétés lorsque le code HTML est en train d'être évalué par le navigateur. Je fais évidemment allusion à l'emblématique « document.write() » qui permettait de créer du DOM au runtime, obligeant le navigateur à bloquer l'interprétation du code HTML.

Revenons à nos moutons, une chose très importante à connaître sur les fonctions en JavaScript, ce sont des objets de premier ordre (first-class objects). Cela veut dire que les fonctions sont traitées comme des objets, elles peuvent donc être :

• créées via des littérales ;
• assignées à des variables ou propriétés d'un objet ;
• passées en paramètre ;
• retournées comme résultat.

Ces fonctions peuvent aussi posséder des objets ou méthodes.

En plus d'être traitées comme des objets, les fonctions ont également une capacité spéciale : elles peuvent être invoquées (on en reparlera plus en détail dans la suite de cet article). Cette invocation est souvent effectuée de manière asynchrone. Voilà pourquoi…

Si vous avez déjà codé une interface graphique auparavant, vous avez sûrement procédé comme ceci :

• mettre en place l'interface graphique ;
• se mettre dans une boucle d'événements en attendant qu'un événement se produise ;
• invoquer les actions à exécuter pour chaque événement.

La programmation en JavaScript — dans un navigateur — suit quasiment ces étapes, sauf que la gestion des événements est totalement prise en charge par le navigateur. Nous avons juste besoin de spécifier les actions (listeners) pour les différents événements qui peuvent être déclenchés — toujours au sein du navigateur. Ces événements sont placés dans une file au fur et à mesure qu'ils se produisent, et le navigateur traite ces événements en invoquant les actions associées. À noter que ce principe reste identique pour d'autres environnements JavaScript, par exemple NodeJS. Puisque ces événements peuvent se produire à n'importe quel moment et dans n'importe quel ordre, la gestion de ces événements, et donc l'invocation de leurs actions, se fait de manière asynchrone. Pourquoi me diriez-vous ?

Une chose à savoir, la boucle d'événements du navigateur est « monothreadée », ce qui veut dire que chaque événement se trouvant dans la file d'attente est traité dans l'ordre d'arrivée (FIFO). Les événements sont donc traités un par un, à tour de rôle. Voici un schéma très simplifié de ce processus :

Un exemple typique du fonctionnement de cette boucle : lorsque vous bougez le curseur de votre souris dans votre page web, le navigateur détecte ces déplacements de souris et place cette série d'événements (mousemove) dans la FIFO. Ensuite, la boucle d'événements s'occupera du traitement de ces événements en exécutant les actions associées.

Ce principe d'actions — associer une fonction qui sera exécutée plus tard, lorsque l'événement se produira — illustre un mécanisme que l'on appelle les fonctions de callback.

Les fonctions de callback sont une partie très essentielle dans la bonne compréhension de JavaScript. Explorons ce point…

Dans la partie précédente, nous avons dit que l'on pouvait associer des actions aux différents événements se produisant au sein du navigateur. Voici un exemple d'une action :

function executerAuChargement(){ /* ... */ };
window.onload = executerAuChargement;

Ici, nous avons attaché une action (listener) qui sera exécutée lorsque la page est complètement chargée par le navigateur. Parce que les fonctions sont des « first-class objects », nous pouvons affecter cette fonction à la propriété onload de l'objet window (représentant le navigateur).

Aussi, nous avons dit que les fonctions peuvent être passées en paramètre. Ce qui veut dire que l'on peut écrire ceci :

function dire(callback) {
  alert(callback());
}

function bonjour() {
  return "Bonjour, JavaScript!";
}

function executerAuChargement() {
  return dire(bonjour)
}

window.onload = executerAuChargement;

Voilà un exemple intéressant ! Nous pouvons aussi appeler les fonctions de callback dans nos propres fonctions, pas besoin qu'elles soient associées à des événements. Dans cet exemple, nous avons attaché une fonction de callback à l'événement onload. Lorsque la boucle d'événement exécutera ce listener, à son tour il exécutera la fonction « dire » à laquelle nous avons passé la référence vers la fonction « bonjour ». Une fois exécutée, la fonction « dire » invoquera la fonction « bonjour », ce qui provoquera l'affichage du message « Bonjour, JavaScript ! ».

Mieux encore ? La nature fonctionnelle de JavaScript nous permet de créer des fonctions en tant qu'entité à part entière, comme n'importe quel autre type, et les passer directement en paramètres. Voyons un exemple :

function dire(callback) {
  alert(callback());
}

function executerAuChargement() {
  return dire(function(){ return "Bonjour, JavaScript!"; });
}

window.onload = executerAuChargement;

Nous avons modifié l'exemple précédent en supprimant la déclaration de la fonction « bonjour ». Nous l'avons remplacée par la déclaration d'une fonction sans nom, directement dans les paramètres de la fonction « dire ». En JavaScript, nous appelons ce genre de fonctions, les fonctions anonymes.

Étant donné la nature fonctionnelle du langage, il est possible de créer des fonctions n'importe où dans le code — là où une expression est attendue. Cela a pour avantage de rendre le code plus clair, plus compact et en plus, cela permet d'éviter de polluer l'espace de noms global avec des noms de fonctions inutiles.

En effet, une fonction anonyme est une fonction — comme les autres — déclarée en «  inline» et qui n'a pas de nom pour la référencer. Ces fonctions anonymes sont généralement déclarées au moment où elles sont référencées.

Généralement, en JavaScript, lorsque nous estimons qu'une fonction va être référencée dans plusieurs endroits du code, nous lui donnons un nom. Sinon, si elle est destinée à servir juste à un seul endroit, alors pas besoin qu'elle ait un nom. Ce qui nous amène aux déclarations et invocations des fonctions.

En JavaScript, les fonctions sont déclarées à l'aide du mot-clé « function » qui crée une valeur de type fonction. Rappelez-vous que les fonctions sont des objets de premier ordre, elles peuvent être manipulées dans le langage comme n'importe quel autre type. De ce fait, il nous est possible d'écrire ceci (en reprenant l'exemple précédent) :

var dire = function(callback) {
  alert(callback()) ;
};

La valeur de la variable « dire » est une fonction ! Nous avons donc déclaré et créé une fonction anonyme référencée par la variable « dire ».

Toutes les fonctions déclarées ont une propriété « name » qui contient le nom de la fonction (de type String). Pour les fonctions anonymes, cette propriété est présente, mais elle est vide.

Lorsqu'une fonction a été déclarée avec un nom, ce dernier reste valide dans tout le contexte dans lequel cette fonction a été déclarée. Aussi, si cette fonction a été déclarée dans le contexte global, une nouvelle propriété portant le nom de la fonction est ajoutée dans le « window » ; cela est également vrai pour les variables ; ce qui nous amène donc à la suite de cet épisode concernant le contexte et la portée des fonctions.

Lorsque nous déclarons une fonction, nous devons avoir à l'esprit, non seulement le contexte dans lequel cette fonction existe, mais également quelles sont les portées que cette fonction crée. Nous devons également faire très attention aux déclarations faites au sein de ces portées.

La gestion des portées en JavaScript est très différente de la plupart des autres langages dont la syntaxe a été influencée par le langage C. Plus précisément, ceux utilisant les accolades pour délimiter la portée des variables dans les blocs. Dans ces langages, chaque bloc crée son propre contexte. Ce n'est pas le cas de JavaScript.

« En JavaScript, les portées sont créées par les fonctions, et non pas par les blocs. »

La portée d'une variable créée au sein d'un bloc continue d'exister en dehors de ce dernier. Par exemple :

if (true) {
  var foo = 'bar';
}
console.log(foo); //=> 'bar'

Ce simple exemple prouve bien que la portée de la variable « foo » est globale, car elle a été déclarée dans le contexte global qui est « window ». Elle n'est pas liée au bloc « if ». Regardons un exemple un peu plus intéressant :

function fonction1() {
  var a = 1;

  function fonction2() {
    var b = 2;  
  }
  
  if (a === 1) {
    var c = 3;
  }
}

fonction1();

Dans cet exemple, nous avons déclaré deux fonctions, « fonction1 » et « fonction2 », et nous avons défini trois variables, a, b et c. Pour compléter cet exemple, voici un schéma plus parlant qui explique les différents contextes créés :

Ce schéma résume les règles suivantes :

• la portée d'une variable existe depuis sa déclaration, et ce jusqu'à la fin de la fonction dans laquelle elle a été déclarée, peu importe l'imbrication des blocs (variables declaration hoisting)  ;
• la portée d'une fonction (ne pas confondre avec une expression de fonction) est globale à toute la fonction dans laquelle elle a été déclarée (functions declaration hoisting) .

Cette deuxième règle nous montre que, contrairement aux variables, les fonctions peuvent être référencées avant leur déclaration ! Oui, exactement, vous pouvez invoquer « function1 » avant de la déclarer. Par contre, ce n'est pas une bonne pratique. Ce n'est pas parce que c'est autorisé par le langage qu'il faut le faire.

Maintenant que nous avons vu comment les fonctions sont déclarées, essayons de voir comment elles peuvent être invoquées. Cela risque d'être très amusant…

Nous avons tous invoqué des fonctions en JavaScript. Mais avez-vous déjà essayé de comprendre ce qui se passe lorsque vous invoquez une fonction ? Il existe quatre façons d'invoquer une fonction en JavaScript. Chaque type d'invocation a un effet direct sur le contexte d'exécution de cette fonction. Plus précisément, le type d'invocation agit sur le paramètre « this » passé à la fonction lors de son invocation. Écrire du code digne d'un Jedi repose sur la compréhension et la bonne maîtrise de ces mécanismes d'invocations.

Voici les différents types d'invocations en JavaScript :

1. En tant que fonction (c'est le cas le plus répandu) ;
2. En tant que méthode, ce qui permet de lier l'invocation à un objet (POO) ;
3. En tant que constructeur, ce qui permet de créer un objet (instance) ;
4. Via « apply » et « call » (voir explication plus loin).

Avant d'expliquer chaque type d'invocation, prenons quelques minutes et essayons de comprendre ce qui se passe lors d'une invocation de fonction (cela est vrai pour les cas 1, 2, et 3).

VIII-A. Arguments et paramètres▲

VIII-B. L'argument « arguments »▲

function foo() {
  console.log(arguments.length); //=> 3
  console.log(arguments); //=> [1,2,'bar']
  console.log(arguments[2]); //=> 'bar'
  console.log(arguments.filter); //=> undefined
}

foo(1,2,'bar');

// astuce #1
var args = [].slice.call(arguments, 0);

// astuce #2
[].forEach.call(arguments, function(x){ /* expression */ });

VIII-C. L'argument « this »▲

VIII-D. Les types d'invocations▲

function foo() {};
foo(); //=> this === window
var bar = function() {};
bar(); //=> this === window

function foo() {
 return this;
}
// invocation en tant que fonction
foo(); //=> this === window
var bar = {
 'foo': foo
};
// invocation en tant que méthode de 'bar'
bar.foo(); //=> this === bar

function Foo() {
 this.bar = function() {
 return this;
 }
}
// exemple 1
var foo = new Foo();
console.log(foo); //=> Foo
console.log(foo.bar() instanceof Foo); //=> true

// exemple 2
var foo1 = Foo();
console.log(typeof foo1); //=> undefined
console.log(typeof window.bar); //=> function

function foo() {
 console.log(this); //=> this === window
 console.log(arguments); //=> ‘a', ‘b', ‘c'
}
var element = document.querySelector('#foo');
element.addEventListener('click', function(e){
 console.log(this); //=> element
 console.log(arguments); //=> e === Event
 foo('a', 'b', 'c');
});

function foo() {
 console.log(this); //=> this === element
 console.log(arguments); //=> 'a', 'b', 'c'
}
var element = document.querySelector('#foo');
element.addEventListener('click', function(e){
 console.log(this); //=> element
 console.log(arguments); //=> e === Event
 foo.call(element, 'a', 'b', 'c');
});

function foo() {
 console.log(this); //=> this === element
 console.log(arguments); //=> a, b, c
}

var element = document.querySelector('#foo');
element.addEventListener('click', function(e){

 console.log(this); //=> element
 console.log(arguments); //=> e === Event

 foo.apply(element, ['a', 'b', 'c']);
});

function forevery(list, callback) {
  for (var i = 0; i < list.length; i += 1) {
    callback.call(list, i);
  };
}
forevery(['a', 42, false, {}], function(index) {
  console.log( "index = ", index );
  console.log( "this = ", this );
  console.log( "this[ index ] = ", this[ index ] );
  console.log( "this[ index + 1 ] = ", this[ index + 1 ] );
  console.log( "this[ index - 1 ] = ", this[ index - 1 ] );

  /*
   *  index =  0
   *  this =  ["a", 42, false, Object]
   *  this[ index ] =  a
   *  this[ index + 1 ] =  42
   *  this[ index - 1 ] =  undefined
   *
   *  index =  1
   *  this =  ["a", 42, false, Object]
   *  this[ index ] =  42
   *  this[ index + 1 ] =  false
   *  this[ index - 1 ] =  a
   *
   *  etc.
   */
});

Math.max(0, 1, 2, 3, 4, 5, 6, 7, 8, 9); //=> 9

function max() {
 return (arguments.length === 0) ? 0 : Math.max.apply(Math, arguments);
}
max(0, 1, 2, 3, 4, 5, 6, 7, 8, 9); //=> 9
max(3, 8, 32, 2, 98); //=> 98
max(42, 0); //=> 42
max(); //=> 0

VIII-E. Un mot sur bind()▲

var Foo = function() {
 this.counter = 0;
 this.inc = function() {
 this.counter += 1;
 console.log(this);
 };
};

var foo = new Foo();
var element = document.querySelector('#foo');

// cas #1
element.addEventListener('click', foo.inc); //=> this === element

// cas #2
element.addEventListener('click', function(){ foo.inc(); }); //=> this === foot

// cas #3
element.addEventListener('click', foo.inc.bind(foo)); //=> this === foo

Dans ce premier épisode, nous avons étudié en détail un des aspects fascinants de JavaScript : JavaScript en tant que langage fonctionnel. J'espère qu'en comprenant comment les fonctions sont traitées en interne par JavaScript, cela vous permettra de changer votre façon d'écrire du code JavaScript, en passant d'un « banal » code qui fonctionne à un code qui fonctionne, certes, mais digne d'un vrai Jedi que vous êtes.

Voilà, nous avons atteint la fin de ce premier épisode ; rendez-vous pour le second épisode dans lequel nous allons tenter de percer le mystère des fermetures en JavaScript, connu sous le nom de « closures ».

Que la force soit avec vous…

Un grand merci à mes collègues à SII Ouest, Vincent Ogloblinsky et Aurélien Baudet pour leurs relectures et échanges techniques et à Sylvain Reyt et Nicolas Bulteau pour leurs précieux conseils et leurs encouragements.

Je tiens à remercier l'équipe de Developpez.com, et tout particulièrement M. Sylvain Pollet-Villard pour sa relecture technique qui a permis de clarifier certains points. Merci également à M. Xavier Lecomte pour son aide et son accompagnement. Un dernier merci à M. Malick SECK pour sa relecture orthographique.

[1] :http://mzl.la/12Efmj8

[2] :http://mzl.la/1xbLo3s