5.2 Fonction Factory

Dans la vidéo précédente, vous avez appris à utiliser la syntaxe littérale pour créer un objet. Cette approche pose toutefois un problème dès qu'il faut créer plusieurs instances d'un même type. Imaginez qu'on duplique notre objet circle pour en avoir deux : on duplique aussi l'implémentation de chaque méthode. Si la méthode contenait dix lignes de code et qu'un bug s'y glissait, il faudrait le corriger à plusieurs endroits.

Quand un objet contient de la logique, on a donc besoin d'un mécanisme de fabrication. Deux patterns existent en JavaScript : les factory functions et les fonctions constructeur. Voyons d'abord les factory functions.

Définir une factory function

Comme son nom l'indique, une factory function est une fonction qui « fabrique » et retourne un nouvel objet. On déplace simplement la définition de l'objet à l'intérieur de la fonction, on paramètre les valeurs variables, et on retourne l'objet créé.

function createCircle(radius) {
							  return {
							    radius,
							    draw() {
							      console.log('draw');
							    }
							  };
							}
							
							const circle1 = createCircle(1);
							const circle2 = createCircle(2);
							circle1.draw();

Les sucres syntaxiques d'ES6

Le code ci-dessus utilise deux raccourcis introduits par ES6. Quand une clé d'objet porte le même nom que la valeur (variable) qu'on lui assigne, on peut omettre la duplication : { radius } au lieu de { radius: radius }. Pour les méthodes, on peut aussi omettre le mot-clé function et la paire clé: function(), et écrire directement draw() { ... }.

Le gros avantage du pattern factory, c'est que la logique de la méthode draw est définie à un seul endroit. Si un bug apparaît, vous le corrigez à un seul endroit et tous les cercles bénéficient automatiquement de la correction. C'est l'un des bénéfices fondamentaux de l'encapsulation par fonction.

Mais les factory functions ne sont pas le seul moyen de créer des objets en JavaScript. La prochaine vidéo couvre les fonctions constructeur, qui résolvent le même problème avec une approche un peu différente — notamment en utilisant this et l'opérateur new.