¿Cómo funcionan los operadores import y export en JavaScript?

Los operadores import y export se utilizan para trabajar con módulos en JavaScript, permitiendo dividir el código en partes independientes y reutilizables y gestionar las dependencias entre ellas.

export

El operador export se usa para exportar variables, funciones, clases u otros valores desde un módulo. La exportación puede ser nombrada o por defecto.

Exportación nombrada:

// module.js
export const myVariable = 10;
export function myFunction() { // ... }
export class MyClass { // ... }

Exportación por defecto: en un módulo puede haber solo una exportación por defecto.

// module.js
const defaultValue = 'default value';
export default defaultValue;

import

El operador import se usa para importar valores exportados por otros módulos.

Importación nombrada:

// another-module.js
import { myVariable, myFunction } from './module.js';

Importación con otro nombre:

// another-module.js
import { myVariable as newVariableName } from './module.js';

Importar todos los nombres exportados como un objeto:

// another-module.js
import * as moduleAlias from './module.js';
// Acceso: moduleAlias.myVariable, moduleAlias.myFunction

Importar exportación por defecto:

// another-module.js
import defaultValueName from './module.js';

Importar tanto la exportación nombrada como la por defecto simultáneamente:

// another-module.js
import defaultValueName, { myVariable, myFunction } from './module.js';

Principios de funcionamiento:

1. Análisis estático: El motor de JavaScript analiza los operadores import y export durante la compilación (antes de ejecutar el código), creando un gráfico de dependencias entre los módulos.
2. "Vínculos" vivos: Las variables importadas no son copias de los valores del módulo exportador. Son "vínculos" vivos (referencias vivas) a las variables del módulo original. Si el valor de una variable en el módulo exportador cambia, ese cambio será visible a través del vínculo importado.
3. Ejecución única: El código de cada módulo se ejecuta solo una vez en la primera importación de ese módulo. Los resultados de la exportación se almacenan en caché y se usan en importaciones posteriores.
4. Uso en contexto: Los módulos se ejecutan en su propio contexto, aislado del ámbito global. Las variables declaradas en la raíz del módulo no contaminan el espacio global a menos que se exporten explícitamente.