Esercizi Moduli JavaScript
Ecco degli esercizi con soluzione per praticare l’uso dei moduli in JavaScript.
Esercizio 1: Esportare e Importare una Funzione
Creare un modulo che esporti una funzione e importarla in un altro file.
math.js
export function somma(a, b) { return a + b;}main.js
import { somma } from "./math.js";
console.log(somma(2, 3)); // 5Esercizio 2: Esportare e Importare una Classe
Creare un modulo che esporti una classe e importarla in un altro file.
persona.js
export class Persona { constructor(nome, eta) { this.nome = nome; this.eta = eta; }
descrizione() { return `${this.nome} ha ${this.eta} anni.`; }}main.js
import { Persona } from "./persona.js";
const persona = new Persona("Mario", 30);console.log(persona.descrizione()); // Mario ha 30 anni.Esercizio 3: Esportazione di Default
Creare un modulo che esporti di default una funzione e importarla in un altro file.
saluto.js
export default function saluta() { return "Ciao, mondo!";}main.js
import saluta from "./saluto.js";
console.log(saluta()); // Ciao, mondo!Esercizio 4: Esportazione Multipla
Creare un modulo che esporti più elementi e importarli in un altro file.
util.js
export const PI = 3.14;
export function areaCerchio(raggio) { return PI * raggio * raggio;}
export class Rettangolo { constructor(altezza, larghezza) { this.altezza = altezza; this.larghezza = larghezza; }
area() { return this.altezza * this.larghezza; }}main.js
import { PI, areaCerchio, Rettangolo } from "./util.js";
console.log(PI); // 3.14console.log(areaCerchio(5)); // 78.5
const rettangolo = new Rettangolo(10, 20);console.log(rettangolo.area()); // 200Esercizio 5: Ridenominazione di Importazioni
Importare e rinominare un elemento esportato.
math.js
export function somma(a, b) { return a + b;}main.js
import { somma as add } from "./math.js";
console.log(add(2, 3)); // 5Esercizio 6: Importare Tutto
Importare tutti gli elementi di un modulo utilizzando `*`.
util.js
export const PI = 3.14;
export function areaCerchio(raggio) { return PI * raggio * raggio;}
export class Rettangolo { constructor(altezza, larghezza) { this.altezza = altezza; this.larghezza = larghezza; }
area() { return this.altezza * this.larghezza; }}main.js
import * as util from "./util.js";
console.log(util.PI); // 3.14console.log(util.areaCerchio(5)); // 78.5
const rettangolo = new util.Rettangolo(10, 20);console.log(rettangolo.area()); // 200Esercizio 7: Esportazione di Oggetti
Esportare e importare un oggetto.
config.js
export const config = { apiUrl: "https://api.example.com", timeout: 5000,};main.js
import { config } from "./config.js";
console.log(config.apiUrl); // https://api.example.comconsole.log(config.timeout); // 5000Esercizio 8: Esportazione Condizionale
Utilizzare condizioni per esportare variabili differenti.
config.js
const ambiente = "produzione";
let apiUrl;if (ambiente === "produzione") { apiUrl = "https://api.example.com";} else { apiUrl = "https://api.dev.example.com";}
export { apiUrl };main.js
import { apiUrl } from "./config.js";
console.log(apiUrl); // https://api.example.comEsercizio 9: Esportare Funzioni Anonime
Esportare una funzione anonima e importarla in un altro file.
logger.js
export default function (message) { console.log(message);}main.js
import log from "./logger.js";
log("Questo è un messaggio di log."); // Questo è un messaggio di log.Esercizio 10: Esportare Funzioni come Metodi di un Oggetto
Esportare funzioni come metodi di un oggetto e importarli in un altro file.
math.js
function somma(a, b) { return a + b;}
function sottrai(a, b) { return a - b;}
export default { somma, sottrai,};main.js
import math from "./math.js";
console.log(math.somma(5, 3)); // 8console.log(math.sottrai(5, 3)); // 2
