Array: patrones y confusiones en su manejo

Los misterios de length

Aumentar o reducir el tamaño

El hecho de que length tenga el tamaño de la matriz y los índices de la matriz empiecen por 0 ha dado a más de uno un disgusto. Es una convención a la que hay que acostumbrarse, los índices empiezan en 0 y terminan en length - 1.

Este no es el gran misterio que esconde length, lo más curioso es que esta no es una propiedad de sólo lectura, es una propiedad que podemos escribir y producir efectos sobre el Array.

Si incrementamos el valor de length estaremos incrementando el número de elementos.

var matriz = [1, 2, 3];
matriz.length = 5;
var vacia = [];
vacia.length = 10;

De igual forma, si reducimos el valor de length, estaremos eliminado los elementos del Array que estén por encima del nuevo valor.

var matriz = [1,2,3,4,5,6,7,8,9,10];
matriz.length = 3;

No es muy recomendable aprovechar esta curiosa característica y en general deberíamos tratar length como una propiedad de sólo lectura.

Asignar un nuevo valor por encima del último elemento definido

Si por algún motivo asignamos un elemento en una posición superior al último elemento del Array, la matriz crecerá automáticamente de tamaño. Si nos hemos saltado algún elemento, estos elementos intermedios quedarán como no definidos y tendremos una matriz dispersa.

var matriz = [1,2,3];
matriz[9] = 10;
console.log(matriz);		// [ 1, 2, 3, , , , , , , 10 ]
console.log(matriz.length);	// 10

Aprovechando esta característica se puede añadir un elemento al final de la matriz de la siguiente forma:

var vacia = [];
vacia[vacia.length] = 1;
vacia[vacia.length] = 2;
vacia[vacia.length] = 3;
console.log(vacia); // [1, 2, 3]
console.log(vacia.length); // 3

Debemos tener cuidado con incrementar el tamaño de una matriz sin darnos cuenta, ya que la creación de una matriz dispersa puede ser fuente de problemas y comportamientos no deseados.

delete y length

Con la instrucción delete se puede borrar una variable o un elemento de un Array. Cuando se usa con un Array hay que tener en cuenta que no modifica el valor de length, aunque borremos al último elemento, manteniéndose el tamaño de la matriz. Como consecuencia del uso de delete se genera una matriz dispersa, es decir, con alguno de sus valores sin definir.

var matriz = [1,2,3,4,5];

delete matriz[4];
console.log(matriz);        // [ 1, 2, 3, 4,  ]
console.log(matriz.length); // 5

delete matriz[0];
console.log(matriz);        // [ , 2, 3, 4,  ]
console.log(matriz.length); // 5

Es uso de delete está poco extendido. En el caso de utilizarlo con matrices debemos tener en cuenta su comportamiento y comprender que no estamos variando en ningún momento su tamaño-

Métodos del objeto Array

Vamos a dar un repaso a los diferentes modelos de métodos que tiene el objeto Array. Siguen varios patrones y no son siempre evidentes. Vamos a dar un repaso general a todos los métodos viendo que parámetros recibe, que valor devuelve, si modifican o no la matriz desde la que son llamadas y cómo se comportan con las matrices dispersas. También incluiremos una breve referencia desde que versión de ECMAScript está soportado y que navegadores y entornos lo tienen disponible.

En vez de una lista alfabética vamos a agrupar los métodos por temas a fin de dar una mayor comprensión a su funcionamiento y características.

Ampliar o reducir el Array

Para añadir y eliminar elementos del Array disponemos del siguiente conjunto de métodos:

Si nos fijamos, la primera sorpresa viene al comprobar que todos los métodos menos concat() modifican la matriz original. Este método devuelve una nueva matriz con los elementos añadidos y mantiene intacta la matriz original. Por este motivo concat() es utilizado en ocasiones para copiar un Array en otro.

Si queremos modificar la matriz original añadiendo nuevos elementos debemos utilizar push() o splice().

var matriz1 = [1,2,3,4,5];
var result1 = matriz1.concat(6, 7, 8, 9);
console.log(matriz1);   // [ 1, 2, 3, 4, 5 ]
console.log(result1);   // [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ]

var matriz2 = [1,2,3,4,5];
matriz2.push(6,7,8,9);
console.log(matriz2);   // [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ]

var matriz3 = [1,2,3,4,5];
matriz3.splice(matriz3.length, 0, 6, 7,8,9);
console.log(matriz3);   // [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ]

Hay otra importante diferencia entre concat(), push() y splice(): el método concat() cambia de comportamiento si lo que recibe por parámetro es una matriz o si recibe otro tipo de valor. Si recibe una matriz anexa cada uno de los valores y no un solo valor como matriz anidada. Por el contrario, si push() y splice() reciben una matriz la incorporan como un solo elemento de tipo Array.

var matriz1 = [1,2,3,4,5];
var result2 = matriz1.concat( [6, 7,8,9] );
console.log(matriz1);   // [ 1, 2, 3, 4, 5 ]
console.log(result2);   // [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ]

var matriz2 = [1,2,3,4,5];
matriz2.push([6,7,8,9]);
console.log(matriz2);   // [ 1, 2, 3, 4, 5, [ 6, 7, 8, 9 ] ]

