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 e assim por diante: Estes são os nomes das variáveis onde os valores das propriedades correspondentes de sourceObject serão atribuídos. As propriedades do objeto são desestruturadas pelo nome da propriedade, não pela ordem. A ordem não importa;
sourceObject: O objeto do qual desejamos extrair as propriedades.

Desestruturação de Objetos na Prática

Considere um exemplo em que temos um objeto representando as informações de uma pessoa:


              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, é possível utilizar fullName, nationality e occupation como variáveis separadas com os respectivos valores do objeto person.

Fornecimento de Valores Padrão

Também é possível fornecer valores padrão para variáveis caso a propriedade não seja encontrada no objeto de origem:


              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

Neste exemplo, a variável birthDate receberá o valor "March 9, 1454" caso o objeto person não possua uma propriedade birthDate com valor definido.

Renomeando Variáveis

Utilizando a sintaxe :, é possível atribuir os valores das propriedades a variáveis com nomes diferentes. Por exemplo:


              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

Agora, é possível utilizar as variáveis min e max em vez de minTemperature e maxTemperature.

Desestruturação de Objetos Aninhados

A desestruturação também pode ser aplicada a objetos aninhados. Por exemplo, se o objeto contiver outros objetos como propriedades, é possível desestruturar as propriedades internas:


              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

Neste exemplo, é possível acessar tanto as propriedades de nível superior, como name e profession, quanto as propriedades aninhadas, como degree, university e graduationYear, utilizando a desestruturação.

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 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

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 e assim por diante: Estes são os nomes das variáveis onde os valores das propriedades correspondentes de sourceObject serão atribuídos. As propriedades do objeto são desestruturadas pelo nome da propriedade, não pela ordem. A ordem não importa;
sourceObject: O objeto do qual desejamos extrair as propriedades.

Desestruturação de Objetos na Prática

Considere um exemplo em que temos um objeto representando as informações de uma pessoa:


              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, é possível utilizar fullName, nationality e occupation como variáveis separadas com os respectivos valores do objeto person.

Fornecimento de Valores Padrão

Também é possível fornecer valores padrão para variáveis caso a propriedade não seja encontrada no objeto de origem:


              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

Neste exemplo, a variável birthDate receberá o valor "March 9, 1454" caso o objeto person não possua uma propriedade birthDate com valor definido.

Renomeando Variáveis

Utilizando a sintaxe :, é possível atribuir os valores das propriedades a variáveis com nomes diferentes. Por exemplo:


              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

Agora, é possível utilizar as variáveis min e max em vez de minTemperature e maxTemperature.

Desestruturação de Objetos Aninhados

A desestruturação também pode ser aplicada a objetos aninhados. Por exemplo, se o objeto contiver outros objetos como propriedades, é possível desestruturar as propriedades internas:


              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

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

Fornecimento de Valores Padrão

Renomeando Variáveis

Desestruturação de Objetos Aninhados

1. O que o seguinte código faz?

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

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

Awesome!

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

Compreendendo a Desestruturação de Objetos

Desestruturação de Objetos na Prática

Fornecimento de Valores Padrão

Renomeando Variáveis

Desestruturação de Objetos Aninhados

1. O que o seguinte código faz?

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

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