Módulos JavaScript (JavaScript Modules)

¡Hola HaWker! Jeff Bruchado por aquí.

Este es uno de los últimos artículos de nuestra serie de artículos que va a cubrir nuestro viaje para Aprender Programación desde Cero.

Los Módulos son como las piezas de LEGO en el mundo de la programación. Permiten que construyas tu proyecto dividiéndolo en bloques más pequeños, más manejables y reutilizables.

Vamos a entender por qué los Módulos son tan geniales:

Organización: Con módulos, puedes dividir tu código en archivos más pequeños y más fáciles de gestionar. Es como tener una caja de herramientas donde cada herramienta tiene su propio lugar.

Reutilización: ¿Creaste un trozo de código? Con módulos, puedes reutilizarlo en diferentes partes de tu proyecto, o incluso en otros proyectos, sin copiar y pegar.

Scope: Cada módulo tiene su propio scope. Esto significa que las variables, funciones, etc., dentro de un módulo no ensucian el espacio global de tu proyecto.

Dependencias: Los módulos dejan claro cuáles son las dependencias de cada parte de tu proyecto. Puedes ver exactamente lo que cada parte necesita para funcionar.

Entonces, ¿cómo funcionan los Módulos en JavaScript?

Exportando: Defines lo que cada módulo va a proporcionar a otros archivos usando export. Puede ser una función, una variable, una clase...
Importando: Cuando necesitas algo de otro módulo, usas import para traer lo que fue exportado.
Modularidad: Con export e import, puedes crear un código bien modular, donde cada parte tiene su responsabilidad bien definida.

Por ejemplo:

// En archivo.js
export function sumar(a, b) {
  return a + b;
}

// En otroArchivo.js
import { sumar } from './archivo.js';

console.log(sumar(1, 2)); // 3

En este ejemplo, la función sumar es exportada en archivo.js e importada en otroArchivo.js.

Los Módulos JavaScript son como piezas de un rompecabezas. Cada pieza tiene su función y, cuando se unen, forman un proyecto completo y funcional. Traen claridad, eficiencia y una estructura súper organizada a tu código. Es como tener un equipo de superhéroes, donde cada uno tiene su superpoder especial, contribuyendo para salvar el día (¡o el proyecto!).

A continuación vamos a profundizar más en este concepto.

Módulos JavaScript

Los Módulos JavaScript (como ya mencioné anteriormente) son básicamente una manera de organizar el código en un proyecto, de forma que cada módulo posee su propia responsabilidad y puede ser reutilizado en otras partes del proyecto. Existen dos principales sistemas de módulos en JS:

CommonJS
ECMAScript Modules (ES Modules).

CommonJS

CommonJS fue el primer sistema de módulos adoptado por JavaScript. Fue creado para ser usado en ambientes de servidor, como Node.js, y se basa en una sintaxis de exportación e importación de módulos.

Un ejemplo de cómo funciona la exportación de un módulo CommonJS es el siguiente:

// math.js
function add(x, y) {
  return x + y;
}

function subtract(x, y) {
  return x - y;
}

module.exports = {
  add: add,
  subtract: subtract,
};

En este ejemplo, el módulo math.js posee dos funciones: add y subtract. Usamos el objeto module.exports para exportar esas funciones para que puedan ser importadas en otros módulos.

Para importar un módulo CommonJS en otro archivo, usamos la palabra clave require:

// main.js
const math = require('./math');

console.log(math.add(1, 2)); // 3
console.log(math.subtract(5, 3)); // 2

Ejercicio Práctico

Crea un módulo JavaScript que exporte una función que reciba dos números y retorne la suma de esos números. El nombre del archivo debe ser "suma.js" y debe utilizar el patrón CommonJS para exportar e importar el módulo.

En seguida, crea otro archivo llamado "index.js" que importe el módulo "suma.js" y utilice la función exportada para sumar dos números cualquiera.

🙏🏻 Envíame tu solución respondiendo este contenido.

ECMAScript Modules (ES Modules)

Es el nuevo estándar de módulos en JavaScript, que fue adoptado por ECMAScript. Fue creado para ser usado tanto en ambientes de servidor como en el lado del cliente (navegadores).

El sistema de módulos ES Modules se basa en dos palabras clave: export e import.

La sintaxis para exportar un módulo ES Modules es semejante a la de CommonJS, pero usamos la palabra clave export en lugar de module.exports:

// math.js
export function add(x, y) {
  return x + y;
}

export function subtract(x, y) {
  return x - y;
}

Para importar un módulo ES Modules en otro archivo, usamos la palabra clave import:

// main.js
import { add, subtract } from './math';

console.log(add(1, 2)); // 3
console.log(subtract(5, 3)); // 2

Conclusión

En resumen, los módulos son una forma de organizar el código en un proyecto y garantizar que cada módulo tenga su propia responsabilidad y pueda ser reutilizado en otras partes del proyecto.

¡Recuerda! Existen dos principales sistemas de módulos:

CommonJS y
ECMAScript Modules (ES Modules)

CommonJS fue el primer sistema de módulos adoptado por JavaScript y es usado principalmente en ambientes de servidor, como Node.js.

Para exportar un módulo CommonJS, usamos el objeto module.exports, mientras que para importar un módulo usamos la palabra clave require.

ES Modules es el nuevo estándar de módulos, que fue adoptado por ECMAScript. Puede ser usado tanto en ambientes de servidor como en el lado del cliente (navegadores). Para exportar un módulo ES Modules, usamos la palabra clave export, mientras que para importar un módulo usamos la palabra clave import.

Es común mientras estés trabajando en uno u otro proyecto, ver a los Desarrolladores usando uno u otro, ¡así que es importante saber la diferencia entre ellos!

💡En proyectos más modernos la gran mayoría ya utiliza ES Modules, mientras que en proyectos más antiguos es común ver la utilización de CommonJS.

Pues bien HaWker, llegamos al fin de un artículo más. Y estamos llegando al fin de nuestro curso.

Como siempre, si tienes cualquier duda o quieres explorar más algún punto, simplemente responde con tu duda, en este email.

¡Y recuerda, estoy aquí para ayudarte a mejorar 1% con cada nuevo artículo!

Si llegaste hasta aquí, como de costumbre, por favor, responde este email con "Conseguí entender los Módulos JavaScript".

De esta forma voy a saber que esta serie de artículos está siendo útil para ti, y que estás acompañando y aprovechando.

¡Como ya sabes! Solamente un verdadero HaWker llega hasta el final.

¡Felicitaciones!

Estoy feliz de tenerte aquí.

Te veo pronto.

¡Vamos a por ello! 🦅

- Jeff Bruchado.

01) Aprendiendo JavaScript desde Cero: Conviértete en un programador de valor y aprende a programar usando JavaScript, con un contenido organizado y condensado pensado en lo que realmente importa que aprendas. El contenido posee todos los artículos que vengo poniendo a disposición semanalmente para ti, y también posee ejercicios prácticos, con las respuestas para que aprendas la teoría y ya salgas poniendo manos a la obra.

02) Consultoría: Forma parte de mi mentoría y ten clases directamente conmigo. Si te interesa, responde este email con "Tengo interés en la mentoría."

¡Felicitaciones por llegar hasta aquí, HaWker! 🎉

En este momento que aprendiste sobre módulos JavaScript, ¿qué tal testear tus conocimientos? Participa del quiz abajo y ve cuánto absorbiste de nuestro artículo.

Es una excelente manera de fijar el aprendizaje y prepararte para los próximos pasos en tu viaje de programación.

Presiona para acceder al quiz.

¡Buena suerte y diviértete!