var matriz3 = [1,2,3,4,5];
matriz3.splice(matriz3.length, 0, [6, 7,8,9]);
console.log(matriz3);   // [ 1, 2, 3, 4, 5, [ 6, 7, 8, 9 ] ]

Si queremos añadir un Array en otro Array podemos utilizar push() o splice(), pero tenemos que hacer algo más. En ES6 podemos utilizar el operador … (spread) y en ES5.1 o anteriores utilizaremos Array.prototype.push.apply() o Array.prototype.splice.apply(). En ambos casos la matriz se convierte en los parámetros individuales.

// ES6
var matriz4 = [1,2,3,4,5];
matriz4.push(...[6,7,8,9]);
console.log(matriz4); // [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ]

// ES3
var matriz5 = [1,2,3,4,5];
Array.prototype.push.apply(matriz5, [6,7,8,9]);
console.log(matriz5); // [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ]

// ES6
var matriz6 = [1,2,3,4,5];
matriz6.splice(matriz6.length, 0, ...[6,7,8,9]);
console.log(matriz6); // [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ]

// ES3
var matriz7 = [1,2,3,4,5];
Array.prototype.splice.apply(matriz7, [matriz7.length, 0].concat([6,7,8,9]));
console.log(matriz7); // [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ]

Otra diferencia que igual se nos ha escapado es que slice() utiliza como parámetros start, end y splice() utiliza start, count, es decir, en el primer caso indicamos los índices del primer y último elemento que vamos a obtener, mientras que en el segundo caso indicamos el índice del primer elemento y cuantos elementos queremos extraer.

var matriz = [1,2,3,4,5];

var result1 = matriz.slice(1,3);
console.log(result1); // [ 2, 3 ]

var result2 = matriz.splice(1,3);
console.log(result2); // [ 2, 3, 4 ]

Buscar en el Array

Para buscar en un Array disponemos de los siguientes métodos:

Tenemos que tener en cuenta los diferentes comportamientos a la hora de trabajar con matrices dispersas. IndexOf() y lastIndexOf() no tienen en cuenta los elementos no definidos de una matriz, mientras que la función callback de find() y findIndex() sí serán invocadas para los elementos no definidos.

var matriz = [1,2,3, ,5];

var result1 = matriz.indexOf(undefined);
console.log(result1); // -1

var result2 = matriz.lastIndexOf(undefined);
console.log(result2); // -1

var result3 = matriz.find(function(item, index, arr) {
   if (item === undefined) {
        return true;
    }
});
console.log(result3); // undefined

var result4 = matriz.findIndex(function(item, index, arr) {
    if (item === undefined) {
        return true;
    }
});
console.log(result4); // 3

Recorrer la matriz

Disponemos de un buen conjunto de instrucciones y métodos para trabajar con un Array recorriendo todos sus elementos.

En primer lugar, tenemos que diferenciar dos grandes bloques: los bucles for y for of tienen en cuenta a los elementos no definidos de las matrices dispersas, mientras que for in y el resto de los métodos ignoran los elementos no definidos.

var matriz = ['red', 'orange', 'yellow', , 'blue', 'purple'];

for (var n = 0; n < matriz.length; n++) {
    console.log(matriz[n]);         // red orange yellow undefined blue purple
}

for (var i in matriz) {
    console.log(matriz[i]);         // red orange yellow blue purple
}

for (var e of matriz) {
    console.log(e);                 // red orange yellow undefined blue purple
}

matriz.forEach(function(item, index, arr) {
    console.log(item);              // red orange yellow blue purple
});

Un caso bastante curioso lo constituyen map() y filter(). Ninguno de los dos métodos pasa los elementos no definidos a la función que reciben como parámetro, pero el resultado es diferente en cada caso. En map() los elementos no definidos se mantienen, mientras que con filter() los elementos no definidos son eliminados de la matriz resultante.

var matriz = ['red', 'orange', 'yellow', , 'blue', 'purple'];

var result1 = matriz.map(function(item, index, arr) {
    console.log(item);              // red orange yellow blue purple
    return item;
});
console.log(result1);               // [ 'red', 'orange', 'yellow', , 'blue', 'purple' ]

var result2 = matriz.filter(function(item, index, arr) {
console.log(item);                  // red orange yellow blue purple
    return true;
});
console.log(result2);               // [ 'red', 'orange', 'yellow', 'blue', 'purple' ]

Modificar el contenido de las matrices

Disponemos de varios métodos para modificar el contenido de la matriz sin alterar su tamaño.

Como podemos ver, copyWithin() y fill() siguen el formato de slice() de utilizar start y end como parámetros, a diferencia de splice() que se queda sólo en el formato de parámetros start y count.

Todos estos métodos modifican la matriz y además la devuelven, a diferencia de los métodos del grupo anterior que devuelven una nueva matriz sin modificar la original. Esta diferencia de comportamiento hace que veamos en muchas ocasiones códigos donde se asigna el retorno de estos métodos a la matriz original, aunque realmente no es realmente necesario:

