Usando nomes de propriedades dinâmicas na inicialização de objetos com ES6

O desafio de criar objetos com nomes de propriedades derivados de fontes externas geralmente surge na programação. No cenário descrito em nossa consulta, tentamos construir um objeto JavaScript com propriedades cujas chaves são definidas em uma variável separada, KEYS.

No entanto, ao atribuir valores às propriedades dentro do objeto, encontramos um erro devido ao uso do operador ponto (.). Este operador é reservado para nomes literais de propriedades de objetos e não pode ser usado com nomes de propriedades dinâmicas.

Para resolver esse problema, recorremos ao poder do ES6 (EcmaScript 2016), uma adição recente aos padrões JavaScript que apresenta mais sintaxe e recursos expressivos. Um desses recursos é a sintaxe de propriedade computada, que nos permite definir nomes de propriedades dinamicamente.

Usando a sintaxe de propriedade computada, podemos reescrever o código da seguinte forma, o que criará com sucesso um objeto com a propriedade dinâmica desejada nomes:

iconMap: {
    [KEYS.PHONE_TYPE]: 'icon-phone',
    [KEYS.AGENT_TYPE]: 'icon-headphones',
},

Neste código, os colchetes ([]) ao redor dos nomes das propriedades indicam que estamos usando sintaxe de propriedade computada. A expressão entre colchetes é avaliada como o nome da propriedade dinâmica, que é recuperada da variável KEYS.