Rest y spread: arrays y objetos idiomáticos
Reúna el resto de valores o propiedades, clone y combine mediante spread, y evite mutaciones ocultas con patrones sencillos.
Rest y spread: arrays y objetos idiomáticos es una lección gratuita de JavaScript Academy en CoddyKit. Esta es la lección 2 de 2. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de JavaScript Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de JavaScript Academy incluye 2 lecciones en total.
Introducción
Objetivo: usar rest para recopilar elementos adicionales y spread para copiar o combinar.
- Spread de arreglos y objetos
- Rest de arreglos (inicio y final)
- Rest de objetos (excluir algunas claves)
- Modificación frente a copia
Conceptos básicos del spread de arreglos
[...arr] copia un arreglo; combine arreglos expandiéndolos dentro de un arreglo nuevo.
// Array spread creates a shallow copy and merges arrays
const a = [1, 2];
const b = [3, 4];
const clone = [...a];
const merged = [...a, ...b];
console.log("a:", a);
console.log("clone:", clone);
console.log("merged:", merged);
Patrón rest de arreglos
El elemento rest (…tail) recopila los elementos restantes en un arreglo nuevo.
// Array rest collects the remaining items
const nums = [10, 20, 30, 40];
const [head, ...tail] = nums;
console.log("head:", head);
console.log("tail:", tail);
Conceptos básicos del spread de objetos
La combinación de objetos depende del orden: los spreads posteriores sobrescriben las claves anteriores.
// Object spread copies and merges; later keys win
const base = { theme: "light", compact: false };
const override = { compact: true };
const copy = { ...base };
const merged = { ...base, ...override };
console.log("copy:", copy);
console.log("merged:", merged);
Patrón rest de objetos
Use { a, ...rest } para extraer algunas propiedades y conservar el resto en conjunto.
// Object rest collects remaining properties
const user = { id: 7, name: "Ayla", role: "admin" };
const { id, ...publicInfo } = user;
console.log("id:", id);
console.log("publicInfo:", publicInfo);
Evitar modificaciones mediante copias
Cree un objeto nuevo al cambiar valores; es más claro y seguro que modificar datos compartidos.
// Copy instead of mutating original data
const settings = { sound: true, volume: 5 };
// Mutating version (avoid in shared state)
// settings.volume = 6;
// Non-mutating: create an updated copy
const updated = { ...settings, volume: 6 };
console.log("settings:", settings);
console.log("updated:", updated);
Cuestionario sobre rest de objetos
Comprobación rápida: rest de objetos.
Repaso
Repaso: spread copia y combina arreglos y objetos; rest recopila los elementos restantes. Prefiera copiar en lugar de modificar para mantener explícitos los cambios.
Preguntas frecuentes
¿La lección «Rest y spread: arrays y objetos idiomáticos» es gratis?
Sí — el texto completo de «Rest y spread: arrays y objetos idiomáticos» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de JavaScript Academy, actualiza a CoddyKit PRO. El curso de JavaScript Academy incluye 2 lecciones en total.
¿Qué aprenderé en «Rest y spread: arrays y objetos idiomáticos»?
Reúna el resto de valores o propiedades, clone y combine mediante spread, y evite mutaciones ocultas con patrones sencillos. Practicas JavaScript Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar JavaScript Academy?
No se requiere experiencia previa. JavaScript Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 2.
¿Cuánto tiempo toma la lección «Rest y spread: arrays y objetos idiomáticos»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de JavaScript Academy?
Sí. Cada lección de JavaScript Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Fundamentos de la desestructuración de arrays y objetos
- Rest y spread: arrays y objetos idiomáticos