En JavaScript, los módulos son unidades de código independientes que pueden exponer activos a otros módulos mediante la exportación y consumir activos de otros módulos mediante la importación. Este mecanismo es esencial para crear código modular y reutilizable en aplicaciones JavaScript modernas.

Exportaciones predeterminadas

• Un módulo solo puede tener una exportación predeterminada.
• Para exportar un activo predeterminado, use la palabra clave predeterminada antes de la entidad exportada.
• Para importar una exportación predeterminada, puede asignarla directamente a una variable sin especificar el nombre exportado:

// Exporting a default asset
export default function greet(name) {
  console.log(`Hello, ${name}!`);
}

// Importing the default export
import greet from './myModule';

Exportaciones nombradas

• Un módulo puede tener varias exportaciones con nombre.
• Para exportar un activo con nombre, use la palabra clave export antes de la entidad exportada y asígnele un nombre.
• Para importar exportaciones con nombre, debe especificar los nombres de los activos que desea importar:

// Exporting named assets
export function greet(name) {
  console.log(`Hello, ${name}!`);
}

export function farewell(name) {
  console.log(`Goodbye, ${name}!`);
}

// Importing named exports
import { greet, farewell } from './myModule';

Combinación de exportaciones predeterminadas y con nombre

Puedes tener tanto una exportación predeterminada como exportaciones con nombre en un solo módulo:

export default function greet(name) {
  console.log(`Hello, ${name}!`);
}

export function farewell(name) {
  console.log(`Goodbye, ${name}!`);
}

Para importar las exportaciones predeterminadas y con nombre:

import greet, { farewell } from './myModule';

Puntos clave para recordar

• La exportación se utiliza para exponer activos de un módulo.
• la importación se utiliza para consumir activos de otros módulos.
• Un módulo solo puede tener una exportación predeterminada.
• Las exportaciones nombradas se pueden importar individual o colectivamente.
• Los nombres utilizados para las importaciones son arbitrarios y no tienen que coincidir con los nombres utilizados en el módulo exportado.

Ejemplo práctico

Considere un componente de React:

import React from 'react';

export default function Greeting({ name }) {
  return 
Hello, {name}!
;
}

En este ejemplo, el componente Saludo se exporta como exportación predeterminada. Se puede importar y utilizar en otros componentes:

import Greeting from './Greeting';

function MyComponent() {
  return ;
}

Al comprender las exportaciones e importaciones, puede organizar y reutilizar código de manera efectiva en sus proyectos de JavaScript.