JavaScript

JavaScript

Tutorial JavaScript: Destructuring de objetos y arrays

JavaScript Fundamentos de sintaxis destructuring para desempaquetar valores en ES6. Simplifica tu código con ejemplos prácticos y patrones avanzados.

Aprende JavaScript y certifícate

Fundamentos de la sintaxis de destructuring: Extracción de valores desde objetos y arrays con notación concisa

El destructuring (desestructuración) es una característica introducida en ECMAScript 2015 (ES6) que permite desempaquetar valores de arrays o propiedades de objetos en variables individuales de forma concisa y elegante. Esta técnica simplifica enormemente el código, haciéndolo más legible y reduciendo la cantidad de líneas necesarias para acceder a datos estructurados.

Destructuring de arrays

La desestructuración de arrays nos permite extraer elementos individuales basándonos en su posición dentro del array. La sintaxis básica utiliza corchetes [] en el lado izquierdo de la asignación.

// Método tradicional
const colors = ['red', 'green', 'blue'];
const firstColor = colors[0];
const secondColor = colors[1];

// Con destructuring
const [first, second] = colors;
console.log(first);  // 'red'
console.log(second); // 'green'

Podemos omitir elementos que no necesitamos utilizando comas:

const coordinates = [10, 20, 30, 40];
const [x, , z] = coordinates;
console.log(x); // 10
console.log(z); // 30

También es posible capturar los elementos restantes en un nuevo array utilizando la sintaxis de propagación (spread operator):

const numbers = [1, 2, 3, 4, 5];
const [first, second, ...rest] = numbers;
console.log(first); // 1
console.log(second); // 2
console.log(rest); // [3, 4, 5]

Destructuring de objetos

La desestructuración de objetos nos permite extraer propiedades específicas basándonos en sus nombres. La sintaxis utiliza llaves {} en el lado izquierdo de la asignación.

const user = {
  name: 'Alice',
  age: 28,
  email: 'alice@example.com'
};

// Método tradicional
const userName = user.name;
const userAge = user.age;

// Con destructuring
const { name, age } = user;
console.log(name); // 'Alice'
console.log(age);  // 28

A diferencia de los arrays, el orden no importa en la desestructuración de objetos, ya que la extracción se basa en los nombres de las propiedades:

const product = {
  id: 'P123',
  price: 29.99,
  category: 'Electronics'
};

const { category, id } = product;
console.log(category); // 'Electronics'
console.log(id);       // 'P123'

Podemos extraer propiedades anidadas directamente, lo que resulta muy útil para trabajar con objetos complejos:

const metadata = {
  title: 'JavaScript Basics',
  author: {
    firstName: 'John',
    lastName: 'Doe'
  }
};

const { title, author: { firstName } } = metadata;
console.log(title);     // 'JavaScript Basics'
console.log(firstName); // 'John'

Destructuring en bucles

El destructuring es especialmente útil cuando trabajamos con iteraciones sobre arrays de objetos:

const users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 3, name: 'Charlie' }
];

// Extraer propiedades directamente en cada iteración
for (const { id, name } of users) {
  console.log(`User ${id}: ${name}`);
}

También podemos aplicarlo con métodos de array como map o forEach:

const people = [
  { name: 'Alex', age: 25 },
  { name: 'Beth', age: 30 }
];

const names = people.map(({ name }) => name);
console.log(names); // ['Alex', 'Beth']

Intercambio de variables

Una aplicación práctica y elegante del destructuring es el intercambio de variables sin necesidad de una variable temporal:

let a = 5;
let b = 10;

// Intercambio tradicional
// let temp = a;
// a = b;
// b = temp;

// Intercambio con destructuring
[a, b] = [b, a];
console.log(a); // 10
console.log(b); // 5

Destructuring en importaciones

El destructuring se utiliza frecuentemente al importar módulos en JavaScript moderno:

// En lugar de:
// import React from 'react';
// const useState = React.useState;
// const useEffect = React.useEffect;

