Arrays en JavaScript

Introducción a los Arrays de JavaScript

Un array de JavaScript es una colección ordenada de valores indexada por enteros. A diferencia de los objetos, que almacenan propiedades con clave sin un orden garantizado, un array mantiene sus elementos en una secuencia específica y te permite acceder a cualquier elemento por su posición (su índice). Los índices comienzan en 0, por lo que el primer elemento está en el índice 0, el segundo en el índice 1, y así sucesivamente.

Los arrays son una de las estructuras de datos más utilizadas en el lenguaje porque pueden contener una mezcla de cualquier tipo de valor — números, strings, booleans, objects, incluso otros arrays — y crecen o se reducen automáticamente a medida que agregas y eliminas elementos. Esta página explica cómo crear arrays, modificar su contenido, recorrerlos, transformarlos y buscar en ellos, así como las prácticas que mantienen el código con muchos arrays legible.

Crear e Inicializar Arrays

La forma más común de crear un array es la sintaxis de array literal — una lista separada por comas dentro de corchetes:

let fruits = ["Apple", "Banana", "Cherry"];

También puedes usar el constructor new Array(), aunque rara vez se utiliza y tiene un caso especial confuso: cuando pasas un solo número, establece la longitud del array en lugar de agregar ese número como elemento.

Por ese problema, prefiere la sintaxis literal para todo excepto para crear arrays con un tamaño predefinido de forma deliberada.

Acceder a Elementos y a la Longitud

Lee o reemplaza un elemento por su índice, y lee el recuento total con la propiedad length. Asignar a un índice más allá del extremo actual extiende el array.

Agregar y Eliminar Elementos

Cuatro métodos cubren los dos extremos de un array. Ten en cuenta qué valor devuelve cada uno — esta es una fuente común de errores.

• push() — agrega uno o más elementos al final y devuelve la nueva longitud.

• pop() — elimina el último elemento y devuelve ese elemento.

• unshift() — agrega uno o más elementos al principio y devuelve la nueva longitud.

• shift() — elimina el primer elemento y devuelve ese elemento.

Insertar y Eliminar en el Medio con splice()

push/pop/shift/unshift solo actúan en los extremos. Para agregar, eliminar o reemplazar elementos en cualquier posición, usa splice(start, deleteCount, ...itemsToInsert). Modifica el array en su lugar y devuelve un array con los elementos eliminados.

Copiar una Sección con slice()

slice(start, end) devuelve una copia superficial de una parte del array sin modificar el original. El índice end no está incluido.

Iterar Sobre los Elementos

Hay varias formas de recorrer un array. Usa un bucle for...of o forEach() cuando solo quieras cada valor; recurre a los bucles basados en índice solo cuando realmente necesites el índice. (Consulta el capítulo sobre bucles para ver el conjunto completo de formas de bucle.)

• for...of — la forma más limpia de leer cada valor en orden.

• forEach() — ejecuta un callback una vez por elemento, recibiendo el valor, el índice y el propio array.

Transformar Arrays

Estos métodos devuelven un nuevo array (o valor) en lugar de mutar el original, lo que los hace ideales para el procesamiento de datos predecible y encadenable.

• map() — construye un nuevo array transformando cada elemento.

• filter() — construye un nuevo array con solo los elementos que superan una prueba.

• reduce() — reduce todo el array a un único valor acumulando un resultado. Recibe un callback (accumulator, current) y un valor inicial.

Dado que map y filter devuelven cada uno un array, puedes encadenarlos:

Buscar en Arrays

• includes() — devuelve true/false según si un valor existe. indexOf() devuelve el índice del valor, o -1 si no se encuentra.

• find() y findIndex() — devuelven el primer elemento (o su índice) que satisface un callback de prueba.

Ordenar Arrays

sort() ordena los elementos en su lugar y devuelve el mismo array.

Convertir Arrays en Strings

El método join() combina todos los elementos en un único string, utilizando el separador que le pases (una coma por defecto).

Operaciones Avanzadas con Arrays

Arrays Multidimensionales

Dado que un array puede contener otros arrays, puedes modelar cuadrículas y matrices. Usa dos índices — matrix[row][column] — para acceder a un valor interno.

El Operador Spread

El operador spread (...) expande un iterable — un array o un string — en elementos individuales donde se esperan múltiples valores. Es la forma moderna de combinar y copiar arrays. (Para la forma de recolección relacionada, consulta parámetros rest y sintaxis spread.)

• Combinar arrays:

• Copiar un array (una copia superficial, por lo que el original no se modifica):

• Pasar elementos del array como argumentos de función:

Desestructuración de Arrays

La desestructuración desempaqueta los valores del array en variables separadas en una sola instrucción. (La misma idea se aplica a los objects — consulta asignación por desestructuración.)

• Intercambiar variables sin una variable temporal:

• Valores por defecto que se aplican cuando falta una posición:

Buenas Prácticas para Usar Arrays

• Declara con const cuando la referencia del array no vaya a cambiar. const solo impide reasignar la variable — aún puedes usar push, pop y editar elementos, porque el contenido del array no está congelado.

• Prefiere map, filter y reduce sobre los bucles manuales para transformar datos — describen la intención y devuelven nuevos arrays en lugar de mutar el estado compartido.
• Usa el operador spread para copiar antes de mutar cuando quieras evitar cambiar el array original.
• Pasa siempre una función de comparación a sort() para los números.

Conclusión

Los arrays son la columna vertebral del manejo de datos en JavaScript: ordenados, basados en índices y de tamaño dinámico. Una vez que sabes qué métodos mutan el array (push, pop, splice, sort) frente a los que devuelven nuevos valores (map, filter, slice, reduce), puedes manipular colecciones con confianza. Combina eso con el operador spread y la desestructuración para obtener código conciso y legible. A continuación, explora la referencia completa de métodos de array y cómo los arrays se comparan con los objetos de JavaScript.

Práctica