var matriz = ['red', 'orange', 'yellow', 'green' , 'blue', 'purple'];
matriz = matriz.sort();

Estos métodos trabajan sin problemas con los elementos no definidos de una matriz dispersas, si bien tenemos un caso especial con sort(), ya que los valores no definidos no serán pasados a la función que pasamos como parámetro para realizar la ordenación y serán situados al final de la nueva matriz.

var dispersa = ['red', 'orange', 'yellow', , 'blue', 'purple'];
dispersa.sort(function(prev, next) {
    console.log(prev, next);    // nunca se muestra undefined
    return prev> next;
});
console.log(dispersa);          // [ 'blue', 'orange', 'purple', 'red', 'yellow',  ] 

Este comportamiento resulta bastante confuso y es muy posible que no nos esperemos encontrar los elementos definidos al final de la matriz tras una ordenación.

Array y String

En este caso join() convierte los elementos no definidos de una matriz dispersa en una cadena vacía. Por el contrario, split() no convierte una cadena vacía en un elemento no definido, si no en un elemento que contiene una cadena vacía.

Iteradores

En ES6 han aparecido nuevos métodos para trabajar con iteradores a partir de un Array.

En todos los casos los elementos no definidos de una matriz dispersa son gestionados sin problemas por los métodos del objeto Array.

var matriz = [1,2, , 4, 5];
for (var n of matriz.entries() ) {
    console.log(n);     // [ 0, 1 ]  [ 1, 2 ]  [ 2, undefined ]  [ 3, 4 ]  [ 4, 5 ]
}

for (var i of matriz.values() ) {
    console.log(i);     // 1   2   undefined   4   5
}

for (var e of matriz[Symbol.iterator]() ) {
    console.log(e);     // 1   2   undefined   4   5
} 

Aunque pueda sorprender, a la fecha de este artículo values() no está implementado en Node o Chrome, aunque sí está disponible en Micosoft Edge, Opera y Apple Safari.

Por otra parte, no tiene sentido que Array.form() considere un valor undefined y cree una matriz dispersa, simplemente considera ese caso como un valor explícitamente definido como undefined y genera una matriz densa.

function* gen() {
    yield 1;
    yield 2;
    yield 3;
    yield;          // undefined
    yield 5;
}
var arr = Array.from(gen());
console.log(arr);   // [ 1, 2, 3, undefined, 5 ]

Comprobar el tipo

Array es el único objeto que tiene un método para comprobar si una determinada variable es de este tipo. Por medio de Array.isArray() podemos comprobar si el valor pasado por parámetro es de este tipo, pero no hay ninguna otro objeto de Javascript que tenga un método de este tipo, por lo que resulta una cierta rareza dentro del conjunto de métodos disponibles.

Conclusiones

Si hacemos un breve resumen de la situación nos encontramos que:

• Podemos crear matrices dispersas con las expresiones literales [], pero no cuando indicamos varios parámetros a new Array() o Array.of()
• new Array() y Array() si reciben un solo parámetro de tipo entero crean una matriz vacía con ese tamaño y con el nuevo Array.of() podemos crear una matriz de un solo elemento con un valor entero.
• length es una propiedad de lectura y escritura y amplia o reduce el tamaño de la matriz.
• Si asignamos un valor por encima del valor máximo de la matriz esta crece automáticamente, dejando los posibles valores intermedios como no definidos.
• delete borra elementos de la matriz, pero no modifica el tamaño de la misma, dejando los elementos como no definidos.
• Los métodos copyWithin(), fill() y slice() tiene los parámetros start y end y por el contrario splice() utiliza start y count.
• Los métodos pop(), push(), shift(), unshift(), splice(), copyWithin(), fill(), sort() y reverse() modifican la matriz. concat(), slice(), filter() y map() no la modifican.
• indexOf(), lastIndexOf(), hasOwnProperty(), for of, forEach(), filter(), map(), reduce(), reduceRight(), every() y some() ignoran los elementos no definidos. sort() no los pasa al callback, pero los mantiene al final de la matriz. Todos los demás métodos e instrucciones manejan y gestionan los datos no definidos de las matrices dispersas sin problemas.
• El objeto Array es el único que dispone de un método para comprobar el tipo de una variable: Array.isArray().

Resulta complicado dar unas conclusiones ante esta situación. Está claro que las instrucciones y métodos para el manejo de las matrices no están regidos todas ellos por el mismo patrón y eso resulta bastante confuso, siendo motivo de equívocos e incluso errores en nuestro código.

La compatibilidad con versiones anteriores de ECMAScript hace que las nuevas versiones hereden los diseños y parámetros de funcionamiento anteriores. Parece que los nuevos diseños deberían ser más consistentes, pero aun así nos encontramos que métodos definidos en ES6 que funcionan de forma diferente en cuanto a las matrices dispersas. Seguramente los sabios que definen el lenguaje deben tener sus motivos para estos diseños, pero resulta difícil de comprenderlos por nosotros los sencillos programadores que intentamos sacar el máximo partido de Javascript.

Poco podemos hacer en la práctica más allá de conocer estas diferencias y tenerlas en cuenta en nuestros desarrollos.