🧩 Módulos en JavaScript (Imports y Exports)

Introducción

En JavaScript, los módulos bloques de código y una forma de organizar el código en archivos separados y reutilizables. Para usar el código de un módulo en otro archivo, se utilizan la importación y exportación. En este artículo, se explicará qué son las importaciones y exportaciones en JavaScript, cómo se utilizan y por qué son importantes para la programación modular.

Descripción

Los imports y exports son la forma en que JavaScript maneja los módulos y permiten a un módulo acceder a otro y se utilizan con una sintaxis determinada.

Sintaxis de export

La palabra-clave export se utiliza para exportar código para su uso en otros archivos. Hay dos formas de exportar código en JavaScript:

Exportar valores individuales

// Exportar un valor individual
export const PI = "3.14";

// Exportar una función
export const saludar= (nombre) => {
    console.log(`Hola ${nombre}`)
}

Exportar un elemento por defecto

// Exportar un objeto
const persona = {
  name: "Juan",
  age: 25,
};

export default persona

En este ejemplo, se exporta un objeto por defecto. El objeto se puede importar en otro archivo utilizando la sintaxis de importación. Esto se usa muchísimo en React.js, visto que éste se basa enteramente en su concepto de Componentes funcionales.

Sintaxis de import

La sintaxis de import se utiliza para traer módulos de otros archivos. Hay varias formas de importar módulos en JavaScript, incluyendo la importación de variables, funciones, clases y objetos.

// Importando una función
import { saludar} from './saludos.js';

// Importando una variable
import { PI} from './numeros.js';

// Importando un elemento por defecto
import persona  from './personas.js';

En el ejemplo anterior, se muestra cómo se pueden importar una función, una variable y un elemento por defecto. La ruta del archivo que contiene el módulo se especifica entre comillas simples.

Es importante destacar que el nombre del elemento que se desea importar debe coincidir con el nombre del elemento que se ha exportado en el archivo original.

Renombrando módulos

Si se desea importar un módulo con un nombre diferente, se puede utilizar la palabra-clave as para renombrar el elemento importado. Por ejemplo:


import { saludar as saludarEnEspanol } from './saludos.js';

En el ejemplo anterior, la función saludar del archivo “saludos.js” se importa como “saludarEnEspanol”.

Si se desea importar todos los elementos de un módulo, se puede utilizar el simbolo “*” como comodín. Por ejemplo:


import * as numeros from './numeros.js';

Aquí se importan todos los elementos del archivo “numeros.js” y se almacenan en el objeto “numeros”.

Conclusión

Los imports y exports son particularmente útiles cuando se trabaja con código JavaScript complejo que se encuentra en múltiples archivos. Los módulos permiten dividir el código en unidades más pequeñas y fáciles de mantener, y también permiten reutilizar el código en diferentes partes de una aplicación.

Dev.lucas