Pour les Jedis, JavaScript, épisode I : Au coeur des fonctions (partie 1)

Wassim Chegham
Sep 15, 2018 · 11 min read
  1. Pour les Jedis, JavaScript, épisode II : L’attaque des Closures (1 et 2)
  2. Pour les Jedis, JavaScript, épisode III : La revanche des Prototypes (1 et 2)

“JavaScript, tu l’apprends ou tu le quittes.”

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 c’est ce qui fera de vous des Jedis. En effet, la plupart des développeurs venant 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.

JavaScript est un langage fonctionnel

L’une des raisons qui fait 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 cours 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.

  • assignées à des variables ou propriétés d’un objet ;
  • passées en paramètre ;
  • retournées comme résultat ;
  • elles peuvent posséder des objets ou méthodes.

La boucle d’événements

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

  • se mettre dans une boucle d’événements en attente qu’un événement se produise ;
  • invoquer les actions à exécuter pour chaque événement.
La boucle d’événements du navigateur

Le principe de callback

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

Les fonctions anonymes

Étant donné la nature fonctionnelle du langage, il 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 claire, plus compact et en plus, cela permet d’éviter de polluer l’espace de nom globale avec des noms de fonctions inutiles.

Déclaration de 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) :

Portée et contexte(s) d’une fonction

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

En JavaScript, les contextes sont créés par les fonctions, et non pas par les blocs.

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

La porté des variables en JavaScript
  • la portée d’une fonction (non-anonyme) est globale à toute la fonction dans laquelle elle a été déclarée (functions declaration hoisting).

Invocation des fonctions

Nous avons forcément tous invoqué des fonctions en JavaScript, au moins une fois dans notre vie. Mais avez-vous déjà essayé de comprendre ce qui se passe lorsque vous invoquez une fonction ? Savez-vous qu’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. Ecrire du code digne d’un Jedi, repose sur la compréhension et la bonne maîtrise de ces mécanismes d’invocations.

  1. en tant que méthode, ce qui permet de lier l’invocation à un objet (POO) ;
  2. en tant que constructeur, ce qui permet de créer un objet (instance) ;
  3. via apply() et call() (expliqué plus loin).

Arguments et paramètres

Lorsqu’une liste d’arguments est fournie lors d’une invocation de fonction, ces arguments sont affectés aux paramètres (spécifiés lors de la déclaration) de la fonction, dans le même ordre. Jusque là rien de bien sorcier.

  • s’il y a moins d’arguments que de paramètres, alors les paramètres qui n’ont pas d’arguments seront mis à undefined.

L’argument “arguments”

Cet objet est une sorte de collection de tous les arguments passés à la fonction.

L’argument “this”

Cet argument est un peu particulier. Il représente l’objet qui est associé — de façon implicite — à l’invocation de la fonction. Il est aussi connu sous le terme de contexte. Le terme contexte est bien connu des développeurs habitués au développement orienté objet. Cependant, dans la majorité des cas, ces mêmes personnes pensent qu’en JavaScript, le mot clé this représente l’instance de la classe dans laquelle la méthode est définie. Ce n’est pas le cas !



CodeShake

Learnings and insights from SFEIR community.

Wassim Chegham

Written by

Angular Tooling team ★ GDE for Action On Google, GCP teams at Google ★ Member of Node.js Foundation ★ Follow me @manekinekko

CodeShake

CodeShake

Learnings and insights from SFEIR community.