import/export: el núcleo del sistema de módulos

Al finalizar este tema

Comprenderá la sintaxis de importación y exportación de los ES Modules y aprenderá a separar adecuadamente el código.

Escribir todo el código en un solo archivo

El JavaScript inicial colocaba todo el código en un único archivo. Cuando el archivo crecía, se producían conflictos de nombres de variables, resultaba difícil encontrar el código y no era reutilizable.

Módulo es un sistema que divide el código en archivos y permite exportar e importar solo lo necesario.

export: exportación

Existen dos formas de exportar desde un archivo para su uso en otros lugares.

Exportación con nombre — exporta especificando un nombre:

// utils.js
export function formatDate(date) {
  return date.toLocaleDateString();
}

export const MAX_ITEMS = 100;

Es posible exportar varios elementos desde un único archivo.

Exportación predeterminada: se exporta un único elemento predeterminado por archivo:

// Button.js
export default function Button({ label }) {
  return <button>{label}</button>;
}

import: Importación

Las exportaciones con nombre se importan mediante llaves:

import { formatDate, MAX_ITEMS } from "./utils.js";

Los nombres deben coincidir exactamente. Si desea cambiar el nombre, escriba as:

import { formatDate as format } from "./utils.js";

La exportación predeterminada se importa sin usar llaves:

import Button from "./Button.js";

Puedes asignarle el nombre que desees:

import MyButton from "./Button.js"; // lo mismo

Named vs Default

// Nombrado — exportar varios, nombre fijo
export function add(a, b) { return a + b; }
export function sub(a, b) { return a - b; }

import { add, sub } from "./math.js";

// Predeterminado — exportar uno, nombre libre
export default function Calculator() { ... }

import Calculator from "./Calculator.js";
import Calc from "./Calculator.js"; // nombre libre

Convención en la práctica:

• Componentes de React: exportación predeterminada (un componente por archivo)
• Funciones de utilidad, constantes: exportación con nombre (varios en el mismo archivo)

Ambos pueden usarse en conjunto:

import React, { useState, useEffect } from "react";

React es el valor predeterminado, mientras que useState y useEffect son valores con nombre.

Importación de todos los elementos

Se pueden importar todos los elementos con nombre de un archivo de una sola vez:

import * as utils from "./utils.js";

utils.formatDate(new Date());
utils.MAX_ITEMS;

Sin embargo, es mejor importar solo lo necesario, ya que el empaquetador puede eliminar el código no utilizado mediante la optimización de "tree-shaking".

Conceptos clave

Exporta con export e importa con import. Las exportaciones con nombre se importan entre llaves, mientras que las exportaciones predeterminadas se importan sin llaves. Por lo general, los componentes utilizan exportaciones predeterminadas y las funciones de utilidad o constantes utilizan exportaciones con nombre.