// Podemos usar:
import { useState, useEffect } from 'react';

Esta sintaxis concisa nos permite extraer exactamente lo que necesitamos de un módulo, mejorando la legibilidad y reduciendo la cantidad de código.

El destructuring es una herramienta fundamental en JavaScript moderno que simplifica enormemente el manejo de datos estructurados, permitiéndonos escribir código más limpio y expresivo.

Patrones avanzados: Asignación con valores por defecto, renombrado de propiedades y destructuring anidado

El destructuring en JavaScript va más allá de la simple extracción de valores. Los patrones avanzados nos permiten manejar casos de uso más complejos, proporcionando mayor flexibilidad y control sobre cómo queremos trabajar con nuestros datos estructurados.

Valores por defecto

Uno de los patrones más útiles es la asignación de valores predeterminados, que nos permite especificar un valor alternativo cuando la propiedad que intentamos extraer no existe o es undefined:

// Destructuring de objetos con valores por defecto
const settings = { theme: 'dark' };

const { theme, fontSize = 16, language = 'en' } = settings;
console.log(theme);     // 'dark' (valor existente)
console.log(fontSize);  // 16 (valor por defecto)
console.log(language);  // 'en' (valor por defecto)

Este patrón también funciona con arrays:

// Destructuring de arrays con valores por defecto
const rgb = [200, 100];

const [red, green, blue = 0] = rgb;
console.log(red);   // 200
console.log(green); // 100
console.log(blue);  // 0 (valor por defecto)

Los valores por defecto solo se aplican cuando el valor extraído es undefined, no cuando es null u otro valor falsy:

const config = { debug: null, cache: undefined };

const { debug = true, cache = true } = config;
console.log(debug); // null (se mantiene null)
console.log(cache); // true (se usa el valor por defecto)

Renombrado de propiedades

A veces necesitamos extraer propiedades pero asignarlas a variables con nombres diferentes. El operador de renombrado (:) nos permite hacerlo de forma elegante:

const response = {
  status: 200,
  data: { id: 123, name: 'Product' }
};

// Extraer 'status' como 'httpStatus' y 'data' como 'responseData'
const { status: httpStatus, data: responseData } = response;

console.log(httpStatus);    // 200
console.log(responseData);  // { id: 123, name: 'Product' }

Podemos combinar el renombrado con valores por defecto:

const userPrefs = { darkMode: true };

// Renombrar y asignar valor por defecto simultáneamente
const { darkMode: isDarkMode = false, fontSize: size = 14 } = userPrefs;

console.log(isDarkMode);  // true
console.log(size);        // 14

Destructuring anidado

Para estructuras de datos complejas, el destructuring anidado nos permite extraer valores de objetos o arrays que están dentro de otros objetos o arrays:

// Objeto con estructura anidada
const employee = {
  id: 'E123',
  personal: {
    name: 'Emma',
    contact: {
      email: 'emma@company.com',
      phone: '555-1234'
    }
  },
  department: 'Engineering'
};

// Destructuring anidado para extraer email y phone
const { 
  personal: { 
    name, 
    contact: { email, phone } 
  } 
} = employee;

console.log(name);   // 'Emma'
console.log(email);  // 'emma@company.com'
console.log(phone);  // '555-1234'

También funciona con arrays anidados dentro de objetos y viceversa:

// Objeto con arrays anidados
const course = {
  title: 'Advanced JavaScript',
  topics: ['Functions', 'Objects', 'Async'],
  instructor: {
    name: 'Sarah',
    credentials: ['PhD', 'Senior Developer']
  }
};

// Extraer el primer tema y las credenciales
const { 
  topics: [firstTopic], 
  instructor: { credentials: [degree, position] } 
} = course;

console.log(firstTopic);  // 'Functions'
console.log(degree);      // 'PhD'
console.log(position);    // 'Senior Developer'

Combinación de patrones

La verdadera potencia del destructuring avanzado se revela cuando combinamos estos patrones:

