Hoisting de fonctions en Javascript

Dans notre article précédent, qui entrait dans le cadre de notre série consacrée aux fonctions en Javascript, nous avions abordé les diverses façons de déclarer une fonction. Envisageons à présent les différences de comportement qu’implique chaque écriture.

Fonction déclarative

Le hoisting consiste en l’interprétation des déclarations. En Javascript, lorsque le script se lance, le code est restructuré par l’interpréteur qui remonte l’ensemble des déclarations de fonction pour les placer devant les déclarations de variables.

Ceci permet de ne déclarer qu’une seule fois les fonctions pour l’ensemble du programme. Deux fonctions différentes avec un même identifiant s’écrasent donc, et seule la dernière fonction reste accessible.

C’est aussi pour cette raison qu’il est possible d’appeler une fonction avant sa déclaration.

Javascript remonte les déclarations de fonction, car ce langage considère ces fonctions à un niveau global: elles doivent servir l’ensemble du code, à l’inverse des variables qui procèdent davantage d’un contexte local.

C’est pourquoi il n’est normalement pas permis de déclarer une fonction à l’intérieur d’un bloc de code, bien qu’il existe à ce sujet une certaine tolérance de la part des interpréteurs en mode non-strict.

Ce type d’écriture est déconseillée à tout prix, car elle peut entraîner des comportements différents en fonction des navigateurs.

Bien heureusement, en tout cas dans les navigateurs récents que j’ai pu tester, si une fonction est déclarée à l’intérieur d’une autre fonction, elle n’est pas déclarée de manière globale et connaît une portée équivalente aux variables.

Expression de fonction

A l’inverse des déclarations, les expressions de fonction doivent être déclarées avant d’être utilisées, ce qui entraîne de fait une redéfinition complète de la fonction lors de chaque initialisation.

Les expressions de fonction sont également écrasées, mais peuvent être définies autant de fois que souhaité.

La réinitialisation constante d’une fonction lors de chaque définition nécessite de minimiser le code appelé, notamment lors de la déclaration d’une classe où l’on passera plus volontiers par l’attribut prototype pour sortir la définition des méthodes.

Une autre technique consiste notamment à utiliser des fonctions qui retournent elles-mêmes des fonctions.

Instanciation de fonction

Attention, enfin, au comportement particulier du constructeur Function, qui, contrairement à une expression de fonction, ne connaît pas la portée courante si elle ne lui est pas explicitement passée en paramètre.

Conclusion

Deux grands principes à retenir concernant le hoisting:

  • Si une fonction est déclarative, il est important de la placer au niveau global du code pour éviter tout effet inattendu. L’utilisation du mode strict permet de prévenir toute mauvaise utilisation de ce type.
  • S’il s’agit d’une expression de fonction, il est important d’éviter la multiplication des initialisations d’une même définition, car cela peut entraîner une lourdeur superflue du code.

Dans notre prochain article, nous envisagerons les différentes façons d’appeler une fonction.

3 réflexions au sujet de « Hoisting de fonctions en Javascript »

  1. Ping : Déclaration et définition de fonctions en Javascript | The Dark Side Of The Web

  2. Ping : Les fonctions en Javascript | The Dark Side Of The Web

Laisser un commentaire

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

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>