JavaScript Moderno: Características ES6+ que Debes Dominar

La Evolución de JavaScript

JavaScript ha evolucionado enormemente desde ES6 (ECMAScript 2015). Las nuevas características hacen el código más limpio, legible y mantenible.

1. Arrow Functions

// Función tradicional
function suma(a, b) {
    return a + b;
}

// Arrow function
const suma = (a, b) => a + b;

// Con cuerpo de bloque
const calcularTotal = (precio, descuento) => {
    const total = precio - (precio * descuento);
    return Math.round(total * 100) / 100;
};

2. Destructuring

// Destructuring de objetos
const usuario = { nombre: "Ana", edad: 25, ciudad: "Bogotá" };
const { nombre, edad } = usuario;

// Destructuring de arrays
const colores = ["rojo", "verde", "azul"];
const [primero, , tercero] = colores;

// En funciones
const mostrarUsuario = ({ nombre, edad }) => {
    console.log(`${nombre} tiene ${edad} años`);
};

3. Template Literals

const nombre = "Mauricio";
const web = "ConfiguroWeb";

// Interpolación
console.log(`Hola, soy ${nombre} de ${web}`);

// Multilínea
const html = `
    

        
${nombre}
    
`;

4. Spread y Rest Operators

// Spread
const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5];

const obj1 = { a: 1, b: 2 };
const obj2 = { ...obj1, c: 3 };

// Rest parameters
const sumar = (...numeros) => numeros.reduce((a, b) => a + b, 0);
console.log(sumar(1, 2, 3, 4, 5)); // 15

5. Promises y Async/Await

// Promise
const obtenerDatos = () => {
    return new Promise((resolve, reject) => {
        setTimeout(() => resolve({ id: 1, nombre: "Ana" }), 1000);
    });
};

// Async/Await
const mostrarDatos = async () => {
    try {
        const datos = await obtenerDatos();
        console.log(datos);
    } catch (error) {
        console.error("Error:", error);
    }
};

6. Optional Chaining y Nullish Coalescing

const usuario = { perfil: { nombre: "Ana" } };

// Optional chaining
console.log(usuario?.perfil?.nombre);  // "Ana"
console.log(usuario?.configuracion?.tema);  // undefined

// Nullish coalescing
const tema = usuario?.configuracion?.tema ?? "oscuro";
console.log(tema);  // "oscuro"

Conclusión

Dominar estas características de ES6+ mejorará significativamente la calidad de tu código y tu productividad como desarrollador JavaScript.