Les modules

Modules JavaScript et syntaxe d'import/export

Partie théorique

En JavaScript, un module est un fichier contenant du code JavaScript, qui est isolé des autres modules.

info

Chaque module a sa propre portée, c'est-à-dire que les variables, les fonctions, etc., déclarées dans un module ne sont pas visibles en dehors de ce module, sauf si elles sont exportées.

• Pour permettre d'utiliser les variables ou les fonctions d'un module dans un autre module, nous devons les exporter à l'aide du mot-clé export.

• De même, pour utiliser ces variables ou fonctions exportées dans un autre module, nous devons les importer à l'aide du mot-clé import.

Exemple pratique

Supposons que nous ayons un module nommé math.js qui contient 2 fonctions : add et multiply.

// math.js
export function add(a, b) {
  return a + b;
}

export function multiply(a, b) {
  return a * b;
}

Nous pouvons utiliser ces fonctions dans un autre module en les important.

// app.js
import { add, multiply } from './math.js';

console.log(add(2, 3)); // Affiche 5
console.log(multiply(2, 3)); // Affiche 6

Test de mémorisation/compréhension

Que fait le mot-clé 'export' en JavaScript ?

Il importe des fonctions, des objets ou des valeurs primitives à partir d'autres modules.

Il exporte des fonctions, des objets ou des valeurs primitives à partir d'un module.

Il déclare une variable.

Il crée une nouvelle fonction.

Que fait le mot-clé 'import' en JavaScript ?

Il importe des fonctions, des objets ou des valeurs primitives à partir d'autres modules.

Il exporte des fonctions, des objets ou des valeurs primitives à partir d'un module.

Il déclare une variable.

Il crée une nouvelle fonction.

TP pour réfléchir et résoudre des problèmes

Créez deux modules : calculatrice.js et app.js.

• Le module calculatrice.js doit exporter quatre fonctions : add, subtract, multiply et divide.
• Le module app.js doit importer ces fonctions et les utiliser pour effectuer quelques calculs.

  console.log(add(10, 5)); // Affiche 15
  console.log(subtract(10, 5)); // Affiche 5
  console.log(multiply(10, 5)); // Affiche 50
  console.log(divide(10, 5)); // Affiche 2

Une solution possible

Contenu du fichier calculatrice.js :

export function add(a, b) {
  return a + b;
}

export function subtract(a, b) {
  return a - b;
}

export function multiply(a, b) {
  return a * b;
}

export function divide(a, b) {
  if (b === 0) {
    return 'Erreur: division par zéro';
  }
  return a / b;
}

Contenu du fichier app.js :

import { add, subtract, multiply, divide } from './calculatrice.js';

console.log(add(10, 5)); // Affiche 15
console.log(subtract(10, 5)); // Affiche 5
console.log(multiply(10, 5)); // Affiche 50
console.log(divide(10, 5)); // Affiche 2