16

Lendo a documentação de desestruturação em JavaScript, encontrei o trecho abaixo:

Nomes computados de propriedade de objeto e desestruturação

Nomes computados de propriedades, como em objetos literais, podem ser usados com desestruturação.

let key = "z";
let { [key]: foo } = { z: "bar" };

console.log(foo); // "bar"

Mas não entendi o que seria um nome computado. Também não entendi o código citado e gostaria de saber se ele tem alguma utilidade no "mundo real".

2 Respostas 2

18

Basicamente, é um facilitador para acessar propriedades de forma dinâmica dentro de uma desestruturação.

O que é desestruturação?

Primeiramente, vale ressaltar o que é desestruturação de objetos em JavaScript. Para isso, considere o exemplo abaixo:

const myObject = {
  name: 'John Doe',
  age: 50
};

// Estamos desestruturando a propriedade `name` do objeto `myObject`.
const { name, age } = myObject;

// Anteriormente, a forma mais simples de se alcançar o mesmo efeito:
const name = myObject.name;
const age = myObject.age;

Note então que a desestruturação é uma forma simples de se extrair alguns valores de dentro de um objeto, criando variáveis no escopo atual de acordo com os nomes das respectivas propriedades.

E se você quiser desestruturar uma propriedade de um objeto, atribuindo um outro nome à variável que será criada, você pode utilizar esta sintaxe:

const myObject = {
  name: 'John Doe'
};

// No exemplo abaixo, `name` é a propriedade que queremos
// desestruturar do objeto. E `prop` é o nome da variável
// que será criada a partir da desestruturação.
// Se omitíssemos `: prop` da construção abaixo, uma variável
// `name` criar-se-ia no escopo atual. Então...

// Nome da propriedade que estaremos "acessando" (desestruturando) do objeto.
//      ↓↓↓↓
const { name: prop } = myObject;
//            ↑↑↑↑
// Nome da variável que será criada.

console.log(prop); // John Doe


Desestruturação "dinâmica"

A desestruturação via propriedades computadas permite fazer a desestruturação mesmo se você não "souber estaticamente" a chave que você deseja acessar. Em outras palavras, ao invés de ser "desestruturação estática", ocorre uma "desestruturação dinâmica".

A forma mais simples de se acessar uma propriedade a partir de uma expressão ("dinâmica") é utilizar a notação de colchetes para acessar à propriedade do objeto. Veja:

const myDynamicKey = 'name';

const myObject = {
  name: 'John Doe'
};

// O que faremos abaixo é a mesma coisa que:
//
//   ```
//   myObject.name;
//   ```
//
// Só que estamos utilizando uma outra variável,
// que está representando a chave que queremos acessar.
//
// Isso é útil para acessar propriedades de forma dinâmica.
// A propriedade a ser lida virá da avaliação de `myDynamicKey`:
//                   ↓↓↓↓↓↓↓↓↓↓↓↓↓↓
const prop = myObject[myDynamicKey];

console.log(prop); // John Doe

Agora, se quisermos fazer isso utilizando a desestruturação:

const myDynamicKey = 'name';

const myObject = {
  name: 'John Doe'
};

// Estamos declarando uma variável `prop` que virá
// da desestruturação de uma propriedade computada.
//
// A propriedade que iremos desestruturar do objeto
// virá do valor de `myDynamicKey`. No caso, como
// `myDynamicKey` é "name", então iremos acessar, de
// forma dinâmica, a propriedade `name` de `myObject`.
const { [myDynamicKey]: prop } = myObject;

console.log(prop); // John Doe

Então, destrinchando a nossa desestruturação acima:

// Computação dinâmica que estamos fazendo. A propriedade
// correspondente ao valor de `myDynamicKey` será desestruturada
// de forma dinâmica.
//      ↓↓↓↓↓↓↓↓↓↓↓↓↓↓
const { [myDynamicKey]: prop } = myObject;
//                      ↑↑↑↑
// Variável que criamos para o resultado dessa computação dinâmica.
// Como estamos utilizando uma computação dinâmica nessa desestruturação,
// somos forçados a criar uma variável explicitamente na nossa desestruturação.

Confesso que eu prefiro utilizar a notação antiga nesse tipo de situação, já que fica mais explícito o que realmente estamos fazendo. Esse tipo de sintaxe pode ser um pouco "obscura" para novos aprendizes da linguagem.

8

Como dá para ver, uma propriedade de um objeto em JS na verdade é uma chave de índice de um array associativo, então todo símbolo de código (o que pode ser naturalmente confundido com uma variável do objeto) usado para acessar uma propriedade é na verdade uma string com o nome deste símbolo. Sendo assim você pode acessar:

obj.propriedade

ou

obj["propriedade"]

ou

var nome = "propriedade";
obj[nome];

ou ainda

obj[prompt()]; //desde que digite propriedade quando pedir o dado

Tudo isto dá na mesma, funciona.

Então quando você acessar através de uma expressão, seja uma variável, um prompt() maluco como eu usei, ou de uma forma que você calcula o texto da string usada, você está usando um nome computado de propriedade.

Pode ver mais detalhes em Os objetos nativos do JS são arrays associativos?. Veja também.

Exemplo:

var pessoa = {
    nome: "João",
    animais: {
        cachorro: "Rex",
        gato: "Pipoca",
    }
}

console.log(pessoa["animais"]["gato"]);

Coloquei no GitHub para referência futura.

As pessoas ficam deslumbradas com isto quando descobrem e começam fazer coisas mirabolantes e desnecessárias, em geral tendo uma forma mais fácil, mais performática, mais robusta, ou pelo menos mais correta de fazer o mesmo. E ainda podemos falar em mais seguro quando se está usando no servidor, pelo menos em alguns casos.

Como viu pode acessar uma propriedade de acordo com uma entrada do usuário. Mas imagina o quanto é perigoso dar essa chance sem uma validação muito forte. É muito fácil o usuário entrar com um dado errado e o código quebrar por causa disto.

Uma consequência disto pode ser vista em Por que o comportamento da variável indefinida é diferente da propriedade indefinida?.

Alguma pessoas usam para economizar digitação de código ou para mostrar que ela é "muito inteligente" e faz um código ilegível e difícil de dar manutenção. É uma forma de generalizar código, mas quase sempre não fica bom.

Então se você precisar de verdade que o acesso a uma propriedade seja feito por alguma forma a ser determinada no momento da execução esse mecanismo pode ser útil.

Eu já abusei tanto disto em outras linguagens que hoje eu tenho certeza que não é necessário de fato. Então como propriedades de objeto eu não vejo vantagem em usar a não ser por preguiça, distração ou se estiver fazendo um framework que precisa de uma generalização de como proceder, por exemplo um objeto ser criado baseado em alguma informação externa, como um JSON por exemplo. Este é um caso onde você não sabe como o objeto é composto antes de recebê-lo. Aí você pode criar um mecanismo de acesso a objeto sem conhecer suas propriedades. Não dá para fazer muita coisa, mas dá para acessar todas propriedades de uma forma genérica. Se for só para fazer uma exibição de todo conteúdo do objeto por exemplo, dá para para fazer um código usando um nome computado.

Dá para usar a criatividade para fazer algumas coisas legais, mas quase sempre será abuso.

Esses nomes computados são muito mais úteis quando usa um array associativo normal e não um que se traveste de objeto como ocorre no JavaScript. Aí uma aplicação de dicionário por exemplo tem a palavra como chave e a descrição do dicionário como valor, faz bastante sentido. Um exemplo.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .