En el desarrollo de un proyecto, es inevitable ver como el número de líneas de código que escribimos va creciendo. Aunque seamos muy eficientes y organizados en nuestra escritura, nadie puede poner en duda que un código extenso en un proyecto de gran escala es difícil de leer y peor aún de editar. Por ello, en este post, te enseñaremos cómo funcionan los ES6 Modules en JavaScript para que puedas implementarlos y organizar tu proyecto.
¿Qué es un módulo?
La verdad es que, en un proyecto de programación, poco podremos controlar el número de líneas de código que necesitaremos escribir. Si es verdad que podemos ordenar nuestros elementos, como lo hemos visto con las clases de JavaScript e, incluso, podemos escribir una misma función de una manera más simple, como es el caso de la herencia. Sin embargo, no es el número de líneas de código el que afecta nuestra legibiidad, sino el hecho de que esté todo en un mismo archivo.
Por ello, lo que se suele hacer en programación es separar nuestro archivo en distintas unidades. Esto se usa mucho en HTML y CSS, pero también es común en JavaScript. Aquí, los módulos son una herramienta que nos permite separar el archivo index.js en distintas unidades lógicas o archivos. Esta práctica facilita la lectura y edición al describir claramente el propósito de cada sección de nuestro proyecto.
En JavaScript, existen distintos tipos o formatos de módulos. Dentro de la línea temporal de este lenguaje de programación, los CommonJS Modules son el formato más antiguo, seguido de una versión un poco más moderna conocida como AMD Modules. Los AMD Modules son exactamente iguales a los CommonJS, pero de naturaleza asíncrona.
Finalmente, encontramos nuestro tema de hoy: los ES6 Modules, que toman su nombre del estándar ECMAScript 6. A continuación, te contamos exactamente cómo funcionan los ES6 Modules en JavaScript.
¿Cómo funcionan los ES6 Modules en JavaScript?
A la hora de entender cómo funcionan los ES6 Modules en JavaScript, es importante conocer el funcionamiento de los CommonJS Modules, pues es este el formato del que toma para modificar y simplificar.
Los módulos ES6 en JavaScript permiten partir nuestro código en distintos archivos y reutilizarlo en diferentes sitios. Para ello, utilizan la misma lógica de importación y exportación de los CommonJS Modules, pero con las palabras clave export e import. Con ellas, podemos importar elementos de muchas maneras.
Name export
Para exportar una variable de un módulo en JavaScript usando los ES6 Modules, podemos añadir la palabra clave export y luego definir la variable. A la hora de importar, utilizaremos la palabra clave import y su nombre de objeto, por lo que deberemos insertar las llaves. A continuación, te ponemos un ejemplo:
export const name = ‘value’
import { name } from ‘…’
Con este método, puedes importar más de una variable usando su nombre dentro de las llaves y separándolas por comas.
Default Export
Otra manera de exportar una variable es usando la palabra clave default. Esta nos permite hacer que, con cualquier nombre, se importe la variable que hemos exportado. A diferencia del name export, solo podemos tener una variable default en un archivo. Puedes ver cómo funciona esto a continuación:
const saludo = ‘hola’
export default saludo
import bienvenida from ‘…’
Entonces, lo que sucede es que le podemos dar cualquier nombre a la variable en nuestro nuevo archivo. Además, no necesitaremos usar las llaves para definir esta variable, pues no tiene un nombre específico.
Rename Export
Este método nos permite renombrar una variable en la exportación para que se use el nuevo nombre en la importación. Esto es muy útil cuando sabemos que habrá otra variable con el mismo nombre en el nuevo archivo.
export {name as newName }
import { newName } from ‘…’
Rename Import
Además de poder cambiar el nombre en la exportación, podemos hacerlo en la importación de elementos. A continuación, te mostramos un ejemplo de una exportación:
export {
name 1,
name2 as newName2
}
Ahora, podemos no solo usar el nombre dado en la exportación para las variables, sino también cambiarla en la importación.
import {
name1 as newName1,
newName2
} from ‘…’
¿Qué sigue?
Después de leer este post, ya sabes cómo funcionan los ES6 Modules en JavaScript y estás preparado para crear y organizar tu propio proyecto. Para ello, te invitamos a formar parte de nuestro Desarrollo Web Full Stack Bootcamp. Allí seguirás aprendiendo a dominar los lenguajes de programación para la web, como JavaScript, CSS y HTML, y crearás tus propios proyectos con la guía de nuestros profesores. ¿A qué esperas para inscribirte? ¡Te estamos esperando!
