Javascript: Pop() a un arreglo asociativo indexado con Strings.

Standard

 

Problemática

Cuando se trabaja con arreglos en JavaScript es más que común el hecho de usar los métodos pop() y push(). Estos dos métodos agregan y remueven un elemento de un arreglo, respectivamente.

Existe en JavaScript la posibilidad de trabajar con arreglos indexados, sin embargo JavaScript sólo soporta indices numéricos.

var user_story = [];
 user_story[0] = "US1";
 user_story[1] = "Como usuario deseo... blah blah blah ";
 user_story[2] = 10;

Esto último yo no lo sabía. Por facilidad de trabajar con los resultados que regresaba la API de Trello en un proyecto interno llamado Kanbanhu decidí usar arreglos asociativos indexados con Strings.

var user_story = [];
 user_story["id"] = "US1";
 user_story["description"]  = "Como usuario deseo... blah blah blah ";
 user_story["estimation"] = 10;

Desde el punto de vista de mantenimiento y facilidad de lectura del código, era más natural leer un código que implementara arreglos asociativos indexados con strings en comparación con arreglos asociativos indexados numéricamente.

var sprint = [];
 sprint["US1"] = "12547623153";
 sprint["US2"] = "19286378129";
 sprint["US3"] = "23894723893";
 sprint["US4"] = "32784632873";

Pero bueno, eso era lo bonito de trabajar con este tipo de arreglos. Lo no tan bonito y por lo cual les estoy compartiendo este post fue cuando quise hacerle pop a uno de estos arreglos para obtener uno de sus elementos, no podía.

El resultado que estaba obteniendo en la variable a la que le asignaba el resultado del pop() era undefined.

No podía hacerle pop a este tipo de arreglos, pero era crucial para la manera en que me planteaba darle solución a los problemas en el código, tenía que encontrar la forma.

El siguiente fragmento de código si funcionaba, podía hacer pop a un arreglo indexado numéricamente.

JsFiddle: ejemplo arreglo indexado numéricamente

var sampleArray = [];
 
 sampleArray[0] = 'Uno';
 sampleArray[1] = 'Dos';
 sampleArray[2] = 'Tres';
 sampleArray[3] = 'Cuatro';
 
 console.log(sampleArray.length);

for(val = sampleArray.pop() ; val ; val = sampleArray.pop()){
 $('#result').append(val)
             .append("<br>");
 }

Pero yo necesitaba hacerle pop a un arreglo indexado con strings.

El siguiente fragmento de código muestra como lo había intentando en un principio y de donde estaba obteniendo valores undefined.

JsFiddle: ejemplo arreglo indexado con strings.

var sampleArray = [];
 
 sampleArray['key1'] = 'Uno';
 sampleArray['key2'] = 'Dos';
 sampleArray['key3'] = 'Tres';
 sampleArray['key4'] = 'Cuatro';

var val = sampleArray.pop();

console.log(val);
 $('#result').append(val)
             .append("<br>");

Si consultas la consola del navegador podrás ver los valores undefined que se estaban asignando.

La solución

Después de leer un poco descubrí lo que les comenté al inicio del post, que los arreglos indexados con strings no eran soportados por JavaScript y que su uso redifiniría a ese arreglo a un objeto estándar. Por ende todos los métodos y propiedades relacionadas al arreglo producirían resultados incorrectos. Ahí estaba la razón del por qué no podía hacerle pop() a ese arreglo.

Y así fue como logré acceder a los elementos del arreglo.

JsFiddle: La solución

var sampleArray = [];

 sampleArray['key1'] = 'Uno';
 sampleArray['key2'] = 'Dos';
 sampleArray['key3'] = 'Tres';
 sampleArray['key4'] = 'Cuatro';

for (key in sampleArray) {
 var val = sampleArray[key];
 console.log(key);
 $('#result').append(val)
             .append("<br>");
 }

Donde “key” viene siendo el índice del arreglo.

Los arreglos en JavaScript siguen siendo objetos, digamos que un tipo especial de objeto, así que la mejor manera que encontré de obtener un elemento de un array asociativo indexado fue tratarlo como tal, recorriendo el arreglo como si este fuera un objeto.

Cosa técnica que muchas veces se nos podría llegar a escapar de las manos y consumirnos un poco de tiempo.

Si este post te ha sido útil te invito a comentar, el hecho de servir a la comunidad de desarrolladores es uno de los objetivos de este blog, de esa forma nos motivas a seguir documentando nuestra experiencia.

5 thoughts on “Javascript: Pop() a un arreglo asociativo indexado con Strings.

  1. Karen interesante, pero por que no utilizaste un objeto puro de javascript
    como esto:

    var miObjeto = { };
    miObjeto.key1 = “algo”;
    //recuperando valor de 2 maneras
    console.log(miObjeto.key1); //manera propiedad
    console.log(miObjeto[“key1”]); //manera hash

    saludos

  2. Developer Senior

    Puedes usar lo siguiente:

    var user = [];
    user[“id”] = 1;
    user[“name”] = “Pepe”;
    user[“age”] = 20;

    console.log(user);
    // [id: 1, name: “Pepe”, age: 20]

    delete user[“id”];
    // true

    console.log(user);
    // [name: “Pepe”, age: 20]

    • “Developer Senior” estas haciendo lo mismo que hizo karen cuando tenía el problema, los arrays asociativos “no existen” en JavaScript de forma nativa, para eso estan los objetos. El array es una clase especializada de javascript y como todo objeto en javascript es dinámico se le pueden agregar propiedades y funciones en tiempo de ejecución , al hacer
      var user = [];
      user[“id”] = 1;
      lo único que estas haciendo es asignarle una propiedad a ese objeto array.
      por eso la mejor practica para recorrer un array es mediante método foreach del array o simplemente mediante un for natural
      saludos y estos comentarios no son para criticar, sino para aportar

Leave a Reply

Your email address will not be published. Required fields are marked *