// Estructura compleja
const apiResponse = {
  code: 200,
  results: [
    { id: 1, details: { title: 'Item 1', status: 'active' } },
    { id: 2, details: { title: 'Item 2', status: 'inactive' } }
  ],
  pagination: null,
  meta: undefined
};

// Combinando renombrado, valores por defecto y anidamiento
const {
  code: statusCode,
  results: [
    { id: firstId, details: { title: firstTitle } },
    { details: { status: secondStatus = 'pending' } }
  ],
  pagination: paging = { page: 1, limit: 10 },
  meta: metadata = { timestamp: Date.now() }
} = apiResponse;

console.log(statusCode);    // 200
console.log(firstId);       // 1
console.log(firstTitle);    // 'Item 1'
console.log(secondStatus);  // 'inactive'
console.log(paging);        // { page: 1, limit: 10 } (valor por defecto)
console.log(metadata);      // { timestamp: ... } (valor por defecto)

Destructuring con rest en objetos

Similar al operador rest en arrays, podemos usar la sintaxis rest para recoger las propiedades restantes de un objeto:

const fullProduct = {
  id: 'prod-123',
  name: 'Wireless Headphones',
  price: 79.99,
  color: 'black',
  inStock: true,
  weight: '250g'
};

// Extraer algunas propiedades y agrupar el resto
const { id, name, price, ...productDetails } = fullProduct;

console.log(id);              // 'prod-123'
console.log(name);            // 'Wireless Headphones'
console.log(productDetails);  // { color: 'black', inStock: true, weight: '250g' }

Este patrón es especialmente útil cuando queremos separar ciertos datos específicos del resto de la información.

Destructuring condicional

Podemos implementar un destructuring condicional combinando el operador de coalescencia nula (??) con valores por defecto:

const config = {
  // settings podría estar ausente
};

// Destructuring seguro con objetos potencialmente indefinidos
const { settings: { timeout = 1000 } = {} } = config;
console.log(timeout);  // 1000

En este ejemplo, si settings no existe, se usa un objeto vacío como valor por defecto, evitando un error de tipo al intentar desestructurar una propiedad de undefined.

Estos patrones avanzados de destructuring nos permiten escribir código más expresivo y robusto, adaptándose a diferentes estructuras de datos y manejando elegantemente casos límite como valores ausentes o anidamiento profundo.

Aplicaciones prácticas: Destructuring en parámetros de funciones, manejo de API responses y desestructuración en React

El destructuring no es solo una característica sintáctica elegante, sino una herramienta práctica que mejora significativamente la claridad y mantenibilidad del código en escenarios reales de desarrollo. Veamos cómo aplicar esta técnica en contextos profesionales comunes.

Destructuring en parámetros de funciones

Uno de los usos más potentes del destructuring es en la definición de parámetros de funciones, especialmente cuando trabajamos con objetos de configuración:

// Enfoque tradicional
function createUser(userConfig) {
  const name = userConfig.name;
  const age = userConfig.age || 18;
  const role = userConfig.role || 'user';
  
  // Lógica de creación...
}

// Con destructuring
function createUser({ name, age = 18, role = 'user' }) {
  // Acceso directo a las variables
  console.log(`Creating ${role} ${name}, age ${age}`);
  
  // Lógica de creación...
}

createUser({ name: 'Alex', role: 'admin' });

Esta técnica ofrece varias ventajas:

  • Hace explícitos los parámetros esperados
  • Permite valores por defecto integrados
  • Elimina la necesidad de verificaciones repetitivas

Para funciones con muchos parámetros opcionales, el destructuring mejora drásticamente la legibilidad:

function renderChart({
  data,
  width = 600,
  height = 400,
  margins = { top: 20, right: 30, bottom: 30, left: 40 },
  animate = true,
  theme = 'light'
}) {
  // Configuración del gráfico con todos los parámetros ya disponibles
  console.log(`Rendering ${theme} chart: ${width}x${height}`);
}

