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 objeto, 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, etc.: Estos son los nombres de las variables donde se asignarán los valores de las propiedades correspondientes de sourceObject. Las propiedades del objeto se desestructuran por el nombre de la propiedad, no por el orden. El orden no importa en absoluto;
sourceObject: El objeto del cual se desean extraer las propiedades.

Desestructuración de objetos en la práctica

Consideremos un ejemplo donde tenemos un objeto que representa la información de una persona:


              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, se pueden utilizar fullName, nationality y occupation como variables independientes con los valores correspondientes del objeto person.

Proporcionar valores predeterminados

También es posible proporcionar valores predeterminados para las variables en caso de que la propiedad no se encuentre en el objeto de origen:


              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

En este ejemplo, la variable birthDate recibirá el valor "March 9, 1454" si el objeto person no tiene una propiedad birthDate con un valor.

Cambio de nombre de variables

Utilizando la sintaxis :, es posible asignar los valores de las propiedades a variables con nombres diferentes. Por ejemplo:


              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

Ahora, se pueden utilizar las variables min y max en lugar de minTemperature y maxTemperature.

Desestructuración de Objetos Anidados

La desestructuración también se puede aplicar a objetos anidados. Por ejemplo, si el objeto contiene otros objetos como propiedades, es posible desestructurar las propiedades anidadas:


              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

En este ejemplo, es posible acceder tanto a las propiedades de nivel superior como name y profession, como a las propiedades anidadas como degree, university y graduationYear utilizando la desestructuración.

¿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

Suggested prompts:

Can you explain how to use object destructuring with function parameters?

What happens if a property is missing when destructuring?

Can you show more examples of nested object destructuring?

Awesome!

Completion rate improved to 2.27

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, etc.: Estos son los nombres de las variables donde se asignarán los valores de las propiedades correspondientes de sourceObject. Las propiedades del objeto se desestructuran por el nombre de la propiedad, no por el orden. El orden no importa en absoluto;
sourceObject: El objeto del cual se desean extraer las propiedades.

Desestructuración de objetos en la práctica

Consideremos un ejemplo donde tenemos un objeto que representa la información de una persona:


              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, se pueden utilizar fullName, nationality y occupation como variables independientes con los valores correspondientes del objeto person.

Proporcionar valores predeterminados

También es posible proporcionar valores predeterminados para las variables en caso de que la propiedad no se encuentre en el objeto de origen:


              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

En este ejemplo, la variable birthDate recibirá el valor "March 9, 1454" si el objeto person no tiene una propiedad birthDate con un valor.

Cambio de nombre de variables

Utilizando la sintaxis :, es posible asignar los valores de las propiedades a variables con nombres diferentes. Por ejemplo:


              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

Ahora, se pueden utilizar las variables min y max en lugar de minTemperature y maxTemperature.

Desestructuración de Objetos Anidados

La desestructuración también se puede aplicar a objetos anidados. Por ejemplo, si el objeto contiene otros objetos como propiedades, es posible desestructurar las propiedades anidadas:


              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

¿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 podemos proporcionar valores predeterminados para variables en la desestructuración de objetos?

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

Awesome!

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 podemos proporcionar valores predeterminados para variables en la desestructuración de objetos?

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