JavaScript
Explica cómo los rest parameters agrupan argumentos variables en un array, sus diferencias con arguments y la relación inversa entre rest y spread.
Un rest parameter agrupa los argumentos restantes de una llamada dentro de un array.
function sum(...numbers) {
return numbers.reduce(
(total, number) => total + number,
0,
);
}
sum(1, 2, 3, 4); // 10La sintaxis utiliza tres puntos antes del nombre del parámetro.
function example(...values) {
console.log(values);
}
example("A", "B", "C"); // ["A", "B", "C"]Los argumentos individuales quedan agrupados en una colección.
El rest parameter puede aparecer después de parámetros normales.
function createMessage(type, ...parts) {
return `[${type}] ${parts.join(" ")}`;
}
createMessage("INFO", "Server", "started");type recibe "INFO".parts recibe ["Server", "started"].function invalid(...values, last) {}Esto produce un SyntaxError. Después del rest parameter no pueden existir más parámetros porque ya representa todos los argumentos restantes.
Solo puede existir un rest parameter en la lista.
function collect(first, ...rest) {
return rest;
}
collect("A"); // []rest siempre será un array, incluso cuando no existan argumentos restantes.
function legacyExample() {
console.log(arguments);
}arguments:
Rest parameters:
function modernExample(...args) {
console.log(args);
}function average(...numbers) {
if (numbers.length === 0) {
return 0;
}
const total = numbers.reduce(
(sum, number) => sum + number,
0,
);
return total / numbers.length;
}No hace falta convertir numbers antes de usar map, filter, reduce u otros métodos.
Una función variádica sigue necesitando un contrato.
function sum(...numbers) {
const hasInvalidNumber = numbers.some(
(number) => !Number.isFinite(number),
);
if (hasInvalidNumber) {
throw new TypeError("All values must be finite numbers");
}
return numbers.reduce(
(total, number) => total + number,
0,
);
}Ambos utilizan ..., pero hacen operaciones opuestas según el contexto.
Rest agrupa:
function sum(...numbers) {
// numbers es un array.
}Spread expande:
const values = [1, 2, 3];
sum(...values);En la llamada, los elementos del array se convierten en argumentos individuales.
rest: argumentos → array
spread: array → argumentosfunction logAndCall(callback, ...args) {
console.log("Calling with:", args);
return callback(...args);
}
function multiply(first, second) {
return first * second;
}
logAndCall(multiply, 5, 4); // 20args agrupa los valores recibidos y spread los expande al llamar callback.
Una cantidad variable puede ser útil para operaciones como sumar, combinar o registrar valores.
mergeTags("frontend", "react", "typescript");Sin embargo, si cada argumento tiene un significado diferente, un objeto de opciones suele ser más claro.
createUser("Nicolás", true, false, "admin");No debería convertirse en una colección solo para evitar definir un contrato.
createUser({
name: "Nicolás",
isActive: true,
sendEmail: false,
role: "admin",
});La misma sintaxis puede agrupar elementos restantes al desestructurar, aunque en ese contexto no es un parámetro.
const [first, ...remaining] = [10, 20, 30];const { password, ...publicUser } = user;La intención es parecida: separar una parte y reunir lo que queda.
function createEventLogger(scope) {
return function logEvent(eventName, ...details) {
console.log({
scope,
eventName,
details,
timestamp: Date.now(),
});
};
}
const logCheckout = createEventLogger("checkout");
logCheckout(
"payment-failed",
"order-123",
"insufficient-funds",
);eventName tiene un significado fijo y details acepta información adicional variable.
arguments dentro de una arrow function.arguments.¿Qué contiene cada parámetro?
function example(first, second, ...rest) {
console.log(first, second, rest);
}
example("A", "B", "C", "D");first contiene "A", second contiene "B" y rest contiene ["C", "D"].
Callbacks explica cómo una función puede entregarse a otra para que esta decida cuándo y con qué valores ejecutarla.