Esercizi Moduli JavaScript
- Esercizio 1: Esportare e Importare una Funzione
- Esercizio 2: Esportare e Importare una Classe
- Esercizio 3: Esportazione di Default
- Esercizio 4: Esportazione Multipla
- Esercizio 5: Ridenominazione di Importazioni
- Esercizio 6: Importare Tutto
- Esercizio 7: Esportazione di Oggetti
- Esercizio 8: Esportazione Condizionale
- Esercizio 9: Esportare Funzioni Anonime
- Esercizio 10: Esportare Funzioni come Metodi di un Oggetto
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)); // 5
Esercizio 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()); // 200
Esercizio 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)); // 5
Esercizio 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()); // 200
Esercizio 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); // 5000
Esercizio 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.com
Esercizio 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