← JavaScript

Arrays y objetos

¿Cuál es la diferencia entre el operador spread y el operador rest? Ambos usan `...`.

Ver respuesta — intenta responderla en voz alta primero

Aunque ambos usan ..., hacen lo opuesto. Spread "expande" un arreglo u objeto en elementos individuales. Rest "junta" varios elementos en un solo arreglo. Spread se usa al construir; rest, al recibir.

  • Spread (...): toma un arreglo u objeto y lo expande. Útil para copiar, combinar arreglos/objetos o pasar elementos como argumentos.
  • Rest (...): recolecta los elementos restantes en un arreglo. Se usa en parámetros de funciones (para aceptar un número variable de argumentos) o al hacer destructuring.

Un truco para recordarlos: si el ... está donde algo se crea o se llama, es spread (expande). Si está donde algo se recibe o se declara, es rest (junta).

// SPREAD: expande arreglos
const a = [1, 2];
const b = [3, 4];
const combinado = [...a, ...b];
console.log(combinado); // [1, 2, 3, 4]

// SPREAD: copia un arreglo (copia superficial)
const copia = [...a];
console.log(copia); // [1, 2]

// SPREAD: expande objetos
const base = { x: 1 };
const extendido = { ...base, y: 2 };
console.log(extendido); // { x: 1, y: 2 }

// SPREAD: pasar elementos como argumentos
console.log(Math.max(...[5, 10, 3])); // 10

// REST: junta argumentos en un arreglo
function sumarTodos(...numeros) {
  return numeros.reduce((acc, n) => acc + n, 0);
}
console.log(sumarTodos(1, 2, 3, 4)); // 10

// REST: en destructuring
const [primero, ...resto] = [1, 2, 3, 4];
console.log(primero); // 1
console.log(resto);   // [2, 3, 4]
  • Confundir cuándo es spread y cuándo es rest. Recuerda: rest solo puede ir al final de los parámetros (function f(a, ...resto)), nunca en medio.
  • Pensar que spread hace una copia profunda. Es una copia superficial: los objetos anidados siguen compartiendo su referencia.

"Ambos usan tres puntos, pero hacen lo opuesto. Spread expande un arreglo u objeto en sus elementos, y lo uso para copiar, combinar o pasar argumentos. Rest hace lo contrario: junta varios elementos en un arreglo, y lo uso en parámetros de funciones para aceptar un número variable de argumentos, o en destructuring para tomar el resto. La regla que uso: si estoy creando o llamando, es spread; si estoy recibiendo, es rest."

Reto rápido

Escribe una función maximo(...nums) que devuelva el mayor de todos los números que reciba.

Ver solución
function maximo(...nums) {
  return Math.max(...nums);
}
console.log(maximo(3, 7, 2, 9, 1)); // 9