Esercizi Moduli JavaScript

Codegrind Team•Jul 12 2024

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.14
console.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.14
console.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.com
console.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)); // 8
console.log(math.sottrai(5, 3)); // 2