Introduzione

In JavaScript moderno (ES6) è possibile suddividere il codice in moduli, cioè file separati che contengono funzioni, oggetti o classi. Ogni modulo può esportare elementi da rendere disponibili ad altri file e può importare ciò che serve. Questo approccio migliora l’organizzazione e facilita la manutenzione del codice.

• Ogni file è un modulo.
• export rende disponibile una funzione, variabile o classe ad altri moduli.
• import permette di utilizzare ciò che è stato esportato da altri file.

Export di funzioni e variabili

Possiamo esportare funzioni o costanti da un file JavaScript.

Codice Esempio: modulo matematico (math.js)

CODE: Javascript

1. export function somma(a, b) {

2.   return a + b;

3. }

5. export const PI = 3.14;

Import in un altro file

Per usare ciò che è stato esportato si utilizza import.

Codice Esempio: utilizzo del modulo (main.js)

CODE: Javascript

1. import { somma, PI } from './math.js';

3. console.log(somma(4, 6)); // 10

4. console.log(PI); // 3.14

Export e import di default

Un modulo può avere un export di default, cioè un elemento principale. In tal caso non serve usare le graffe {} per importarlo.

Codice Esempio: export default

CODE: Javascript

1. // file messaggio.js

2. export default function saluta(nome) {

3.   return "Ciao " + nome;

4. }

6. // file main.js

7. import saluta from './messaggio.js';

8. console.log(saluta("Marco")); // Ciao Marco

Tabella riassuntiva

Considerazioni

L’uso dei moduli rende il codice scalabile e organizzato. Con import ed export possiamo riutilizzare il codice tra file diversi e separare le responsabilità. Questa pratica è alla base dei progetti moderni in JavaScript e viene usata in framework come React, Angular e Vue.