Intermediojavascript
Modulos ES6 (import/export)
Organiza tu codigo en modulos reutilizables con la sintaxis estandar de import y export.
Export e Import
Los modulos permiten dividir el codigo en archivos separados. Cada archivo es un modulo con su propio scope. Hay dos tipos de exports: named exports y default export.
javascript
1// utils.js
2export const PI = 3.14159;
3
4export function calcularArea(radio) {
5 return PI * radio ** 2;
6}
7
8export default class Circulo {
9 constructor(radio) {
10 this.radio = radio;
11 }
12 area() {
13 return calcularArea(this.radio);
14 }
15}Importar modulos
Puedes importar exports con nombre usando llaves
{}, el default export sin llaves, o todo el modulo con * as.javascript
1// main.js\nimport Circulo, { PI, calcularArea } from "./utils.js";\n\nconsole.log(PI); // 3.14159\nconsole.log(calcularArea(5)); // 78.539...\n\nconst c = new Circulo(10);\nconsole.log(c.area()); // 314.159...\n\n// Importar todo como namespace\nimport * as Utils from "./utils.js";\nconsole.log(Utils.PI);Dynamic imports
Los dynamic imports permiten cargar modulos bajo demanda con
import(), que retorna una Promesa. Ideal para code splitting.javascript
1async function cargarGrafico() {
2 const { Chart } = await import("./chart-library.js");
3 const chart = new Chart("#container");
4 chart.render(datos);
5}
6
7boton.addEventListener("click", cargarGrafico);Prueba lo aprendido
Escribe código JavaScript y ejecútalo directamente en el navegador.
Editor de Códigojavascript
1// utils.js
2export const PI = 3.14159;
3
4export function calcularArea(radio) {
5 return PI * radio ** 2;
6}
7
8export default class Circulo {
9 constructor(radio) {
10 this.radio = radio;
11 }
12 area() {
13 return calcularArea(this.radio);
14 }
15}