Desestruturação de objetos JavaScript

Resumo : neste tutorial, você aprenderá sobre a desestruturação de objetos JavaScript, que atribui propriedades de um objeto a variáveis individuais.

Se você quiser aprender como desestruturar um array , você pode conferir o tutorial de desestruturação de array .

Introdução à tarefa de desestruturação de objetos JavaScript

Suponha que você tenha um personobjeto com duas propriedades: firstNamee lastName.

let person = {
    firstName: 'John',
    lastName: 'Doe'
};Linguagem de código:  JavaScript  ( javascript )

Antes do ES6, quando você deseja atribuir propriedades do personobjeto a variáveis, normalmente você faz assim:

let firstName = person.firstName;
let lastName = person.lastName; Linguagem de código:  JavaScript  ( javascript )

ES6 introduz a sintaxe de desestruturação de objetos que fornece uma maneira alternativa de atribuir propriedades de um objeto a variáveis:

let { firstName: fname, lastName: lname } = person;Linguagem de código:  JavaScript  ( javascript )

Neste exemplo, as propriedades firstNamee lastNamesão atribuídas às variáveis fNamee lNamerespectivamente.

Nesta sintaxe:

let { property1: variable1, property2: variable2 } = object;Linguagem de código:  JavaScript  ( javascript )

O identificador antes dos dois pontos ( :) é a propriedade do objeto e o identificador depois dos dois pontos é a variável.

Observe que o nome da propriedade está sempre à esquerda, seja um literal de objeto ou uma sintaxe de desestruturação de objeto.

Se as variáveis tiverem os mesmos nomes das propriedades do objeto, você poderá tornar o código mais conciso da seguinte maneira:

let { firstName, lastName } = person;

console.log(firstName); // 'John'
console.log(lastName); // 'Doe'Linguagem de código:  JavaScript  ( javascript )

Neste exemplo, declaramos duas variáveis firstNamee lastNamee atribuímos as propriedades do objeto pessoa às variáveis na mesma instrução.

É possível separar a declaração e a atribuição. No entanto, você deve colocar as variáveis entre parênteses:

({firstName, lastName} = person);

Se você não usar os parênteses, o mecanismo JavaScript interpretará o lado esquerdo como um bloco e gerará um erro de sintaxe.

Quando você atribui uma propriedade que não existe a uma variável usando a desestruturação de objetos, a variável é definida como undefined. Por exemplo:

let { firstName, lastName, middleName } = person;
console.log(middleName); // undefinedLinguagem de código:  JavaScript  ( javascript )

Neste exemplo, a middleNamepropriedade não existe no personobjeto, portanto, a middleNamevariável é undefined.

Configurando valores padrão

Você pode atribuir um valor padrão à variável quando a propriedade de um objeto não existir. Por exemplo:

let person = {
    firstName: 'John',
    lastName: 'Doe',
    currentAge: 28
};

let { firstName, lastName, middleName = '', currentAge: age = 18 } = person;

console.log(middleName); // ''
console.log(age); // 28Linguagem de código:  JavaScript  ( javascript )

Neste exemplo, atribuímos uma string vazia à middleNamevariável quando o objeto pessoa não possui a middleNamepropriedade.

Além disso, atribuímos a currentAgepropriedade à agevariável com o valor padrão 18.

No entanto, quando o personobjeto possui a middleNamepropriedade, a atribuição funciona normalmente:

let person = {
    firstName: 'John',
    lastName: 'Doe',
    middleName: 'C.',
    currentAge: 28
};

let { firstName,  lastName, middleName = '', currentAge: age = 18 } = person;

console.log(middleName); // 'C.'
console.log(age); // 28Linguagem de código:  JavaScript  ( javascript )

Desestruturando um objeto nulo

Uma função pode retornar um objeto ou nulo em algumas situações. Por exemplo:

function getPerson() {
    return null;
}Linguagem de código:  JavaScript  ( javascript )

E você usa a atribuição de desestruturação de objetos:

let { firstName, lastName } = getPerson();

console.log(firstName, lastName);Linguagem de código:  JavaScript  ( javascript )

O código lançará um TypeError:

TypeError: Cannot destructure property 'firstName' of 'getPerson(...)' as it is null.Linguagem de código:  JavaScript  ( javascript )

Para evitar isso, você pode usar o ORoperador ( ||) para fazer fallback do nullobjeto para um objeto vazio:

let { firstName, lastName } = getPerson() || {};Linguagem de código:  JavaScript  ( javascript )

Agora, nenhum erro ocorrerá. E o firstNamee lastNameserá undefined.

Desestruturação de objetos aninhados

Supondo que você tenha um employeeobjeto que tenha um nameobjeto como propriedade:

let employee = {
    id: 1001,
    name: {
        firstName: 'John',
        lastName: 'Doe'
    }
};Linguagem de código:  JavaScript  ( javascript )

A instrução a seguir desestrutura as propriedades do nameobjeto aninhado em variáveis individuais:

let {
    name: {
        firstName,
        lastName
    }
} = employee;

console.log(firstName); // John
console.log(lastName); // DoeLinguagem de código:  JavaScript  ( javascript )

É possível fazer múltiplas atribuições de uma propriedade a múltiplas variáveis:

let employee = {
    id: 1001,
    name: {
        firstName: 'John',
        lastName: 'Doe'
    }
};

let {
    name: {
        firstName,
        lastName
    },
    name
} = employee;

console.log(firstName); // John
console.log(lastName); // Doe
console.log(name); // { firstName: 'John', lastName: 'Doe' }Linguagem de código:  JavaScript  ( javascript )

Desestruturando argumentos de função

Suponha que você tenha uma função que exibe o objeto person:

let display = (person) => console.log(`${person.firstName} ${person.lastName}`);

let person = {
    firstName: 'John',
    lastName: 'Doe'
};

display(person);Linguagem de código:  JavaScript  ( javascript )

É possível desestruturar o argumento do objeto passado para a função assim:

let display = ({firstName, lastName}) => console.log(`${firstName} ${lastName}`);

let person = {
    firstName: 'John',
    lastName: 'Doe'
};

display(person);Linguagem de código:  JavaScript  ( javascript )