Pasando variables como literales en la construcción de un objeto Javascript

08 Jul 2011

Hace un par de días, un usuario me realizaba una consulta a través de la web con un tema que no hemos visto hasta ahora: ¿cómo pasar el valor de una variable como un literal en la clave de un objeto Javascript?

Imaginemos el escenario: necesitamos un objeto (JSON por ejemplo) donde tanto la clave como el valor de una (o muchas) de sus propiedades tienen que ser dinámicas. En pseudocódigo:

variable1 = valor1;
variable2 = valor2;
 
objeto1 = {
  variable1 : variable2 // Queremos que: { valor1 = valor 2 }
}

Aunque puede parecer un problema trivial, su solución puede darnos un quebradero de cabeza. La primera intuición de cómo resolver esto falla:

var foo = 'Hello',
    bar = 'World';
 
var myObj = {
  foo : bar
};
 
// We expect: Object { Hello="world" }
console.log( myObj ); // Object{ foo="World" } Ouch!

Como podemos comprobar, foo no ha sido sustiuido por su valor; en lugar de ello aparece como un literal. Y es que ese es el problema: en la especificación ECMAScript, las claves se toman siempre como literales, por lo que no se puede pasar de forma directa un valor dinámico para que lo reemplace:

var myObj = {
  window[foo] : bar, // Fail
  window.foo  : bar // Fail  
}

Esto es un comportamiento diferente a cómo por ejemplo creamos variables dinámicas en Javascript. Para conseguir esto mismo en un objeto, tenemos que hacerlo por separado. La solución por tanto es crear un objeto vacio para ir pasando los pares de clave/valor de forma independiente mediante notación tradicional en lugar de literal.

Para el ejemplo anterior, el código sería:

var foo = 'Hello',
    bar = 'World';
 
var myObj = {};
 
myObj[foo] = bar; 
 
// We expect: Object { Hello="world" }
console.log( myObj ); // Object{ Hello="World" } OK!

En este caso si que hemos conseguido asociar el valor de una variable a la clave en un objeto. De esta forma no deberíamos tener problemas para crear un JSON dinámico o cualquier otro tipo de objeto que precisemos.

Más:

Solo un marciano comentando!

  1. yeikos

    Hiciste los mismos pasos y llegaste a la misma conclusión que yo cuando se me planteó ese problema, es lo bueno de javascript, que las cosas son sencillas.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *