5.15 Exercice: Fonction Factory et Constructeur

Dans l'exercice précédent, nous avons utilisé la syntaxe littérale pour créer un objet adresse. Cette fois, l'objectif est d'initialiser le même objet de deux manières différentes : d'abord avec une factory function, puis avec une fonction constructeur. Faites l'exercice, puis revenez consulter la correction.

Version factory function

Une factory function se contente de retourner un nouvel objet. On lui passe les trois valeurs en paramètres et elle assemble l'objet à partir de la syntaxe littérale. Comme les noms des paramètres correspondent aux clés, on peut utiliser la syntaxe abrégée d'ES6 et omettre la duplication.

function createAddress(street, city, zipCode) {
							  return { street, city, zipCode };
							}
							
							const address = createAddress('a', 'b', 'c');
							console.log(address);

On respecte la convention camelCase habituelle pour le nom des factory functions.

Version fonction constructeur

Pour la fonction constructeur, la convention de nommage change : on utilise PascalCase, avec la première lettre du nom en majuscule. Au lieu de retourner un objet, on utilise le mot-clé this pour assigner les propriétés sur l'objet en cours de construction.

function Address(street, city, zipCode) {
							  this.street = street;
							  this.city = city;
							  this.zipCode = zipCode;
							}
							
							const address = new Address('a', 'b', 'c');
							console.log(address);

L'opérateur new joue un triple rôle : il crée un nouvel objet vide, fait pointer this vers cet objet pendant l'exécution de la fonction, puis retourne automatiquement l'objet.

Les deux approches produisent strictement le même résultat. L'objectif de cet exercice était de bien ancrer la syntaxe de chaque pattern. Dans le prochain exercice, nous manipulerons un objet plus riche : la publication d'un article de blog.

En résumé

Cet exercice pratique montre comment initialiser un objet adresse selon deux méthodes différentes : via une fonction factory (qui retourne un nouvel objet) et via une fonction constructeur (qui utilise le mot-clé this et l'opérateur new). Les deux approches permettent de créer des objets identiques avec les propriétés rue, ville et code postal, mais utilisent des syntaxes et des conventions de nommage distinctes.

Points clés

• Fonction factory : retourne simplement un nouvel objet contenant les propriétés ; utilise la convention camelCase
• Fonction constructeur : utilise le mot-clé this pour initialiser les propriétés et l'opérateur new pour créer l'instance ; utilise la convention PascalCase
• Les deux approches produisent des objets identiques avec les mêmes propriétés (rue, ville, code postal)
• La syntaxe factory est plus simple et lisible pour les débutants
• L'opérateur new est obligatoire pour appeler une fonction constructeur

Questions fréquentes

Quelle est la différence fondamentale entre une fonction factory et une fonction constructeur?

Une fonction factory retourne simplement un nouvel objet sans mot-clé spécial. Une fonction constructeur utilise le mot-clé this pour initialiser les propriétés et doit être appelée avec l'opérateur new.

Pourquoi les fonctions constructeurs utilisent-elles PascalCase comme convention de nommage?

C'est une convention JavaScript pour indiquer que la fonction est destinée à être utilisée avec l'opérateur new, ce qui la distingue clairement des fonctions normales qui utilisent camelCase.

Les deux méthodes produisent-elles le même résultat?

Oui, les deux méthodes créent des objets identiques avec les mêmes propriétés et valeurs. La différence réside uniquement dans la syntaxe et l'approche utilisée pour les créer.