Los módulos en javascript te permite manejar código en archivos de manera modular, involucrando la exportación de funciones o variables en un archivo, o importarlas en un archivo donde se necesite.
//index.js
import { hello } from "./module";
hello();
// module.js
const hello = () => {
console.log("Hello");
};
export default hello;Como dato curioso, este concepto de módulos viene de la programación modular. Este es uno de los paradigmas de programación, así como la programación orientada a objetos.
Vamos a la práctica para aprender a utilizar los módulos de Javascript.
Inicializando módulos en Javascript
Si iniciaste un proyecto con NPM con Node.js, debes especificar que el código es modular en el archivo package.json.
// package.json
{ ...
"type": "module"
}
Incluso tienes la opción de evitar la configuración del JSON usando la extensión .mjs en el archivo, por ejemplo, module.mjs. Esto le indicará a Javascript que es un módulo.
Exportación de módulos en javascript
Con las exportaciones puedes crear funciones o variables para utilizarlas en otros archivos, con la palabra reservada export. Para poder exportar el código, declara la funcionalidad o entre las llaves ({}).
// Exportación con llaves
export const add = (x,y) => {
return x + y
}
// Exportación declarando la funcionalidad
const add = (x,y) => {
return x + y
}
export { add, otherFunction, ... }
Exportación de módulos por defecto
Si solo UN valor será exportado, entonces se puede utilizar export default. De esta manera no es necesario las llaves {} al exportar e importar.
//math_function.js
export default function add (x,y){
return x + y;
}
Ten en cuenta que no se puede usar export default antes de declaraciones const, let o var, pero puedes exportarlas al final.
// ❌ Erróneo
export default const add = (x,y) => {
return x + y;
}
// ✅ Correcto
const add = (x,y) => {
return x + y;
}
export default add
Importación de módulos en javascript
Con las importaciónes puedes utilizar funciones o variables de otros archivos con la palabra reservada import. Puedes importar declarando la funcionalidad o entre las llaves ({}).
// main.js
import { add, otherFunction } from './math_functions.js'
add(2,2) //4
Las importaciones deben siempre estar en lo más arriba del archivo y usando el mismo nombre que el archivo original.
Toma en cuenta que no usar el mismo nombre con el que fue declarado, tendrá un error de sintaxis.
Con el asterisco (*) importas todas las funcionalidades de un archivo y tambipen cambiar el nombre para evitar la repetición de variables o funciones a traves de la palabra reservada as.
import * as myMathModule from './math_functions.js';
myMathModule.add(2,2) //4
myMathModule.otherFunction()
Importación de módulos por defecto
Si únicamente un valor será importado, entonces se puede utilizar cualquier nombre en la importación. De esta manera no es necesario las llaves {}.
//Las siguientes importaciones son válidas
import add from './math_functions.js'
import suma from './math_functions.js'
import cualquierNombre from './math_functions.js'
Sin embargo, es recomendable utilizar siempre el nombre de la función, para evitar confusiones.
Combinar ambos tipos de exportaciones e importaciones
Teniendo las consideraciones de importaciones y exportaciones, nombradas y por defecto, entonces podemos combinarlas en un mismo archivo.
// module.js
export const myExport = "hola"
function myFunction() {
//Code
}
export default myFunction
// main.js
import myFunction, { myExport } from "/module.js"
Conclusión
Trabajar por módulos es una manera sencilla de programar para mantener y cuidar tu código, especialmente si es un proyeto grande. Y así como dice el dicho: divide y vencerás.
¿Qué formas de exportar e importar en Javascript te gusta utilizar? Escribelo en la cajita de los comentarios, me gustaría las maneras de otros programadores.
Si te ayudó, no olvides compartir y seguirme en mis redes sociales para más contenido.
👉 Únete a mi Canal de WhatsApp para más recursos
👉 Sigueme en mis redes sociales para más contenido de programación y productividad