Aprende Desestructuración de Objetos para un Código Más Limpio | Técnicas Avanzadas de Manipulación de Objetos

La desestructuración de objetos es una característica que permite extraer propiedades específicas de un objeto y asignarlas a variables. Esto puede resultar en un código más conciso y legible, especialmente al trabajar con objetos que contienen múltiples propiedades.

Comprensión de la desestructuración de objetos

La desestructuración de objetos es una forma de desempaquetar valores de objetos en variables separadas. La desestructuración utiliza una sintaxis similar a los literales de objetos, pero en el lado izquierdo de una asignación.

Esta es la sintaxis básica para la desestructuración de objetos:

const { property1, property2, ...} = sourceObject;

property1, property2: nombres de variables que contendrán los valores del objeto;
sourceObject: el objeto del que se extraen las propiedades;
El orden no importa: las propiedades se emparejan por nombre.

Desestructuración de objetos en la práctica


              12345678910
            
const person = {
  fullName: "Amerigo Vespucci",
  nationality: "Italian",
  occupation: "Explorer, Cartographer",
};

const { fullName, nationality, occupation } = person;
console.log(fullName); // Output: Amerigo Vespucci
console.log(nationality); // Output: Italian
console.log(occupation); // Output: Explorer, Cartographer

Ahora fullName, nationality y occupation son variables independientes que contienen sus respectivos valores.

Proporcionar valores predeterminados

Si el objeto no contiene una propiedad, se puede asignar un valor predeterminado:


              123456789
            
const person = {
  fullName: "Amerigo Vespucci",
  nationality: "Italian",
};

const { fullName, nationality, birthDate = "March 9, 1454" } = person;
console.log(fullName); // Output: Amerigo Vespucci
console.log(nationality); // Output: Italian
console.log(birthDate); // Output: March 9, 1454

Si birthDate no está presente, se utiliza el valor predeterminado.

Cambio de nombre de variables

Es posible cambiar el nombre de las variables extraídas utilizando la sintaxis :.


              1234567891011
            
const weather = {
  city: "Melbourne",
  minTemperature: 65,
  maxTemperature: 78,
};

const { city, minTemperature: min, maxTemperature: max } = weather;

console.log(city); // Output: Melbourne
console.log(min); // Output: 65
console.log(max); // Output: 78

Esto es útil cuando los nombres más cortos mejoran la legibilidad o cuando se desea evitar conflictos de nombres.

Desestructuración de objetos anidados

También es posible desestructurar propiedades dentro de objetos anidados.


              123456789101112131415161718192021
            
const person = {
  name: "Dean Mayert",
  profession: "Neuropsychologist",
  education: {
    degree: "Ph.D. in Neuropsychology",
    university: "Mind Institute",
    graduationYear: 2008,
  },
};

const {
  name,
  profession,
  education: { degree, university, graduationYear },
} = person;

console.log(name); // Output: Dean Mayert
console.log(profession); // Output: Neuropsychologist
console.log(degree); // Output: Ph.D. in Neuropsychology
console.log(university); // Output: Mind Institute
console.log(graduationYear); // Output: 2008

Es posible extraer valores tanto de nivel superior como profundamente anidados en una sola expresión clara.

¿Todo estuvo claro?

¡Gracias por tus comentarios!

Sección 3. Capítulo 7

Pregunte a AI

Pregunte lo que quiera o pruebe una de las preguntas sugeridas para comenzar nuestra charla

Desliza para mostrar el menú

Comprensión de la desestructuración de objetos

Esta es la sintaxis básica para la desestructuración de objetos:

const { property1, property2, ...} = sourceObject;

property1, property2: nombres de variables que contendrán los valores del objeto;
sourceObject: el objeto del que se extraen las propiedades;
El orden no importa: las propiedades se emparejan por nombre.

Desestructuración de objetos en la práctica


              12345678910
            
const person = {
  fullName: "Amerigo Vespucci",
  nationality: "Italian",
  occupation: "Explorer, Cartographer",
};

const { fullName, nationality, occupation } = person;
console.log(fullName); // Output: Amerigo Vespucci
console.log(nationality); // Output: Italian
console.log(occupation); // Output: Explorer, Cartographer

Ahora fullName, nationality y occupation son variables independientes que contienen sus respectivos valores.

Proporcionar valores predeterminados

Si el objeto no contiene una propiedad, se puede asignar un valor predeterminado:


              123456789
            
const person = {
  fullName: "Amerigo Vespucci",
  nationality: "Italian",
};

const { fullName, nationality, birthDate = "March 9, 1454" } = person;
console.log(fullName); // Output: Amerigo Vespucci
console.log(nationality); // Output: Italian
console.log(birthDate); // Output: March 9, 1454

Si birthDate no está presente, se utiliza el valor predeterminado.

Cambio de nombre de variables

Es posible cambiar el nombre de las variables extraídas utilizando la sintaxis :.


              1234567891011
            
const weather = {
  city: "Melbourne",
  minTemperature: 65,
  maxTemperature: 78,
};

const { city, minTemperature: min, maxTemperature: max } = weather;

console.log(city); // Output: Melbourne
console.log(min); // Output: 65
console.log(max); // Output: 78

Esto es útil cuando los nombres más cortos mejoran la legibilidad o cuando se desea evitar conflictos de nombres.

Desestructuración de objetos anidados

También es posible desestructurar propiedades dentro de objetos anidados.


              123456789101112131415161718192021
            
const person = {
  name: "Dean Mayert",
  profession: "Neuropsychologist",
  education: {
    degree: "Ph.D. in Neuropsychology",
    university: "Mind Institute",
    graduationYear: 2008,
  },
};

const {
  name,
  profession,
  education: { degree, university, graduationYear },
} = person;

console.log(name); // Output: Dean Mayert
console.log(profession); // Output: Neuropsychologist
console.log(degree); // Output: Ph.D. in Neuropsychology
console.log(university); // Output: Mind Institute
console.log(graduationYear); // Output: 2008

Es posible extraer valores tanto de nivel superior como profundamente anidados en una sola expresión clara.

¿Todo estuvo claro?

¡Gracias por tus comentarios!

Sección 3. Capítulo 7

Desestructuración de Objetos para un Código Más Limpio

Comprensión de la desestructuración de objetos

Desestructuración de objetos en la práctica

Proporcionar valores predeterminados

Cambio de nombre de variables

Desestructuración de objetos anidados

1. ¿Qué hace el siguiente código?

2. ¿Cómo se pueden proporcionar valores predeterminados para las variables en la desestructuración de objetos?

3. En la desestructuración de objetos, ¿cómo se pueden renombrar las variables durante la asignación?

Desestructuración de Objetos para un Código Más Limpio

Comprensión de la desestructuración de objetos

Desestructuración de objetos en la práctica

Proporcionar valores predeterminados

Cambio de nombre de variables

Desestructuración de objetos anidados

1. ¿Qué hace el siguiente código?

2. ¿Cómo se pueden proporcionar valores predeterminados para las variables en la desestructuración de objetos?

3. En la desestructuración de objetos, ¿cómo se pueden renombrar las variables durante la asignación?