Este artículo forma parte de una serie en la que quiero tratar en cierta profundidad este objeto global de JavaScript.

Preámbulo

O de por qué he decidido escribir esta serie de artículos:

Algunos de vosotros sabéis, y los que no, ya os lo cuento, que mi trabajo actual consiste en revisar y validar que el código que los developers solicitan integrar en una aplicación global de banca. Veo mucho código a lo largo del día, de personas de distintos squads, equipos, culturas y países y de todos ellos aprendo algo. Y también veo fallos comunes. Y muchos de ellos vienen de un mal entendimiento de las Matrices o Arrays.

No sé cuántos artículos compondrán esta serie, pero el objetivo es que se entienda de una forma relativamente sencilla qué son las Matrices, qué propiedades tienen las Matrices y cómo usar las Matrices.

Matrices, o la estructura de datos Array

Podríamos definir la Matriz o Array como un conjunto de datos, ordenados, identificados por un índice. El índice de una Matriz comienza en la posición cero.

Por ejemplo:

Sea una matriz frutas se puede componer de banana, melocotón, naranja, mandarina y manzana, en ese orden.

En este caso banana ocuparía el índice 0 de la Matriz, melocotón ocuparía el índice 1, naranja ocuparía el índice 2, y así sucesivamente.

Esto automáticamente introduce una propiedad en nuestra Matriz, su tamaño, que se representa a través de la propiedad length. En nuestro caso, el tamaño de nuestra Matriz es de 5, que se corresponde con el número de índices ocupables que esta Matriz tiene.

Sabiendo esto, podemos poner varios ejemplos:

Un poco de práctica

En primer lugar, veamos las distintas formas que tenemos para poder declarar una Matriz Nula en JavaScript:

const myArr = new Array();
const myArr = Array();
const myArr = [];

Estas tres formas de declarar Matrices tienen exactamente el mismo resultado, una Matriz con tamaño 0 y sin índices rellenables. Por tanto, si llamamos a su propiedad myArr.length su valor de retorno es 0.

Si en lugar de declarar una Matriz Vacía quisieramos crear una Matriz Vacía con 5 índices, podríamos hacerlo de las siguiente forma:

const myArr = new Array(5);
const myArr = Array(5);
const myArr = []; 
myArr.length = 5;

Las tres opciones generarán una Matriz de cinco índices vacíos, es decir, sin un valor definido, de forma que si llamamos a su propiedad myArr.length su valor de retorno es 0, y si queremos obtener cualquiera de los valores de sus índices nos dará un valor de retorno undefined.

Ahora, si quisiéramos generar nuestra Matriz frutas con los valores que hemos definido anteriormente, tenemos las siguientes tres opciones:

