Uso de nombres de propiedades dinámicas en la inicialización de objetos con ES6

El desafío de crear objetos con nombres de propiedades derivados de fuentes externas a menudo surge en la programación. En el escenario descrito en nuestra consulta, intentamos construir un objeto JavaScript con propiedades cuyas claves están definidas en una variable separada, KEYS.

Sin embargo, al asignar valores a las propiedades dentro del objeto, encontramos un error debido al uso del operador de punto (.). Este operador está reservado para nombres de propiedades de objetos literales y no se puede utilizar con nombres de propiedades dinámicas.

Para solucionar este problema, recurrimos al poder de ES6 (EcmaScript 2016), una adición reciente a los estándares de JavaScript que introduce más sintaxis y características expresivas. Una de estas características es la sintaxis de propiedad calculada, que nos permite definir dinámicamente nombres de propiedades.

Usando la sintaxis de propiedad calculada, podemos reescribir el código de la siguiente manera, lo que creará exitosamente un objeto con la propiedad dinámica deseada. nombres:

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

En este código, los corchetes ([]) alrededor de los nombres de las propiedades indican que estamos usando la sintaxis de propiedad calculada. La expresión entre corchetes se evalúa como el nombre de la propiedad dinámica, que se recupera de la variable KEYS.