CAP 04 · LEC 04·Funciones
Rest y spread: el operador ...
Los tres puntos '...' hacen cosas opuestas según el contexto: spread expande una colección, rest la agrupa. Dominarlos hace tu código mucho más flexible.
¿Encontraste un error o algo que mejorar?Editá esta lección en GitHub →
Spread en arrays
El operador ... antes de un array lo expande en elementos individuales:
const a = [1, 2, 3];
const b = [4, 5, 6];
// Combinar arrays
const c = [...a, ...b];
console.log(c); // [1, 2, 3, 4, 5, 6]
// Copiar un array (copia superficial)
const copia = [...a];
copia.push(99);
console.log(a); // [1, 2, 3] — original no cambia
console.log(copia); // [1, 2, 3, 99]
// Pasar array como argumentos separados
function sumar(x, y, z) {
return x + y + z;
}
const nums = [1, 2, 3];
console.log(sumar(...nums)); // 6
// Encontrar máximo
console.log(Math.max(...a)); // 3const primos: number[] = [2, 3, 5];
const moreNums: number[] = [7, 11, 13];
const todos: number[] = [...primos, ...moreNums];
console.log(todos); // [2, 3, 5, 7, 11, 13]
// Spread en parámetros
function max(...nums: number[]): number {
return Math.max(...nums);
}
console.log(max(1, 5, 3, 9, 2)); // 9Salida
[1, 2, 3, 4, 5, 6]
6Spread en objetos
const base = { nombre: "Ana", activo: true };
const extra = { edad: 25, ciudad: "Madrid" };
// Fusionar objetos
const usuario = { ...base, ...extra };
console.log(usuario);
// { nombre: "Ana", activo: true, edad: 25, ciudad: "Madrid" }
// Las propiedades posteriores sobreescriben las anteriores
const actualizado = { ...base, activo: false, email: "ana@mail.com" };
console.log(actualizado);
// { nombre: "Ana", activo: false, email: "ana@mail.com" }
// Patrón común: actualizar un objeto inmutablemente
const state = { count: 0, loading: false };
const newState = { ...state, count: state.count + 1 };
console.log(newState); // { count: 1, loading: false }interface Config {
host: string;
port: number;
debug?: boolean;
}
const defaults: Config = { host: "localhost", port: 3000 };
const prod: Config = { ...defaults, host: "prod.example.com", port: 443 };
console.log(prod);
// { host: "prod.example.com", port: 443 }Salida
{ nombre: "Ana", activo: false, email: "ana@mail.com" }Rest en parámetros
...rest al final de la firma agrupa los argumentos restantes en un array:
// Acepta cualquier cantidad de argumentos
function sumarTodo(...numeros) {
return numeros.reduce((acc, n) => acc + n, 0);
}
console.log(sumarTodo(1, 2, 3)); // 6
console.log(sumarTodo(1, 2, 3, 4, 5)); // 15
console.log(sumarTodo()); // 0
// Combinar parámetro normal + rest
function log(nivel, ...mensajes) {
console.log(`[${nivel}]`, ...mensajes);
}
log("INFO", "Servidor", "iniciado", "en", "3000");
// [INFO] Servidor iniciado en 3000function sumarTodo(...numeros: number[]): number {
return numeros.reduce((acc, n) => acc + n, 0);
}
// Función variadic con tipos mixtos
function crear(nombre: string, ...tags: string[]): object {
return { nombre, tags };
}
console.log(crear("artículo", "js", "ts", "web"));
// { nombre: "artículo", tags: ["js", "ts", "web"] }Salida
6
15Rest siempre al final
El parámetro rest debe ser el último de la lista. No puede haber parámetros después de él.
Rest en desestructuración
// En arrays
const [primero, segundo, ...resto] = [1, 2, 3, 4, 5];
console.log(primero); // 1
console.log(segundo); // 2
console.log(resto); // [3, 4, 5]
// En objetos: extrae algunas propiedades, agrupa el resto
const { nombre, edad, ...otros } = {
nombre: "Ana",
edad: 25,
ciudad: "Madrid",
activo: true,
};
console.log(nombre); // "Ana"
console.log(edad); // 25
console.log(otros); // { ciudad: "Madrid", activo: true }
// Patrón útil: omitir una propiedad al copiar
const { password, ...sinPassword } = usuario;
// sinPassword no tiene la propiedad password