Les Modules en JavaScript

Introduction aux Modules

À mesure qu'un programme s'agrandit, il peut contenir un grand nombre de lignes de code. Au lieu de tout rassembler dans un seul fichier, l'utilisation de modules permet de séparer le code en plusieurs fichiers selon leur fonctionnalité. Cela rend le code plus structuré et plus facile à gérer.

Qu'est-ce qu'un Module?

Un module est un fichier qui contient du code réalisant une tâche spécifique. Ce fichier peut inclure des variables, des fonctions, des classes, etc.

Exemple de Module Simple

Prenons un exemple avec un fichier nommé greetPerson.js qui contient le code suivant :

// Exporting a function
export function greetPerson(name) {  
  return `Hi, ${name}`;
}

Pour utiliser ce code dans un autre fichier nommé main.js, on ajouterait :

// Importing greetPerson from greetPerson.js file
import { greetPerson } from './greetPerson.js';
// Using greetPerson() defined in greetPerson.js
let displayName = greetPerson('Codecademy');
console.log(displayName); // Output: Hi, Codecademy

Fonctionnalités d'Exportation de Modules

Il est également possible d'exporter plusieurs éléments depuis un module. Par exemple, dans un fichier module.js :

// Exporting the variable
export const name = 'Codecademy Docs';
// Exporting the function
export function difference(x, y) {  
  return x - y;
}

Dans le fichier principal main.js :

import { name, difference } from './module.js';
console.log(name); // Output: Codecademy Docs
let diff = difference(9, 5);
console.log(diff); // Output: 4

Renommer les Imports et Exports

Pour éviter les conflits de nom lorsque vous souhaitez importer des objets (variables, fonctions, etc.) déjà existants dans votre fichier principal, vous pouvez renommer ces objets lors de l'exportation ou de l'importation. Par exemple, pour renommer dans le fichier de module :

// In module.js
export { function1 as newName1, function2 as newName2 };

Dans main.js :

// In main.js
import { newName1, newName2 } from './module.js';

Exportation par Défaut

La possibilité d'une exportation par défaut est aussi envisageable. Dans le fichier greetPerson.js :

// Default export
export default function greetPerson(name) {  
  return `Hi, ${name}`;
}
export const age = 23;

Lors de l'importation, vous pouvez procéder ainsi :

import random_name from './greetPerson.js';

Ici, random_name fait référence à l'exportation par défaut (la fonction greetPerson dans ce cas). On peut utiliser l'export par défaut sans utiliser les accolades {}.

Mode Strict

Les modules sont, par défaut, en mode strict. Par exemple :

// In greetPerson.js
function greetPerson() {  
  // Strict by default
}
export greetPerson();