Los Arrays en JavaScript. Cómo trabajar con listas

En esta ocasión, quiero hablar sobre los arrays en JavaScript. Qué son y cómo trabajar con ellos en este lenguaje. Veremos cómo se representan o más bien dicho, como los representa el lenguaje de forma interna, cómo crearlos, modificarlos y en definitiva, las operaciones que podemos hacer con los arrays.

¿Qué son los arrays?

Los arrays son una estructura de datos que en JavaScript se representan como un bluque contiuo de memoria para almacenar varios datos en forma de lista, y a la que podemos acceder a traves de un índice a cada uno de los elementos.

En este lenguaje, un array es un objeto que, dependiendo la forma en que lo creemos tendrá unas u otras propiedades.

Además, en JavaScript, podemos guardar diferentes tipos de datos en un mismo array, y cada uno de estos datos, puede ser cualquier tipo soportado por el lenguaje, incluso una función.

Veamos algunos ejemplos:

var array_vacio = []; // Esto es un array vacío
var numeros = ['cero', 'uno', 'dos', 'tres', 'cuatro']; // Arary inicializado con 5 elementos de tipo string
var numeros_indices = {
     '0': 'cero',
     '1': 'uno',
     '2': 'dos',
     '3': 'tres',
     '4': 'cuatro',
}; // "Array" (pista, es un objeto) similar a numeros, con los mismos datos, pero con algunas diferencias que veremos a continuación
var array_mixto = [
     'Hola',
     25,
     true,
     [1,2,3]
]; // Array con diferentes tipos de datos

Como podemos ver en los ejemplos anteriores, podemos definir listas con varios tipos. Aquí tenemos que prestar especial atencion a la forma de crear una lista como lo hemos hecho con la variable numeros_indices. Esta variable no es un array, es un objeto que podemos tratar como un array, si te das cuenta, lo hemos declarado con llaves y no con corchetes. Esto quiere decir que este objeto hereda de Object.prototype y no de Array.prototype. Entre otras cosas, esto significa que no tendremos algunas propiedades útiles de los arrays como la propiedad lenght que nos devuelve la longitud de una lista. Así que debemos tener cuidado y conciencia de cómo estamos creando nuestros arrays.

Operaciones con arrays

Ya hemos visto qué son los arrays, vamos a ver ahora qué operaciones podemos realizar con ellos. Para los ejemplos usaremos las variables declaradas en el punto anterior.

La propiedad lenght

Una de las porpiedades que tenemos disponibles en los arrays es lenght que devuelve la longitud de la lista.

array_vacio.lenght; //=> 0
numeros.lenght; //=> 5
numeros_indices.lenght; //=> undefined (Recuerda que ha sido declarado como objeto y no como array
array_mixto.lenght; //=> 4

Con esta propiedad debemos tener cuidado en la forma con que trabajamos el array. Y es que lenght no devuelve la longitud de un array, sino que devuelve el mayor índice almacenado más 1. Veamoslo con un ejemplo:

var misNumeros = [1,2,3]; // declaramos un array de 3 elementos
misNumeros[1000] = 5; // en el índice 1000 guardamos el valor 5
misNumeros.lenght; //=> 1001 (mayor índice más 1)

La longitud del array es de 4 así que ten cuidado si haces este tipo de modificaciones a los arrays porque la propiedad lenght dejará de tener sentido.

Borrar elementos de un array. Delete y splice

JavaScript nos permite elminar elementos de un array. Lo podemos hacer con la propiedad delete.

delete numeros[2]; //=> ['cero', 'uno', undefined, 'tres', 'cuatro']

Como puedes ver, se ha eliminado valor del índice 2, pero, sigue están ahí ese índice con valor undefined. Lo «lógico», o lo que la mayoría hubieramos esperado como resultado es:

['cero', 'uno', 'tres', 'cuatro']

Si queremos obtener el resultado anterior, tenemos que «sacar» ese elemento del array, y lo podemos hacer con splice de la siguietne forma:

numeros.splice(2,1) //=> ['cero', 'uno', 'tres', 'cuatro']

Con splice le decimos que a partir del índice 2, quite 1 elementos. De esta forma, todos los elementos que hay detrás de éste índice se desplazan hacía la izquierda y obtenemos el resultado deseado.

La enumeración

Dado que los arrays son objetos en Javascript, podemos iterarlos con el bucle for in. La enumeración es la propiedad de poder recorrer una estructura de datos.

Aquí, y como no podía ser de otra forma en JavaScript, no podemos asegurar que vayamos a iterarlo en un orden establecido. Pero este problema, se soluciona con el bucle for tradicional.

Funciones que podemos aplicar a los arrays

JavaScript proporciona varias funciones para trabajar con arrays. Aquí te muestro algunas de las más comunes:

• push(): agrega uno o más elementos al final del array.
• pop(): elimina el último elemento del array y lo devuelve.
• shift(): elimina el primer elemento del array y lo devuelve.
• unshift(): agrega uno o más elementos al inicio del array.
• concat(): combina dos o más arrays en uno solo.
• slice(): devuelve una parte del array seleccionada por índices.
• splice(): cambia el contenido de un array eliminando elementos existentes y/o agregando nuevos elementos.
• join(): une los elementos de un array en un solo elemento y lo devuelve
• reverse(): invierte el orden de los elementos del array y lo devuelve
• sort(): función para ordenar los elementos del array

Arrays de varias dimensiones

JavaScript no da soporte como tal para matrices o arrays de varias dimensiones. Pero, como vimos al inicio, un array puede contener cualquier tipo de dato, entre ellos un array, entonces podríamos definir una matriz de la siguiente forma:

var matriz = [
     [1,1],
     [1,1]
];

El ejemplo anterior, no es más que la matriz identidad de tamaño 2:

| 1, 1 |
| 1, 1 |

Y la podemos iterar con un doble bucle for:

for(i=0; i < matriz.lenght; i++) {
     for(j=0; matriz[i].lenght; j++) {
          console.log(matriz[i][j];
     }
}

¿Cúando debemos usar un array?

Parece una pregunta fácil de responder, pero como vimos al inicio, podemos definir un array como un objeto. Entonces cuando necesitemos usar las propiedades y operaciones que hemos visto previamente, necesitamos un array, debemos declararlo con [], en caso contrario podemos, y te diría que, deberíamos, usar un objeto.

¿Cómo saber si una variable es de tipo Array?

Como hemos comentado varias veces, un Array es un objeto, por lo que si hace un typeof de un array obtendremos ‘object’ como resultado. Entonces debemos hacer un par de comprobaciones más. Veamos una posible función para ver si una variable es de tipo array:

function esArray(miObjeto) {
     return Object.prototype.toString.apply(miObjeto) === '[object Array]';
}

Es un poco rudimentatio, pero así trata JavaScript a los arrays.

Conclusión

Los arrays son una estructura de datos fundamental en la programación que utilizamos para almacenar y manipular una lista de elementos. Concretamente, los arrays en JavaScript son dinámicos y como has podido ver, tienen algunas particularidades que debes conocer para poder trabajar de forma correcta y con la menor cantidad de errores posible.

Puedes aprender más en nuestra sección de Desarrollo Web o en la sección específica de JavaScript.

¡Espero que te haya sido de utilidad!