Introducción a ES6+ y el JavaScript Moderno

---

Let y Const

En ES6, let y const reemplazan a var para declarar variables. La principal diferencia es que let permite re-asignar valores, mientras que const define valores que no pueden cambiar.

Ejemplo con Let y Const

let edad = 25;  // Se puede cambiar
const nombre = "Juan";  // No se puede cambiar

edad = 30;  // Correcto
// nombre = "Pedro";  // Error: No se puede reasignar

Arrow Functions (Funciones Flecha)

Las arrow functions son una forma concisa de escribir funciones y manejan el contexto this de manera diferente que las funciones tradicionales.

{
const saludar = function(nombre) {
  return 'Hola, ' + nombre + '!';
};
saludar("Urian");  // Salida: Hola, Urian!
}

Template Literals

Los template literals permiten incrustar expresiones en cadenas de texto usando las comillas invertidas ( ) y la sintaxis $.

const nombre = "Urian";
const saludo = `Hola, ${nombre}! Bienvenido a ES6+`;
console.log(saludo); 
// Salida: Hola, Urian! Bienvenido a ES6+

Destructuración de Objetos y Arrays

La destructuración permite extraer valores de objetos y arrays de manera sencilla.

const persona = { nombre: "Juan", edad: 25 };
const { nombre, edad } = persona;

const numeros = [1, 2, 3];
const [uno, dos, tres] = numeros;

console.log(nombre, edad);  // Salida: Juan 25
console.log(uno, dos, tres);  // Salida: 1 2 3

Spread Operator y Rest Parameter (...)

El spread operator (...) expande elementos de un array u objeto, mientras que el rest parameter agrupa el resto de los elementos en un array.

const numeros = [1, 2, 3];
const nuevosNumeros = [...numeros, 4, 5];  // [1, 2, 3, 4, 5]

const persona = { nombre: "Juan", edad: 25 };
const nuevaPersona = { ...persona, profesion: "Desarrollador" };

console.log(nuevaPersona);  // { nombre: "Juan", edad: 25, profesion: "Desarrollador" }

Ejemplo de Rest Parameter

function sumar(...numeros) {
  return numeros.reduce((total, num) => total + num, 0);
}

console.log(sumar(1, 2, 3, 4));  // Salida: 10

Módulos (import/export)

Con ES6, JavaScript introdujo el concepto de módulos, que permite dividir el código en archivos reutilizables. Esta funcionalidad no solo organiza mejor el código, sino que también mejora su mantenibilidad y facilita la colaboración entre diferentes partes de una aplicación.

Exportación

Para exponer funciones, variables o clases desde un módulo, utilizamos la palabra clave export. Esto permite que otros archivos puedan acceder a esos elementos.

Aquí tienes un ejemplo de cómo se exporta una función y una variable en un archivo llamado calculos.js:

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

export function restar(a, b) {
  return a - b;
}

export function multiplicar(a, b) {
  return a * b;
}

export function dividir(a, b) {
  if (b === 0) {
      throw new Error("No se puede dividir entre cero.");
  }
  return a / b;
}

Importación

Para utilizar las funciones o variables exportadas en otro archivo, utilizamos la palabra clave import. A continuación, se muestra cómo importar las funciones del archivo calculos.js en un archivo llamado main.js:

// main.js
import { sumar, restar, multiplicar, dividir } from './calculos.js';

console.log(sumar(2, 3));         // Salida: 5
console.log(restar(5, 2));        // Salida: 3
console.log(multiplicar(4, 3));   // Salida: 12

try {
  console.log(dividir(10, 2));  // Salida: 5
  console.log(dividir(10, 0));  // Lanzará un error
} catch (error) {
  console.error(error.message);  // Salida: No se puede dividir entre cero.
}

Esta estructura modular te permitirá construir aplicaciones más complejas y mantenibles, facilitando el trabajo en equipo y el manejo del código.

Sintaxis de Importación y Exportación en ES6+

En ES6, JavaScript introdujo dos tipos principales de exportación que permiten gestionar cómo se comparten funciones y variables entre archivos: exportación nombrada y exportación por defecto.

Exportación Nombrada

La exportación nombrada permite exportar múltiples funciones, constantes o clases desde un archivo. Al importar, es necesario utilizar los mismos nombres que se usaron al exportar.

Ejemplo de Exportación Nombrada:

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

export function restar(a, b) {
  return a - b;
}

Importación de Exportaciones Nombradas

La importación de exportaciones nombradas permite incluir múltiples funciones, variables o clases desde un módulo específico en otro archivo. Es necesario usar los mismos nombres utilizados en la exportación, y se pueden importar solo las partes necesarias, lo que ayuda a mantener el código limpio y eficiente.

// archivo main.js
import { sumar, restar } from './matematicas.js';

console.log(sumar(2, 3));   // Salida: 5
console.log(restar(5, 2));  // Salida: 3

Exportación por Defecto

La exportación por defecto permite exportar un único valor o función desde un archivo. Esto es útil cuando deseas que un módulo tenga un valor principal que se importe. Al importar un valor por defecto, no necesitas usar llaves.

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

Importación de la Exportación por Defecto

// archivo main.js
import sumar from './sumar.js';

console.log(sumar(2, 3));  // Salida: 5