// Llamada con solo los parámetros necesarios
renderChart({ 
  data: [1, 2, 3, 4], 
  height: 300,
  theme: 'dark' 
});

También podemos combinar destructuring con el operador rest para capturar parámetros adicionales:

function processUser({ id, name, ...otherProps }) {
  console.log(`Processing user ${id}: ${name}`);
  
  // Manejar propiedades adicionales dinámicamente
  Object.entries(otherProps).forEach(([key, value]) => {
    console.log(`  ${key}: ${value}`);
  });
}

processUser({
  id: 123,
  name: 'Emma',
  email: 'emma@example.com',
  level: 'premium'
});

Manejo de respuestas de API

El destructuring brilla especialmente al procesar respuestas de API, permitiéndonos extraer exactamente los datos que necesitamos de estructuras JSON complejas:

async function fetchUserData(userId) {
  const response = await fetch(`https://api.example.com/users/${userId}`);
  const { 
    id, 
    name, 
    email, 
    profile: { avatar, bio } = {},  // Valor por defecto para evitar errores
    lastLogin = 'Never'  // Valor por defecto si no existe
  } = await response.json();
  
  updateUserInterface({ id, name, email, avatar, bio, lastLogin });
}

Para APIs que devuelven colecciones de datos, podemos combinar destructuring con métodos de array:

async function displayTopProducts() {
  const response = await fetch('https://api.example.com/products');
  const { products, total } = await response.json();
  
  // Extraer solo las propiedades necesarias de cada producto
  const simplifiedProducts = products.map(({ id, name, price }) => ({
    id,
    name,
    formattedPrice: `$${price.toFixed(2)}`
  }));
  
  renderProductList(simplifiedProducts);
  updateCounter(`Showing ${simplifiedProducts.length} of ${total} products`);
}

El manejo de errores también se beneficia del destructuring:

async function fetchData(endpoint) {
  try {
    const response = await fetch(`https://api.example.com/${endpoint}`);
    
    // Destructuring para verificar el estado de la respuesta
    const { ok, status, statusText } = response;
    
    if (!ok) {
      throw new Error(`API error: ${status} ${statusText}`);
    }
    
    return await response.json();
  } catch (error) {
    // Destructuring del objeto de error
    const { message, name } = error;
    console.error(`${name}: ${message}`);
    return null;
  }
}

Destructuring en React

React es un ecosistema donde el destructuring se ha convertido en una práctica estándar, mejorando significativamente la legibilidad del código:

Destructuring de props

// Sin destructuring
function UserProfile(props) {
  return (
    <div>
      <h2>{props.name}</h2>
      <p>Email: {props.email}</p>
      <p>Role: {props.role || 'User'}</p>
    </div>
  );
}

// Con destructuring
function UserProfile({ name, email, role = 'User' }) {
  return (
    <div>
      <h2>{name}</h2>
      <p>Email: {email}</p>
      <p>Role: {role}</p>
    </div>
  );
}

Destructuring de hooks

El destructuring es fundamental al trabajar con hooks de React:

function Counter() {
  // Destructuring del array retornado por useState
  const [count, setCount] = useState(0);
  
  // Destructuring de múltiples estados
  const [{ loading, error, data }, setRequestState] = useState({
    loading: false,
    error: null,
    data: null
  });
  
  // Uso con useEffect
  useEffect(() => {
    document.title = `Count: ${count}`;
  }, [count]);
  
  return (
    <button onClick={() => setCount(count + 1)}>
      Clicks: {count}
    </button>
  );
}

Destructuring en Context API

El destructuring simplifica el trabajo con el Context API de React:

function ThemeToggler() {
  // Destructuring del valor del contexto
  const { theme, toggleTheme } = useContext(ThemeContext);
  
  return (
    <button 
      style={{ background: theme === 'dark' ? '#333' : '#f0f0f0' }}
      onClick={toggleTheme}
    >
      Switch to {theme === 'dark' ? 'light' : 'dark'} mode
    </button>
  );
}

