Explicación sobre array en JavaScript

A medida que desarrollamos aplicaciones en JavaScript, es habitual que necesitemos agrupar múltiples valores en una misma variable para representar colecciones de datos relacionadas. Para este propósito existen los arrays, una estructura fundamental que facilita la organización de conjuntos de elementos.

¿Qué es un array?

Un array es una lista ordenada de elementos almacenados bajo una única variable. Cada valor se identifica por su posición (índice) dentro de la lista. También se conocen como “arreglos” o “vectores”, y JavaScript permite crearlos de distintas maneras:

Sintaxis	Descripción
new Array(size)	Crea un array con una longitud definida pero sin valores asignados.
new Array(e1, e2, ...)	Crea un array con los elementos proporcionados.
[e1, e2, ...]	Forma literal recomendada: define directamente los valores dentro de corchetes.

Ejemplos:

jsCopiarEditar// No recomendado en JavaScript moderno
const letras1 = new Array("a", "b", "c");
const vacio1 = new Array(3);  // Crea un array con tres espacios vacíos

// Notación literal (preferida)
const letras2 = ["a", "b", "c"];
const vacio2 = [];
const mixto = ["a", 5, true];  // Array con tipos variados

🔎 JavaScript permite que los arrays contengan elementos de distintos tipos, a diferencia de otros lenguajes que exigen uniformidad de tipos.

⚠️ Cuidado al usar new Array(size) — genera un array sin valores definidos, diferente de Array(size).fill(undefined).

---

Cómo acceder a los elementos

Para conocer cuántos elementos tiene un array, usamos .length, que devuelve la cantidad total de posiciones:

jsCopiarEditarconst letras = ["a", "b", "c"];
console.log(letras.length);  // 3

Para acceder a elementos individuales, usamos:

• array[pos] → Accede directamente por índice.
• array.at(pos) → Similar al anterior, pero acepta índices negativos (desde el final).
• array.with(pos, nuevoValor) → Crea una nueva copia del array con el valor reemplazado.

jsCopiarEditarletras[0];   // "a"
letras[2];   // "c"
letras[5];   // undefined (índice fuera de rango)

Además, podemos modificar valores mediante el mismo operador:

jsCopiarEditarletras[1] = "Z";   // ["a", "Z", "c"]
letras[3] = "D";   // ["a", "Z", "c", "D"]
letras[5] = "A";   // ["a", "Z", "c", "D", undefined, "A"]

---

Agregar o eliminar elementos

Existen métodos específicos para insertar o quitar elementos en arrays:

Método	Descripción
.push(e1, e2...)	Agrega al final. Devuelve el nuevo tamaño.
.pop()	Elimina y retorna el último elemento.
.unshift(e1, e2...)	Agrega al inicio. Devuelve la nueva longitud.
.shift()	Elimina y retorna el primer elemento.

Ejemplo práctico:

jsCopiarEditarconst items = ["a", "b", "c"];

items.push("d");     // ["a", "b", "c", "d"]
items.pop();         // ["a", "b", "c"]

items.unshift("Z");  // ["Z", "a", "b", "c"]
items.shift();       // ["a", "b", "c"]

💡 .push() y .pop() modifican el final; .unshift() y .shift() lo hacen al principio.

---

Crear arrays desde otras estructuras

Además de los métodos comunes, JavaScript ofrece formas de generar arrays a partir de otras fuentes de datos:

Método	Descripción
Array.from(obj)	Convierte objetos iterables o parecidos a arrays.
Array.from(obj, fn)	Aplica una función transformadora a cada elemento.
.concat(...items)	Devuelve un nuevo array con los elementos añadidos.
.join(sep)	Une los elementos en una cadena usando el separador indicado.

Ejemplo con texto:

jsCopiarEditarconst cadena = "12345";

Array.from(cadena);         // ["1", "2", "3", "4", "5"]
[...cadena];                // ["1", "2", "3", "4", "5"]

Desde el DOM:

jsCopiarEditarconst nodos = document.querySelectorAll("div");
Array.from(nodos);          // Convierte NodeList en Array
[...nodos];                 // Alternativa equivalente

Con transformación tipo map():

jsCopiarEditarconst numerosTexto = "12345";
const numeros = Array.from(numerosTexto, Number); // [1, 2, 3, 4, 5]

---

Si tu objetivo es transformar un objeto en array, explora también métodos como Object.keys(), Object.values() y Object.entries(), que permiten recorrer estructuras más complejas.

¿Deseas un ejemplo práctico con arrays mixtos o quieres ver cómo iterarlos con métodos modernos como .map() o .forEach()?