Aprenda Desestruturação de Objetos para Código Mais Limpo | Técnicas Avançadas de Manipulação de Objetos

A desestruturação de objetos é um recurso que permite extrair propriedades específicas de um objeto e atribuí-las a variáveis. Isso pode resultar em um código mais conciso e legível, especialmente ao trabalhar com objetos que possuem várias propriedades.

Compreendendo a Desestruturação de Objetos

A desestruturação de objetos é uma forma de desempacotar valores de objetos em variáveis separadas. A desestruturação utiliza uma sintaxe semelhante à de literais de objeto, mas no lado esquerdo de uma atribuição.

Aqui está a sintaxe básica para desestruturação de objetos:

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

property1, property2: nomes das variáveis que armazenarão os valores do objeto;
sourceObject: objeto do qual as propriedades estão sendo extraídas;
A ordem não importa: as propriedades são correspondidas pelo nome.

Desestruturação de Objetos na Prática


              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

Agora fullName, nationality e occupation são variáveis independentes que armazenam seus respectivos valores.

Definir valores padrão

Se o objeto não contiver uma propriedade, é possível atribuir um valor padrão:


              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

Se birthDate estiver ausente, o valor padrão será utilizado.

Renomeando variáveis

É possível renomear variáveis extraídas utilizando a sintaxe :.


              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

Isso é útil quando nomes mais curtos melhoram a legibilidade ou ao evitar conflitos de nomes.

Desestruturação de Objetos Aninhados

Também é possível desestruturar propriedades dentro de objetos aninhados.


              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

É possível extrair valores de nível superior e profundamente aninhados em uma única expressão clara.

Tudo estava claro?

Obrigado pelo seu feedback!

Seção 3. Capítulo 7

Pergunte à IA

Pergunte o que quiser ou experimente uma das perguntas sugeridas para iniciar nosso bate-papo

Suggested prompts:

Can you explain how object destructuring works with arrays?

What happens if a property is missing and no default value is provided?

Can you show more examples of nested destructuring?

Deslize para mostrar o menu

Compreendendo a Desestruturação de Objetos

Aqui está a sintaxe básica para desestruturação de objetos:

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

property1, property2: nomes das variáveis que armazenarão os valores do objeto;
sourceObject: objeto do qual as propriedades estão sendo extraídas;
A ordem não importa: as propriedades são correspondidas pelo nome.

Desestruturação de Objetos na Prática


              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

Agora fullName, nationality e occupation são variáveis independentes que armazenam seus respectivos valores.

Definir valores padrão

Se o objeto não contiver uma propriedade, é possível atribuir um valor padrão:


              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

Se birthDate estiver ausente, o valor padrão será utilizado.

Renomeando variáveis

É possível renomear variáveis extraídas utilizando a sintaxe :.


              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

Isso é útil quando nomes mais curtos melhoram a legibilidade ou ao evitar conflitos de nomes.

Desestruturação de Objetos Aninhados

Também é possível desestruturar propriedades dentro de objetos aninhados.


              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

É possível extrair valores de nível superior e profundamente aninhados em uma única expressão clara.

Tudo estava claro?

Obrigado pelo seu feedback!

Seção 3. Capítulo 7

Desestruturação de Objetos para Código Mais Limpo

Compreendendo a Desestruturação de Objetos

Desestruturação de Objetos na Prática

Definir valores padrão

Renomeando variáveis

Desestruturação de Objetos Aninhados

1. O que o código a seguir faz?

2. Como fornecer valores padrão para variáveis na desestruturação de objetos?

3. Na desestruturação de objetos, como renomear variáveis durante a atribuição?

Desestruturação de Objetos para Código Mais Limpo

Compreendendo a Desestruturação de Objetos

Desestruturação de Objetos na Prática

Definir valores padrão

Renomeando variáveis

Desestruturação de Objetos Aninhados

1. O que o código a seguir faz?

2. Como fornecer valores padrão para variáveis na desestruturação de objetos?

3. Na desestruturação de objetos, como renomear variáveis durante a atribuição?