Destructuring en componentes de orden superior (HOCs)

// HOC que añade funcionalidad de autenticación
function withAuth(Component) {
  return function AuthenticatedComponent(props) {
    const { isAuthenticated, user } = useAuth();
    
    if (!isAuthenticated) {
      return <Redirect to="/login" />;
    }
    
    // Pasar las props originales junto con la información de usuario
    return <Component {...props} user={user} />;
  };
}

// Uso del HOC
const ProtectedDashboard = withAuth(Dashboard);

Destructuring en eventos

El destructuring también es útil al manejar eventos en JavaScript:

function handleMouseMove(event) {
  // Extraer solo las coordenadas que necesitamos
  const { clientX, clientY } = event;
  
  updateTooltip(clientX, clientY);
}

document.addEventListener('mousemove', handleMouseMove);

En formularios React:

function LoginForm() {
  const [credentials, setCredentials] = useState({
    username: '',
    password: ''
  });
  
  const handleChange = (e) => {
    const { name, value } = e.target;
    setCredentials({
      ...credentials,
      [name]: value
    });
  };
  
  return (
    <form>
      <input
        name="username"
        value={credentials.username}
        onChange={handleChange}
      />
      <input
        type="password"
        name="password"
        value={credentials.password}
        onChange={handleChange}
      />
    </form>
  );
}

El destructuring se ha convertido en una técnica esencial en el desarrollo moderno con JavaScript, permitiendo escribir código más declarativo, conciso y mantenible. Su aplicación en escenarios prácticos como los descritos demuestra cómo una característica sintáctica puede tener un impacto significativo en la calidad y legibilidad del código.

CONSTRUYE TU CARRERA EN IA Y PROGRAMACIÓN SOFTWARE

Accede a +1000 lecciones y cursos con certificado. Mejora tu portfolio con certificados de superación para tu CV.

Plan mensual

19.00 € /mes

Precio normal mensual: 19 €
47 % DE DESCUENTO

Plan anual

10.00 € /mes

Ahorras 108 € al año
Precio normal anual: 120 €
Aprende JavaScript online

Ejercicios de esta lección Destructuring de objetos y arrays

Evalúa tus conocimientos de esta lección Destructuring de objetos y arrays con nuestros retos de programación de tipo Test, Puzzle, Código y Proyecto con VSCode, guiados por IA.

Array

JavaScript
Puzzle

Modificación de elementos DOM

JavaScript
Proyecto

Encapsulación

JavaScript
Puzzle

Manipulación DOM

JavaScript
Proyecto

Clases y objetos

JavaScript
Código

Uso de operadores

JavaScript
Puzzle

Uso de operadores

JavaScript
Test

Estructuras de control

JavaScript
Test

Funciones

JavaScript
Código

Excepciones

JavaScript
Test

Transformación con map()

JavaScript
Código

Arrays y Métodos

JavaScript
Código

Transformación con map()

JavaScript
Puzzle

Funciones flecha

JavaScript
Test

Async / Await

JavaScript
Código

Polimorfismo

JavaScript
Código

Variables

JavaScript
Código

Selección de elementos DOM

JavaScript
Puzzle

API Fetch

JavaScript
Código

Encapsulación

JavaScript
Test

Mapas con Map

JavaScript
Código

Creación y uso de variables

JavaScript
Puzzle

Polimorfismo

JavaScript
Puzzle

Tipos de datos

JavaScript
Puzzle

Promises

JavaScript
Código

Estructuras de control

JavaScript
Puzzle

Pruebas unitarias

JavaScript
Proyecto

Encapsulación

JavaScript
Código

Inmutabilidad y programación funcional pura

JavaScript
Código

Destructuring de objetos y arrays

JavaScript
Código

Mapas con Map

JavaScript
Código

Funciones flecha

JavaScript
Puzzle

Polimorfismo

JavaScript
Test

Herencia

JavaScript
Código

Array

