Fundamentos de la desestructuración de arrays y objetos
Desestructuración de arrays y objetos: conceptos básicos, omitir elementos, valores predeterminados, renombrado y un sencillo truco para intercambiar valores.
Fundamentos de la desestructuración de arrays y objetos es una lección gratuita de JavaScript Academy en CoddyKit. Esta es la lección 1 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: extraer valores de arreglos y objetos de forma clara.
- Desestructuración de arreglos
- Omisiones y valores predeterminados
- Desestructuración de objetos
- Renombrar e intercambiar valores
Conceptos básicos de los arreglos
Los patrones de arreglos coinciden con las posiciones. El primer elemento se asigna a la primera variable, y así sucesivamente.
// Array destructuring: assign by position
const pair = [10, 20];
const [x, y] = pair;
console.log("x:", x);
console.log("y:", y);
Omisiones y valores predeterminados
Use comas para omitir posiciones. Agregue = default para los elementos undefined o ausentes.
// Skip items with commas and provide defaults
const triple = [5, undefined, 9];
// Skip the middle, provide default for missing/undefined
const [first, , third = 0] = triple;
console.log("first:", first);
console.log("third with default:", third);
Intercambio en una línea
Un intercambio en una sola línea evita usar una variable temporal.
// Swap values with destructuring
let a = "left";
let b = "right";
[a, b] = [b, a];
console.log("a:", a);
console.log("b:", b);
Conceptos básicos de objetos y renombrado
Los objetos coinciden por clave. Cambie el nombre con key: localName y agregue = default cuando sea necesario.
// Object destructuring: assign by property name
const user = { name: "Ayla", level: 2, active: true };
// Basic
const { name, active } = user;
// Renaming and default
const { level: userLevel = 0 } = user;
console.log("name:", name);
console.log("active:", active);
console.log("userLevel:", userLevel);
Campos anidados (básico)
Puede leer campos anidados en un solo paso. Mantenga pequeños los patrones para facilitar la lectura en dispositivos móviles.
// Nested destructuring (keep it simple)
const config = {
theme: { primary: "blue", contrast: "white" },
flags: { compact: true }
};
const { theme: { primary }, flags: { compact } } = config;
console.log("primary:", primary);
console.log("compact:", compact);
Cuestionario sobre la sintaxis de intercambio
Comprobación rápida: intercambiar mediante desestructuración.
Repaso
Repaso: los arreglos se desestructuran por posición y los objetos, por clave. Omitió elementos, usó valores predeterminados, renombró claves e intercambió valores en una sola línea.
Preguntas frecuentes
¿La lección «Fundamentos de la desestructuración de arrays y objetos» es gratis?
Sí — el texto completo de «Fundamentos de la desestructuración de arrays y objetos» 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 «Fundamentos de la desestructuración de arrays y objetos»?
Desestructuración de arrays y objetos: conceptos básicos, omitir elementos, valores predeterminados, renombrado y un sencillo truco para intercambiar valores. 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 1 de 2.
¿Cuánto tiempo toma la lección «Fundamentos de la desestructuración de arrays y objetos»?
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