game-learning

Avanzado

Módulos ES6

Objetivo: Organizar código en módulos con import/export y comprender el scope de módulo.

Explicación

Los módulos ES6 dividen el código en archivos con su propio scope.

- Exportar: export const x = 1 o export default funcion.
- Importar: import { x } from "./archivo.js" o import fn from "./archivo.js" (default).

Características clave:
- Cada módulo tiene su propio scope: no hay variables globales accidentales.
- export default permite importar sin desestructurar.
- Los módulos se cargan una sola vez (singleton).
- El scope de módulo es estricto: no se permite usar variables no declaradas.

Ejemplos

// math.js
export const PI = 3.1416
export function sumar(a, b) { return a + b }
export default function doblar(n) { return n * 2 }
// main.js
import doblar, { PI, sumar } from "./math.js"
console.log(PI)          // 3.1416
console.log(sumar(2, 3))  // 5
console.log(doblar(4))    // 8

Comprueba tu comprensión

Pregunta 1 de 5

¿Cuál es la diferencia entre export y export default?

Práctica opcional

Estos ejercicios no afectan tu dominio de la lección.

  • Divide un script pequeño en dos módulos: uno con utilidades puras y otro que las importa. Usa export nombrado y default.
  • Investiga qué pasa si importas un módulo circular (A importa B, B importa A). ¿Obtienes undefined en algún punto?