JavaScript
Código

Transformación con map()

JavaScript
Test

Gestor de tareas con JavaScript

JavaScript
Proyecto

Manipulación DOM

JavaScript
Test

Funciones

JavaScript
Test

Operadores avanzados

JavaScript
Código

Conjuntos con Set

JavaScript
Código

Funciones flecha

JavaScript
Código

Async / Await

JavaScript
Código

Clases y objetos

JavaScript
Código

Métodos de Strings

JavaScript
Código

Creación y uso de variables

JavaScript
Test

Excepciones

JavaScript
Puzzle

Promises

JavaScript
Código

Funciones cierre (closure)

JavaScript
Test

Funciones cierre (closure)

JavaScript
Código

Herencia

JavaScript
Puzzle

Prototipos y cadena de prototipos

JavaScript
Código

Herencia

JavaScript
Test

Estructuras de control

JavaScript
Código

Selección de elementos DOM

JavaScript
Test

Modificación de elementos DOM

JavaScript
Test

Funciones flecha

JavaScript
Código

Filtrado con filter() y find()

JavaScript
Test

Funciones cierre (closure)

JavaScript
Puzzle

Callbacks

JavaScript
Código

Funciones

JavaScript
Puzzle

Mapas con Map

JavaScript
Test

Reducción con reduce()

JavaScript
Test

Callbacks

JavaScript
Puzzle

Manipulación DOM

JavaScript
Puzzle

Introducción al DOM

JavaScript
Proyecto

Expresiones regulares

JavaScript
Código

Promises

JavaScript
Test

Async / Await

JavaScript
Test

Eventos del DOM

JavaScript
Puzzle

Introducción a JavaScript

JavaScript
Puzzle

Async / Await

JavaScript
Puzzle

Excepciones

JavaScript
Código

Promises

JavaScript
Puzzle

Selección de elementos DOM

JavaScript
Proyecto

Filtrado con filter() y find()

JavaScript
Código

Callbacks

JavaScript
Test

Eventos del DOM

JavaScript
Proyecto

Creación de clases y objetos Restaurante

JavaScript
Código

Reducción con reduce()

JavaScript
Código

Filtrado con filter() y find()

JavaScript
Puzzle

Reducción con reduce()

JavaScript
Puzzle

Conjuntos con Set

JavaScript
Puzzle

Herencia de clases

JavaScript
Código

Eventos del DOM

JavaScript
Test

Clases y objetos

JavaScript
Puzzle

Modificación de elementos DOM

JavaScript
Puzzle

Mapas con Map

JavaScript
Puzzle

Proyecto carrito compra agoodshop

JavaScript
Proyecto

Introducción a JavaScript

JavaScript
Test

Filtrado con filter() y find()

JavaScript
Código

Estructuras de control

JavaScript
Código

Funciones

JavaScript
Código

Reducción con reduce()

JavaScript
Código

Proyecto administrador de contactos

JavaScript
Proyecto

Tipos de datos

JavaScript
Test

Clases y objetos

JavaScript
Test

Array

JavaScript
Test

Conjuntos con Set

JavaScript
Test

Todas las lecciones de JavaScript

Accede a todas las lecciones de JavaScript y aprende con ejemplos prácticos de código y ejercicios de programación con IDE web sin instalar nada.

Introducción A Javascript

JavaScript

Introducción Y Entorno

Introducción A Javascript

JavaScript

Introducción Y Entorno

Introducción A Javascript

JavaScript

Introducción Y Entorno

Tipos De Datos

JavaScript

Sintaxis

Variables

JavaScript

Sintaxis

Operadores

JavaScript

Sintaxis

Estructuras De Control

JavaScript

Sintaxis

Funciones

JavaScript

Sintaxis

Funciones Cierre (Closure)

JavaScript

Sintaxis

Métodos De Strings

JavaScript

Sintaxis

Funciones Cierre (Closure)

JavaScript

Sintaxis

Operadores Avanzados

JavaScript

