Come funzionano gli operatori import e export in JavaScript?

Gli operatori import e export vengono utilizzati in JavaScript per lavorare con i moduli, consentendo di dividere il codice in parti indipendenti, riutilizzabili e di gestire le dipendenze tra di essi.

export

L'operatore export viene usato per esportare variabili, funzioni, classi o altri valori da un modulo. L'esportazione può essere nominata o di default.

Esportazione nominata:

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

Esportazione di default: un modulo può avere solo un'esportazione di default.

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

import

L'operatore import viene usato per importare valori esportati da altri moduli.

Importazione nominata:

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

Importazione con altro nome:

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

Importare tutti i nomi esportati come oggetto:

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

Importare esportazione di default:

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

Importare sia l'esportazione nominata che quella di default contemporaneamente:

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

Principi di funzionamento:

1. Analisi statica: Il motore JavaScript analizza gli operatori import e export durante la compilazione (prima dell'esecuzione del codice), creando un grafo di dipendenze tra i moduli.
2. "Vicinanze" vive: Le variabili importate non sono copie dei valori del modulo esportatore. Sono "vivi" legami (riferimenti vivi) alle variabili del modulo originale. Se il valore di una variabile nel modulo esportatore cambia, questa modifica sarà visibile attraverso il legame importato.
3. Esecuzione unica: Il codice di ogni modulo viene eseguito solo una volta alla prima importazione di quel modulo. I risultati dell'esportazione vengono memorizzati nella cache e usati nelle importazioni successive.
4. Utilizzo nel contesto: I moduli vengono eseguiti nel loro contesto proprio, isolato dall'ambito globale. Le variabili dichiarate nella radice del modulo non inquinano lo spazio globale, a meno che non siano esportate esplicitamente.