Arrays en Javascript

Los arrays o en español "arreglos", es una estructura de datos fundamental no solo en Javascript, sino que también en la mayoría de lenguajes de programación.

En este post se explicará y se realizarán ejemplos que faciliten de forma práctica el entendimiento de los conceptos fundamentales y de su implementación en Javascript. Si eres principiante o simplemente quieres reforzar tus conocimientos, te invito a que continúes leyendo este post, seguro te será de mucha utilidad.

¿Qué es un array?

Antes de revisar como se implementan los arrays en Javascript, debemos respondernos la pregunta ¿Qué es un array? Un array es un conjunto o colección de elementos, agrupados en una sola variable y que es accesible en cualquier momento que se necesite. Este concepto es el mismo para todos los lenguajes de programación y no está ligado exclusivamente a Javascript.

Para entender mejor el concepto podemos encontrar similitudes con una estantería de libros, en donde se van agregando libros a medida que se van adquiriendo y que se ponen uno al lado de otro. Así mismo pasa con los arrays, tienes una estantería que es la variable que guarda el array y tienes libros que son el conjunto de elementos que contiene el array.

La idea principal de los arrays es agrupar elementos homogéneos, que tengan características similares para facilitar el orden y la limpieza del código. En una estantería puedes guardar solo libros, aunque también puedes poner otros objetos, pero esto se evita en lo posible porque dificultaría el orden y el acceso a los libros, así mismo pasa con los arrays, puedes agrupar números o texto u objetos, pero no sería recomendable agruparlos todos en un mismo array porque rompería con el orden y dificultaría el entendimiento del código.

Los arrays cuentan con algunos conceptos claves que se deben entender antes de utilizarlos.

Elemento

Un elemento es el espacio ocupado dentro del array, con un valor preferiblemente homogéneo al resto de elementos. Este elemento posee una posición que lo identifica y que permite acceder a su valor fácilmente a este e inclusive modificarlo o eliminarlo. Un elemento puede ser un número, un texto, un boolean o un objeto. Volviendo al ejemplo de la estantería, cada libro es un elemento que ocupa un espacio dentro de la estantería.

Índice

Los elementos ocupan un espacio y tienen una posición que los identifica, a esta posición se le llama índice. El índice es un valor numérico entero que identifica a los elementos de un array. Este índice en Javascript siempre comienza desde 0, es decir, el primer elemento que se agrega al array siempre tiene índice 0. El índice va incrementando su valor secuencialmente por cada elemento que se agregue, por ejemplo, si se tiene un array de 5 elementos, el índice del último elemento es 4, teniendo en cuenta de que se comienza desde 0. Este índice facilita el acceso a un dato específico del array, así como también modificarlo o inclusive eliminarlo.

Tamaño

Un array puede tener tantos elementos como recursos que se tenga para almacenarlos. Esta característica hace que un array pueda tener 10, 20, 30 o 5000 elementos y que contarlos manualmente pueda ser una tarea caótica. La mayoría de lenguajes facilitan este proceso, disponiendo de una propiedad llamada length que contiene el valor numérico entero del tamaño total del array, es decir, cuantos elementos tiene el array al momento de consultar la propiedad.

Como crear un array en Javascript

Ahora que ya se tienen los conceptos básicos de lo que es un array, podemos comenzar con crear un array en Javascript. Esta forma de crear un array es la más utilizada en general, posteriormente habrá ejemplos de alternativas para crear un array.

const estanteria = ['📗', '📘', '📙', '📓', '📔', '📕'];

Esta forma es la más sencilla de crear un array, simplemente se agregan los elementos dentro de un par de corchetes ([]), se separa cada elemento con una coma (,) y se asignan a una variable. En este ejemplo guardamos 6 objetos que representan libros, en una variable llamada estanteria.

Aunque la anterior forma sea la más sencilla y más utilizada, no quiere decir que sea la única forma. En Javascript se puede crear un array a partir del constructor Array().

const estanteria = new Array('📗', '📘', '📙', '📓', '📔', '📕');

El resultado es el mismo: Se crea un array de 6 elementos, que se guardan en una variable llamada estanteria. Aunque el resultado es el mismo, la sintaxis y el proceso cambia un poco.

El constructor Array() posee otra característica que se debe tener en cuenta para evitar efectos no deseados en el programa.

const estanteria = new Array(2);

Esta forma de crear arrays, pasando un número al constructor, lo que hace es crear un array con una cantidad de espacios vacíos de acuerdo al número suministrado, en el caso del ejemplo se suministró el número 2, por lo que se creó un array con 2 posiciones vacías y se guardó en la variable estanteria.

Otra alternativa para crear un array es el método Array.of(), que a diferencia del constructor Array() si se pasa solo un elemento de tipo número como parámetro, se crea un array solo con ese elemento.

const espaciosVacios = new Array(2); // Array con dos posiciones vacías
const elementoNumerico = Array.of(2); // Array solo con el elemento 2: [2]

Con el ejemplo anterior se identifica claramente la diferencia entre ambas formas de crear arrays. En la variable espaciosVacios con el constructor Array() se creó un array con 2 espacios vacíos, mientras que en elementoNumerico se creó un array con un solo elemento de valor 2. Estas opciones son alternativas, pero en general es más simple utilizar los corchetes ([]).

Como obtener un elemento del array

Un array es una estructura que guarda muchos elementos, pero ¿Cómo se obtiene un elemento? Un elemento se obtiene con la sintaxis nombreVariable[índice], aquí es donde el índice juega un papel importante como identificador del elemento dentro del array, esto facilita el acceso y la manipulación de los elementos del array. Siguiendo con el mismo ejemplo de la estantería de libros.

const estanteria = ['📗', '📘', '📙', '📓', '📔', '📕'];
const libroVerde = estanteria[0];
const libroAzul = estanteria[1];
console.log(libroVerde); // '📗'
console.log(libroAzul); // '📘'

Como acceder al último elemento del array sin conocer su posición

Para finalizar, cuando se usan arrays muchas veces es necesario acceder al último elemento, pero al ser un tamaño dinámico, no se puede saber con certeza cuál es su índice. El array comienza su índice en 0 y el tamaño es el conteo de elementos, por lo tanto, el elemento final siempre será el tamaño del array menos 1. La sintaxis es igual que para obtener un elemento nombreVariable[nombreVariable.length - 1], pero el índice se obtiene restando 1 al tamaño del array.

const estanteria = ['📗', '📘', '📙', '📓', '📔', '📕'];
const ultimoLibro = estanteria[estanteria.length - 1];
console.log(ultimoLibro); // '📕'

En conclusión

Los arrays son una estructura muy usada en los lenguajes de programación, es normal encontrarse con uno cada día y es fundamental para entender la mayoría del código de una aplicación. Los siguientes posts estarán enfocados en los arrays, con conceptos básicos e intermedios como el ordenamiento, métodos para manipularlos, inmutabilidad, entre otros.

Espero que este post haya sido de gran ayuda, escríbeme en los comentarios si tienes alguna duda. ¡Hasta la próxima!