Sintaxis

Funciones

JavaScript

Sintaxis

Expresiones Regulares

JavaScript

Sintaxis

Estructuras De Control

JavaScript

Sintaxis

Variables

JavaScript

Sintaxis

Arrays Y Métodos

JavaScript

Estructuras De Datos

Conjuntos Con Set

JavaScript

Estructuras De Datos

Mapas Con Map

JavaScript

Estructuras De Datos

Conjuntos Con Set

JavaScript

Estructuras De Datos

Funciones Flecha

JavaScript

Programación Funcional

Filtrado Con Filter() Y Find()

JavaScript

Programación Funcional

Transformación Con Map()

JavaScript

Programación Funcional

Reducción Con Reduce()

JavaScript

Programación Funcional

Funciones Flecha

JavaScript

Programación Funcional

Reducción Con Reduce()

JavaScript

Programación Funcional

Filtrado Con Filter() Y Find()

JavaScript

Programación Funcional

Transformación Con Map()

JavaScript

Programación Funcional

Inmutabilidad Y Programación Funcional Pura

JavaScript

Programación Funcional

Clases Y Objetos

JavaScript

Programación Orientada A Objetos

Excepciones

JavaScript

Programación Orientada A Objetos

Encapsulación

JavaScript

Programación Orientada A Objetos

Herencia

JavaScript

Programación Orientada A Objetos

Polimorfismo

JavaScript

Programación Orientada A Objetos

Excepciones

JavaScript

Programación Orientada A Objetos

Encapsulación

JavaScript

Programación Orientada A Objetos

Polimorfismo

JavaScript

Programación Orientada A Objetos

Herencia

JavaScript

Programación Orientada A Objetos

This Y Contexto

JavaScript

Programación Orientada A Objetos

Patrón De Módulos Y Namespace

JavaScript

Programación Orientada A Objetos

Clases Y Objetos

JavaScript

Programación Orientada A Objetos

Excepciones

JavaScript

Programación Orientada A Objetos

Prototipos Y Cadena De Prototipos

JavaScript

Programación Orientada A Objetos

Destructuring De Objetos Y Arrays

JavaScript

Programación Orientada A Objetos

Manipulación Dom

JavaScript

Dom

Selección De Elementos Dom

JavaScript

Dom

Modificación De Elementos Dom

JavaScript

Dom

Eventos Del Dom

JavaScript

Dom

Modificación De Elementos Dom

JavaScript

Dom

Eventos Del Dom

JavaScript

Dom

Localstorage Y Sessionstorage

JavaScript

Dom

Bom (Browser Object Model)

JavaScript

Dom

Modificación De Elementos Dom

JavaScript

Dom

Selección De Elementos Dom

JavaScript

Dom

Callbacks

JavaScript

Programación Asíncrona

Promises

JavaScript

Programación Asíncrona

Async / Await

JavaScript

Programación Asíncrona

Promises

JavaScript

Programación Asíncrona

Async / Await

JavaScript

Programación Asíncrona

Naturaleza De Js Y Event Loop

JavaScript

Programación Asíncrona

Callbacks

JavaScript

Programación Asíncrona

Websockets

JavaScript

Programación Asíncrona

Módulos En Es6

JavaScript

Construcción

Configuración De Bundlers Como Vite

JavaScript

Construcción

Eslint Y Calidad De Código

JavaScript

Construcción

Npm Y Dependencias

JavaScript

Construcción

Introducción A Pruebas En Js

JavaScript

Testing

Pruebas Unitarias

JavaScript

Testing

Accede GRATIS a JavaScript y certifícate

En esta lección

Objetivos de aprendizaje de esta lección

  • Comprender la sintaxis básica de destructuring en arrays y objetos.
  • Aprender a utilizar destructuring en bucles y funciones.
  • Utilizar patrones avanzados como renombrado, valores por defecto y nested destructuring.
  • Aplicar destructuring en situaciones prácticas como manejo de respuestas de API y componentes en React.