Magia en JavaScript: Características que Quizás No Conocías

JavaScript es indudablemente el lenguaje rey de la web. Aunque la mayoría de los desarrolladores utilizan sus fundamentos a diario, el lenguaje ha evolucionado rápidamente en los últimos años, introduciendo características que a menudo pasan desapercibidas pero que son auténtica “magia” para acelerar el desarrollo.

Aquí te presento algunas características interesantes que deberías empezar a utilizar:

1. El Operador de Fusión Nula (??)

A menudo usamos el operador lógico OR (||) para asignar valores por defecto, pero esto puede causar problemas si nuestro valor es un número 0 o un string vacío "" (ya que se consideran falsy). El operador de fusión nula (??) solo devuelve el lado derecho si el lado izquierdo es estrictamente null o undefined.

const puntaje = 0;
// Con ||, valorPorDefecto será 10 porque 0 es falsy.
const valorPorDefecto1 = puntaje || 10; 

// Con ??, valorPorDefecto será 0, lo cual es el comportamiento correcto.
const valorPorDefecto2 = puntaje ?? 10; 

2. Encadenamiento Opcional (?.)

¿Cuántas veces has visto el temido error Cannot read properties of undefined? El encadenamiento opcional nos permite acceder a propiedades anidadas de forma segura sin tener que escribir múltiples validaciones.

const usuario = {
  perfil: {
    contacto: {
      email: "hola@ejemplo.com"
    }
  }
};

// Forma antigua (verbosa):
const email1 = usuario && usuario.perfil && usuario.perfil.contacto && usuario.perfil.contacto.email;

// Mágia con encadenamiento opcional:
const email2 = usuario?.perfil?.contacto?.email; // "hola@ejemplo.com"
const telefono = usuario?.perfil?.contacto?.telefono; // undefined (y no rompe la app)

3. Asignación Lógica ( ||=, &&=, ??= )

Imagina combinar la asignación con los operadores lógicos. Esto te permite asignar un valor a una variable solo si se cumple (o no) una condición específica de manera muy compacta.

let nombre;
// Solo asigna si "nombre" es null o undefined
nombre ??= "Invitado"; 

4. structuredClone()

Históricamente, copiar un objeto en profundidad (deep copy) en JS era molesto y solíamos recurrir a JSON.parse(JSON.stringify(obj)) (que perdía métodos y fechas) o librerías externas de lodash. ¡Ahora tenemos una función nativa para esto!

const original = { a: 1, fechas: [new Date()] };
const clon = structuredClone(original);

// "clon" es una copia profunda real e independiente.

Conclusión

JavaScript sigue creciendo y modernizándose. Mantenerse al día con estas pequeñas pero potentes adiciones no solo te hará escribir menos código, sino que también hará que tus aplicaciones sean más robustas y fáciles de leer. ¿Cuál de estas es tu favorita?