A medida que trabajamos en nuestro código, se hace necesario agrupar valores en una misma variable, para representar conjuntos de datos con cierta relación entre sí. Para ello, tenemos la opción de crear objetos, o unas variables más sencillas llamadas arrays.
Imagina entrar en una habitación bien organizada donde una estantería se erige en la pared. Esta estantería, con sus compartimentos numerados, contiene una variedad de objetos: libros, revistas, juguetes y cuadernos. Cada objeto tiene su lugar específico, accesible con solo señalar el número del compartimento correspondiente. En el mundo de la programación, los arrays actúan como estanterías, permitiendo almacenar y acceder a múltiples elementos de manera ordenada. Cada elemento en un array está asociado con un índice, similar a cómo cada objeto en nuestra estantería tiene su propio compartimento numerado. Puedes guardar tus libros en el estante 1, tus revistas en el estante 2, los juguetes en el estante 3 y los cuadernos en el estante 4.
A lo largo de este artículo, exploraremos en profundidad cómo funcionan los arrays en JavaScript. Veremos cómo crear arrays, acceder a sus elementos, y cómo utilizarlos para resolver problemas comunes en la programación.
¿Qué es un Array?
Un array, o arreglo en español, es una estructura de datos que se utiliza para almacenar una colección de elementos del mismo tipo. En algunas ocasiones también se les suelen llamar arreglos o vectores. Sin embargo, en JavaScript, esta regla tiene una excepción. En JavaScript, los arrays pueden almacenar elementos de diferentes tipos, como números, cadenas y objetos, en la misma colección. De manera más robusta, un array es una estructura de datos que sirve principalmente para organizar y almacenar datos de manera estructurada y eficiente en memoria dentro de un programa de computadora. Ya sabemos que un array es una estructura de datos que permite almacenar múltiples elementos de manera secuencial en memoria.
Características Clave de los Arrays
- Índices: Los elementos de un array están ordenados y se accede a ellos usando números llamados índices, en la mayoría de los lenguajes de programación, los índices comienzan en 0.
- Tipo de datos: En JavaScript, un array puede contener elementos de diferentes tipos de datos. Sin embargo, aunque es posible tener un array heterogéneo, no es una buena práctica, ya que puede complicar el manejo y procesamiento del array.
- Longitud dinámica: Una vez que se crea un array, su tamaño es fijo y no puede cambiar. Algunos lenguajes de programación permiten redimensionar arrays, pero generalmente, esto implica crear un nuevo array con el tamaño deseado y copiar los elementos del array antiguo al nuevo. En JavaScript, todos los arrays son dinámicos, lo que significa que su tamaño puede cambiar en tiempo de ejecución.
Declaración y Creación de Arrays
Para usar un array, primero se debe declarar. En Javascript, se pueden definir de varias formas:
Lea también: IVA 21% Excel
Por ejemplo, podríamos tener un array que en su primera posición tenemos el 'a', en la segunda el 'b' y en la tercera el 'c'.
Métodos para Crear Arrays
| Constructor | Descripción |
|---|---|
| new Array(size) | Crea un array vacío de tamaño size. Sus valores no están definidos, pero son . |
| new Array(e1, e2...) | Crea un array con los elementos indicados. |
| [e1, e2...] | Simplemente, los elementos dentro de corchetes: []. Notación preferida. |
let miArray declara una variable llamada miArray que contendrá un array. new Array(5) crea un nuevo array con 5 elementos. Este es un método más común y directo para crear y llenar un array en JavaScript.
OJO: Al crear un array con new Array(size) hay varios matices que merece la pena mencionar. Lo primero, si sólo se indica un parámetro numérico size, Javascript creará un array vacío de size elementos. Es decir, no es lo mismo que const a = [3], donde creamos un array con un elemento 3. Por otro lado, new Array(size) realmente crea un array vacío que aún no ha sido rellenado con nada (esto hace que sea más óptimo para arrays grandes) y aunque es equivalente, no es exactamente igual new Array(3) que [undefined, undefined, undefined].
Acceso a Elementos y Tamaño del Array
Saber el número de elementos que tiene un array es muy sencillo. Sólo hay que acceder a la propiedad .length, que nos devolverá el número de elementos existentes en un array. Los elementos de un array se acceden mediante su índice, comenzando desde 0.
Propiedades y Métodos de Acceso
| Forma | Descripción |
|---|---|
| .length | Propiedad que devuelve el número de elementos del array. |
| [pos] | Operador que devuelve (o modifica) el elemento número pos del array. |
| .at(pos) | Método que devuelve el elemento en la posición pos. Números negativos en orden inverso. |
| .with(pos, el) | Método que crea una copia y modifica el elemento de la posición pos con el. |
Veamos como funcionan.
Lea también: Guía IVA reducido
Por otro lado, si lo que queremos es acceder a un elemento específico del array, no hay más que utilizar el operador [], al igual que lo podríamos hacer con los para acceder a un carácter concreto. Además del clásico operador [], también podemos utilizar el método .at(), añadido en Javascript. Ten en cuenta que con el nuevo método .with(), se puede hacer esto de una forma más cómoda y sin modificar el array original.
Añadir o Eliminar Elementos
Existen varias formas de añadir elementos a un array ya existente. Ten en cuenta que en todos estos casos estamos mutando (variando los elementos del array ya existente). Veamos los métodos que podemos usar para ello:
Métodos de Modificación de Arrays
| Método | Descripción |
|---|---|
| .push(e1, e2, e3...) | Añade uno o varios elementos al final del array. Devuelve el tamaño del array. |
| .pop() | Elimina el último elemento del array. Devuelve dicho elemento. |
| .unshift(e1, e2, e3...) | Añade uno o varios elementos al inicio del array. Devuelve el tamaño del array. |
| .shift() | Elimina el primer elemento del array. |
elements.push("d"); // Devuelve 4. elements.pop(); // Devuelve 'd'. elements.unshift("Z"); // Devuelve 4. elements.shift(); // Devuelve 'Z'. Salvo por esto, funcionan exactamente igual.
Los métodos de inserción .push() o .unshift() insertan los elementos pasados por parámetro en el array y devuelve el tamaño actual que tiene el array después de la inserción. Por otro lado, los métodos de extracción, .pop() o .shift(), extraen y devuelven el elemento extraído.
Alternativas para Crear y Manipular Arrays
Aunque hemos visto las formas principales de crear un en Javascript, existen otras que permiten generar un partiendo de otras (y muy variadas) estructuras de datos.
Lea también: ¿Cómo localizar tus XML del SAT?
Métodos Alternativos
| Método | Descripción |
|---|---|
| Array.from(obj) | Intenta convertir el obj en un array. |
| Array.from(obj, fmap) | Ídem, pero ejecuta la función fmap por cada elemento. Equivalente a .map(). |
| Array.from({ length: size }) | Crea un array a partir de un de tamaño size, relleno de. |
| .concat(e1, e2, e3...) | Devuelve los elementos pasados por parámetro concatenados al final del array. |
| .join(sep) | Une los elementos del array mediante separadores sep en un. |
Convertir a Array con Array.from()
El método estático Array.from(), aunque ahora quizás no le encontremos mucha utilidad, nos resultará muy interesante más adelante. Este método se suele utilizar para convertir variables «parecidas» a los arrays (pero que no son arrays) en un. Como se puede ver, es algo muy similar a lo que hacemos con la desestructuración de arrays. Pero no todos los elementos se pueden convertir a arrays. Por ejemplo, si intentamos convertir un undefined o un null, nos dará un error similar a Uncaught TypeError: null is not iterable.
De forma opcional, Array.from(obj) puede recibir un parámetro adicional: una función que actuará de forma idéntica a una función map(). Observa que en este caso, la función pasada por segundo parámetro del Array.from() se ejecutará por cada uno de los elementos de text, y en este caso concretamente, la función (number) => Number(number) fuerza a convertir cada elemento en un número. La diferencia respecto al ejemplo anterior, es que en este caso obtienes un array de números, mientras que el anterior obtenías un array de textos.
Si lo que buscas es convertir un objeto de Javascript en un, probablemente te interese el tema de Iteradores de objetos donde vemos métodos como Object.keys(), Object.values() u Object.entries().
Concatenar Arrays con .concat() y Operador Spread
En los tenemos el método concat(), que nos permite unir los elementos pasados por parámetro en un array a la estructura que estamos manejando. Se podría pensar que los métodos .push() y concat() funcionan de la misma forma, pero no es exactamente así.
elements.push(4, 5, 6); // Devuelve 6. elements.push([7, 8, 9]); // Devuelve 7.
Observa un detalle muy importante: El método concat(), a diferencia de push(), no modifica el array sobre el cuál trabajamos y al que le añadimos los elementos, sino que simplemente lo devuelve. Al margen de esto, observa que en el caso de pasar un array por parámetro, push() lo inserta como un array, mientras que concat() inserta cada uno de sus elementos.
También hay que tener cuidado al utilizar el operador + con los arrays. A diferencia de lo que quizás puede parecer intuitivo, utilizando este operador no se añaden los elementos al array, sino que se convierten los arrays en string y luego se concatenan. Veremos más sobre estas conversiones implícitas en temas posteriores.
El operador spread se utiliza principalmente para "expandir" elementos. En este ejemplo, ...numbers recoge todos los argumentos pasados a la función sum() en un array llamado numbers.
Separar y Unir Strings: .split() y .join()
Además, también tenemos otro método con el que es posible crear un a partir de un. Se trata del método .split() que vimos en el tema de los. En este caso, el método .join() es su contrapartida. En este caso, le hemos pedido dividir el sin indicar ningún separador, por lo que Javascript toma la unidad mínima como separador: nos devuelve un con cada carácter del original.
Tipos de Arrays en JavaScript
- Son el tipo más común de array. Almacenan una colección ordenada de elementos que pueden ser de cualquier tipo de datos (números, strings, objetos, etc.).
- Los arrays asociativos en JavaScript no son realmente arrays en el sentido tradicional, sino objetos. En los lenguajes de programación, los arrays asociativos se utilizan para almacenar pares clave-valor, donde cada clave es un identificador único que se asocia a un valor. Claves y Valores: En un objeto, las claves (también llamadas propiedades) son cadenas de texto o símbolos que se asocian con valores. Aunque los arrays asociativos en JavaScript no son verdaderos arrays, sino objetos, desempeñan un papel crucial en la manipulación de datos estructurados.
- Introducidos en ECMAScript 6, los typed arrays son un tipo especial de arrays que permiten manipular eficientemente matrices de datos binarios en bruto.
Iteración sobre Arrays
El método forEach es una forma moderna y más legible de iterar sobre los elementos de un array en JavaScript. A diferencia del bucle for tradicional, forEach ofrece una sintaxis más limpia y directa, lo que facilita la escritura y lectura del código. Una de las principales ventajas de forEach es que se enfoca en la función que se desea ejecutar para cada elemento del array, en lugar de en los detalles del bucle. Esto hace que el código sea más declarativo y menos propenso a errores.
Errores Comunes y Buenas Prácticas al Manipular Arrays
Errores Comunes
Manipular arrays en JavaScript puede llevar a cometer varios errores comunes, especialmente si no se manejan correctamente:
- Acceder a un índice fuera de rango: Intentar acceder a un índice que no existe en el array.
- Modificar arrays inmutables: Intentar modificar arrays que son inmutables (como los creados con const).
- No considerar el tipo de datos: JavaScript permite almacenar diferentes tipos de datos en un mismo array.
- Modificar el array durante un bucle: Modificar un array mientras se está iterando sobre él puede llevar a comportamientos inesperados o incluso a errores.
- No usar métodos de array adecuadamente: JavaScript proporciona métodos útiles para manipular arrays, como map, filter, reduce, etc.
- No considerar el rendimiento: Dependiendo de la operación que estés realizando, algunas formas de manipulación de arrays pueden ser menos eficientes en términos de rendimiento.
Buenas Prácticas
Seguir algunas buenas prácticas para escribir un código más limpio, eficiente y fácil de mantener:
- Usar métodos de array: JavaScript proporciona muchos métodos integrados en los arrays, como map, filter, reduce, etc.
- Evitar mutar arrays directamente: En lugar de modificar un array existente directamente (push, splice, etc.), considera métodos que devuelvan un nuevo array o una nueva referencia, como concat, slice, map, filter, etc.
- Usar spread/rest operators: Para copiar o concatenar arrays, utiliza el operador de propagación (...) o el operador rest (...) en lugar de concat o push.
- Evitar bucles for in: En lugar de for...in para iterar sobre arrays, usa for...of o métodos de iteración de arrays (forEach, map, filter, etc.).
- Usar funciones puras: Cuando sea posible, escribe funciones que no modifiquen los arrays de entrada y que devuelvan un nuevo resultado en su lugar.
- Optimización de rendimiento: En operaciones intensivas con arrays grandes, considera la eficiencia de los algoritmos utilizados.