const frutas = new Array('banana', 'melocotón', 'naranja, 'mandarina', 'manzana');
const frutas = Array('banana', 'melocotón', 'naranja, 'mandarina', 'manzana');
const frutas = ['banana', 'melocotón', 'naranja, 'mandarina', 'manzana'];

Las tres opciones tendrán como resultado una Matriz Poblada de tamaño 5. A diferencia del caso anterior, cada vez que queramos consultar uno de los índices de esta Matriz, nos devolverá el valor asignado, para el 0 retornará banana, para el 1 será melocotón y así sucesivamente.

¿Cómo accedo al valor de un índice en una Matriz?

Como se ha dicho anteriormente, el índice de una Matriz comienza por el valor 0, y se incrementa de uno en uno cada vez que se añade un valor nuevo a esa Matriz, así que para una Matriz de tamaño 5, el mayor índice será 4. El acceso a un índice de una Matriz se corresponde con el siguiente patrón: myArr[índice]; De esta forma, siguiendo con el ejemplo de la Matriz que hemos estado utilizando anteriormente:

const frutas = ['banana', 'melocotón', 'naranja, 'mandarina', 'manzana'];
const primero = frutas[0]; // banana
const segundo = frutas[1]; // melocotón
const tercero = frutas[2]; // naranja
const cuarto = frutas[3]; // mandarina
const quinto = frutas[4]; // manzana

¿Cómo cambio el valor de un índice de mi Matriz?

Pongamos el caso de que ya no queremos que el índice 2 de nuestra Matriz sea naranja y queremos que sea albaricoque, por la razón que sea. ¿Cómo podemos hacer esto?

Si bien hemos visto antes que para obtener el valor de un índice de una Matriz el patron es myArr[índice]; y sabiendo que para asignar un valor, el que sea, a una variable en JavaScript el patrón a seguir es miVariable = miValor; podemos deducir que la forma más simple de añadir un valor nuevo a un índice de una Matriz debe seguir el patrón myArr[índice] = miValor; así que en respuesta a la pregunta sería de la siguiente forma:

const frutas = ['banana', 'melocotón', 'naranja, 'mandarina', 'manzana'];
frutas[2] = 'albaricoque';

Nuestra nueva Matriz frutas quedaría así: ['banana', 'melocotón', 'albaricoque', 'mandarina', 'manzana']. El valor naranja ha sido sustituido por albaricoque.

¿Como añado nuevos elementos al final de una Matriz?

Ahora que ya sabemos asignar un nuevo valor a cualquier índice de una Matriz, podemos plantearnos si queremos añadir nuevos índices a esta matriz.

Algo que debemos considerar primero es que cuando añadimos nuevos elementos al final de la Matriz estamos modificando su tamaño. Si tenemos una Matriz de tamaño 5 y añadimos un elemento a la cola, la Matriz tendrá un tamaño 6. Sé que puede sonar muy obvio, pero creedme. Muy a menudo se nos olvida.

Bien, viendo lo anterior, podemos asignar un índice nuevo a la matriz utilizando lo que hemos aprendido hasta ahora. Si para asignar un valor a un índice de una Matriz podemos valernos de la expresión myArr[índice] = miValor; y que el tamaño de una Matriz es igual al número de índices + 1 de ésta para poder sacar la conclusión de que una forma de añadir un valor al final de una Matriz puede corresponderse con el siguiente patrón: myArr[myArr.length] = miValor; y no nos estaríamos equivocando, hemos añadido en una nueva posición de la Matriz que se corresponde con su último índice + 1 un nuevo valor. Utilizando nuestra Matriz de frutas:

const frutas = ['banana', 'melocotón', 'albaricoque', 'mandarina', 'manzana'];
frutas[frutas.length] = 'naranja';

La nueva Matriz tendrá un tamaño de 6 y quedaría así: frutas = ['banana', 'melocotón', 'albaricoque', 'mandarina', 'manzana', 'naranja'];

Vale, pero… ¿Es la única forma?¿Qué pasa si quiero añadir más de un elemento?

NO. No es la única forma. Os presento el método push() del objeto Matriz. Este método permite añadir a la cola de una Matriz uno o varios nuevos elemento, en uno o varios nuevos índices. Se corresponde con el patrón myArr.push(elemento1, elemento2, elemento3, ...);

Si quisiera añadir más de un elemento en el caso anterior, básicamente tendría que hacer tantas asignaciones como elementos quisiera añadir, de forma que si quisiera añadir a mi Matriz de frutas la uva, el melón y la sandía. Quedaría así:

const frutas = ['banana', 'melocotón', 'albaricoque', 'mandarina', 'manzana', 'naranja'];
frutas[frutas.length] = 'uva';
frutas[frutas.length] = 'melón';
frutas[frutas.length] = 'sandía';

No es muy cómodo de ver, ¿verdad? Pues con el método push() de Matriz, podemos hacerlo de la siguiente forma:

const frutas = ['banana', 'melocotón', 'albaricoque', 'mandarina', 'manzana', 'naranja'];
frutas.push('uva', 'melón', 'sandía');

En ambos casos nuestra Matriz de frutas acabaría siendo así: ['banana', 'melocotón', 'albaricoque', 'mandarina', 'manzana', 'naranja', 'uva', 'melón', 'sandía'];

¿No os parece mucho más elegante y menos confuso usar el método push()?

Resumiendo

Me ha quedado un artículo bastante largo, así que vamos a hacer un pequeño resumen de por dónde hemos pasado.

  • Hemos aprendido qué es una Matriz y cómo se generan en JavaScript.
  • Hemos aprendido cómo alterar el tamaño de una Matriz y sus valores.
  • Hemos aprendido cómo añadir elementos al final de una Matriz.

¿Y para la próxima?

Para la próxima entrada de esta serie sobre Matrices en JavaScript, aprenderemos las siguientes cosas:

  • Cómo añadir elementos al principio de una Matriz.
  • Cómo eliminar el último valor de una Matriz.
  • Cómo iterar sobre una Matriz.
  • Cómo ordenar una Matriz.
  • Qué son los métodos transformadores de una Matriz y cómo usarlos.

Espero que os haya gustado y servido para aprender algo nuevo. Si tenéis alguna duda, no dudéis en poner un comentario y la intentaré resolver de la mejor forma que pueda.