Comment fonctionnent les opérateurs import et export en JavaScript?

Les opérateurs import et export sont utilisés pour travailler avec des modules en JavaScript, permettant de diviser le code en parties indépendantes, réutilisables et de gérer les dépendances entre elles.

export

L'opérateur export est utilisé pour exporter des variables, fonctions, classes ou autres valeurs depuis un module. L'export peut être nommé ou par défaut.

Exportation nommée:

// module.js
export const myVariable = 10;
export function myFunction() { // ... }
export class MyClass { // ... }

Exportation par défaut : un module ne peut avoir qu'une seule exportation par défaut.

// module.js
const defaultValue = 'default value';
export default defaultValue;

import

L'opérateur import est utilisé pour importer des valeurs exportées par d'autres modules.

Importation nommée:

// another-module.js
import { myVariable, myFunction } from './module.js';

Importation avec un autre nom:

// another-module.js
import { myVariable as newVariableName } from './module.js';

Importer tous les noms exportés sous forme d'objet:

// another-module.js
import * as moduleAlias from './module.js';
// Accès : moduleAlias.myVariable, moduleAlias.myFunction

Importer l'exportation par défaut:

// another-module.js
import defaultValueName from './module.js';

Importer à la fois l'exportation nommée et celle par défaut simultanément:

// another-module.js
import defaultValueName, { myVariable, myFunction } from './module.js';

Principes de fonctionnement:

1. Analyse statique: Le moteur JavaScript analyse les opérateurs import et export lors de la compilation (avant l'exécution du code), créant un graphique de dépendances entre les modules.
2. "Liens" vivants: Les variables importées ne sont pas des copies des valeurs du module exporteur. Ce sont des "liens" vivants (références vivantes) aux variables du module original. Si la valeur d'une variable dans le module exporteur change, cette modification sera visible via le lien importé.
3. Exécution unique: Le code de chaque module ne s'exécute qu'une seule fois lors de la première importation de ce module. Les résultats de l'exportation sont mis en cache et utilisés lors des importations suivantes.
4. Utilisation en contexte: Les modules s'exécutent dans leur propre contexte, isolé du contexte global. Les variables déclarées à la racine du module ne polluent pas l'espace global, sauf si elles sont explicitement exportées.