Spread, Rest y Optional Chaining
El spread operator (...) "derrama" los elementos de un array u objeto. Es ideal para copiar arrays sin mutarlos, combinar objetos, o pasar múltiples argumentos a una función. Por su parte, el rest parameter (...) hace lo contrario: agrupa argumentos variables en un array.
Optional chaining (?.) es una de las adiciones más prácticas de JavaScript moderno. Antes, acceder a una propiedad profunda como usuario.perfil.avatar podía crashear si perfil era undefined. Con ?. simplemente devuelve undefined en vez de tirar un error, evitando comprobaciones manuales en cadena.
Nullish coalescing (??) es el compañero de ?.: devuelve el valor de la derecha solo si el de la izquierda es null o undefined (no si es 0 o false, a diferencia de ||). Juntos, ?. y ?? forman el dúo perfecto para trabajar con datos que pueden no estar presentes.
// Spread con arrays
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const combinado = [...arr1, ...arr2]; // [1,2,3,4,5,6]
const copia = [...arr1]; // Copia
// Spread con objetos
const base = { a: 1, b: 2 };
const extendido = { ...base, c: 3, b: 99 }; // b sobrescrito
// Spread en llamadas a función
const nums = [3, 1, 4, 1, 5, 9];
console.log(Math.max(...nums)); // 9
// Rest en funciones (argumentos variables)
function sumarTodos(...numeros) {
return numeros.reduce((acc, n) => acc + n, 0);
}
console.log(sumarTodos(1, 2, 3, 4, 5)); // 15
// Optional chaining (?.) - evita errores
const usuario = {
nombre: "Pedro",
direccion: {
ciudad: "Lima"
}
};
console.log(usuario?.nombre); // "Pedro"
console.log(usuario?.telefono?.numero); // undefined (no error)
console.log(usuario?.metodo?.()); // undefined (no error)
// Nullish coalescing (??)
const valor = null ?? "valor por defecto"; // "valor por defecto"
const cero = 0 ?? "default"; // 0 (0 no es null/undefined)
Practica esta lección
Resuelve los ejercicios del curso de JavaScript en la app, gratis y con corrección automática.
Empezar a practicar