Creación y acceso a elementos de arrays
Introducción
Los arrays son una de las estructuras de datos más fundamentales y versátiles en JavaScript. Nos permiten almacenar colecciones ordenadas de valores bajo un solo nombre de variable, facilitando la organización y manipulación de datos relacionados. En lugar de crear múltiples variables individuales, un array nos permite agrupar estos valores y acceder a ellos de manera eficiente.
En este artículo exploraremos cómo crear arrays en JavaScript utilizando diferentes técnicas, cómo acceder a sus elementos, cómo modificarlos, y algunos conceptos importantes como los arrays multidimensionales. Dominar el trabajo con arrays es esencial para cualquier programador de JavaScript, ya que son la base para manipular colecciones de datos en todo tipo de aplicaciones.
Definición y propósito de los arrays
Un array en JavaScript es un objeto especial capaz de almacenar múltiples valores en una única variable. Estos valores pueden ser de cualquier tipo (números, cadenas de texto, booleanos, objetos, otros arrays, e incluso funciones) y se organizan en posiciones secuenciales numeradas, comenzando por cero.
// Un array heterogéneo (con diferentes tipos de datos)
const ejemploArray = [42, "Hola mundo", true, { color: "azul" }, [1, 2, 3]];
Los arrays son especialmente útiles cuando:
- Necesitamos almacenar múltiples elementos relacionados
- El orden de los elementos es importante
- Necesitamos recorrer o procesar conjuntos de datos
- Queremos aplicar operaciones a grupos de valores
Sintaxis de creación de arrays
Creación con notación literal
La forma más común y recomendada de crear arrays es utilizando la notación de corchetes [], también conocida como notación literal:
// Array vacío
const arrayVacio = [];
// Array con elementos iniciales
const colores = ["rojo", "verde", "azul"];
// Array con diferentes tipos de datos
const mixto = [1, "dos", true, null, undefined, { nombre: "objeto" }];
Esta sintaxis es concisa, fácil de leer y es la preferida en la mayoría de los casos.
Creación con el constructor Array()
También podemos crear arrays utilizando el constructor Array():
// Array vacío
const arrayVacio = new Array();
// Array con elementos específicos
const colores = new Array("rojo", "verde", "azul");
Sin embargo, esta forma tiene algunas peculiaridades a tener en cuenta:
// Cuidado: esto crea un array con un elemento (el número 3), no un array con 3 elementos vacíos
const arrayConUnNumero = new Array(3);
console.log(arrayConUnNumero); // [3]
// Pero si pasamos más de un argumento, crea un array con esos elementos
const arrayConElementos = new Array(1, 2, 3);
console.log(arrayConElementos); // [1, 2, 3]
Para crear un array con posiciones vacías de una longitud específica:
// Array con 3 posiciones vacías
const arrayVacio = new Array(3);
console.log(arrayVacio.length); // 3
console.log(arrayVacio); // [vacío × 3]
// Nota: estas posiciones están realmente vacías (undefined),
// no contienen el valor undefined
Métodos alternativos de creación
Existen otros métodos para crear arrays en situaciones específicas:
Array.of()
El método Array.of() crea un array a partir de los argumentos pasados, independientemente del número o tipo:
// Soluciona el problema del constructor con un solo número
const arrayDeTresVacios = Array(3); // [vacío × 3] - un array con 3 slots vacíos
const arrayConNumero3 = Array.of(3); // [3] - un array con el número 3
const numeros = Array.of(1, 2, 3, 4, 5); // [1, 2, 3, 4, 5]
Array.from()
El método Array.from() crea un array a partir de objetos iterables (como cadenas, maps, sets) o "array-like" (objetos con propiedad length):
// A partir de una cadena de texto
const arrayDesdeString = Array.from("Hola");
console.log(arrayDesdeString); // ["H", "o", "l", "a"]
// A partir de un objeto array-like
const arrayLike = { length: 3, 0: "a", 1: "b", 2: "c" };
const arrayDesdeObjeto = Array.from(arrayLike);
console.log(arrayDesdeObjeto); // ["a", "b", "c"]
// Array.from puede incluir una función de mapeo
const numeros = Array.from([1, 2, 3], x => x * 2);
console.log(numeros); // [2, 4, 6]
Creación de arrays con spread operator
El operador de propagación (spread operator) ... permite crear arrays de forma fácil, especialmente al combinar o copiar arrays existentes:
// Creación básica
const numeros = [...[1, 2, 3]]; // [1, 2, 3]
// Combinación de arrays
const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
const combinado = [...array1, ...array2]; // [1, 2, 3, 4, 5, 6]
// Inserción de elementos entre arrays
const conElementosExtra = [...array1, 10, 11, ...array2];
console.log(conElementosExtra); // [1, 2, 3, 10, 11, 4, 5, 6]
// Crear una copia de un array (copia superficial)
const original = [1, 2, 3];
const copia = [...original];
Acceso a elementos por índice
Los elementos de un array se almacenan en posiciones numeradas llamadas índices. El primer elemento está en el índice 0, el segundo en el índice 1, y así sucesivamente.
Sintaxis básica de acceso
Para acceder a un elemento específico, utilizamos el nombre del array seguido del índice entre corchetes:
const frutas = ["manzana", "plátano", "naranja", "fresa"];
const primeraFruta = frutas[0]; // "manzana"
const terceraFruta = frutas[2]; // "naranja"
console.log(primeraFruta); // "manzana"
console.log(terceraFruta); // "naranja"
Acceso con índices negativos (no soportado nativamente)
A diferencia de algunos lenguajes como Python, JavaScript no soporta nativamente índices negativos para acceder a elementos desde el final del array. Sin embargo, podemos calcular el índice desde el final usando la longitud del array:
const animales = ["perro", "gato", "conejo", "pájaro"];
// Para acceder al último elemento
const ultimoAnimal = animales[animales.length - 1]; // "pájaro"
// Para acceder al penúltimo elemento
const penultimoAnimal = animales[animales.length - 2]; // "conejo"
console.log(ultimoAnimal); // "pájaro"
console.log(penultimoAnimal); // "conejo"
Acceso a elementos con desestructuración
La desestructuración de arrays, introducida en ES6, permite extraer valores de arrays de manera concisa:
const coordenadas = [10, 20, 30];
// Desestructuración básica
const [x, y, z] = coordenadas;
console.log(x); // 10
console.log(y); // 20
console.log(z); // 30
// Omitir elementos
const [primero, , tercero] = coordenadas;
console.log(primero); // 10
console.log(tercero); // 30
// Con valores por defecto
const [a, b, c, d = 0] = coordenadas;
console.log(d); // 0 (valor por defecto ya que no existe en coordenadas)
// Recoger elementos restantes con rest operator
const [cabeza, ...resto] = coordenadas;
console.log(cabeza); // 10
console.log(resto); // [20, 30]
Modificación de elementos
Los arrays en JavaScript son mutables, lo que significa que podemos cambiar sus elementos después de crearlos.
Asignación directa
Para modificar un elemento, simplemente asignamos un nuevo valor a la posición deseada:
const notas = [7, 5, 9, 3];
// Modificar la tercera nota
notas[2] = 10;
console.log(notas); // [7, 5, 10, 3]
// Modificar la primera nota
notas[0] = 8;
console.log(notas); // [8, 5, 10, 3]
Añadir elementos a posiciones específicas
Podemos añadir elementos a cualquier posición, incluso más allá del final actual del array:
const letras = ["a", "b", "c"];
// Añadir un elemento al final
letras[3] = "d";
console.log(letras); // ["a", "b", "c", "d"]
// Añadir un elemento en una posición lejana
letras[7] = "h";
console.log(letras); // ["a", "b", "c", "d", vacío × 3, "h"]
console.log(letras.length); // 8
Cuando asignamos a una posición más allá del final actual, se crean posiciones vacías (sparse array o array disperso).
Añadir y eliminar elementos con métodos de array
Aunque lo veremos en detalle en el próximo artículo, es importante mencionar que existen métodos específicos para modificar arrays de manera más controlada:
const numeros = [1, 2, 3];
// Añadir al final
numeros.push(4); // [1, 2, 3, 4]
// Añadir al principio
numeros.unshift(0); // [0, 1, 2, 3, 4]
// Eliminar el último
const ultimo = numeros.pop(); // [0, 1, 2, 3], ultimo = 4
// Eliminar el primero
const primero = numeros.shift(); // [1, 2, 3], primero = 0
Arrays multidimensionales (introducción)
Los arrays multidimensionales son arrays que contienen otros arrays como elementos. Esto permite crear estructuras de datos más complejas como matrices o tablas.
Creación de arrays bidimensionales
// Array bidimensional (matriz 3x3)
const matriz = [
[1, 2, 3],
[4, 5, 6],
[7, 8, 9]
];
console.log(matriz); // Muestra la matriz completa
Acceso a elementos en arrays multidimensionales
Para acceder a elementos en arrays multidimensionales, utilizamos múltiples corchetes, uno para cada nivel de anidamiento:
const matriz = [
[1, 2, 3],
[4, 5, 6],
[7, 8, 9]
];
// Acceder al elemento en la fila 1, columna 2 (valor 6)
const elemento = matriz[1][2];
console.log(elemento); // 6
// Acceder a la segunda fila completa
const segundaFila = matriz[1];
console.log(segundaFila); // [4, 5, 6]
// Modificar un elemento
matriz[0][1] = 10;
console.log(matriz[0]); // [1, 10, 3]
Ejemplos prácticos de arrays multidimensionales
Los arrays multidimensionales son útiles para representar datos estructurados como tablas o matrices:
// Representación de un tablero de tres en raya (tic-tac-toe)
const tablero = [
["X", "O", "X"],
["O", "X", "O"],
["O", "X", "X"]
];
// Representación de datos tabulares
const alumnos = [
["Ana", 25, "Madrid"],
["Carlos", 22, "Barcelona"],
["Elena", 27, "Valencia"]
];
// Acceso a datos específicos
console.log(`${alumnos[1][0]} tiene ${alumnos[1][1]} años y vive en ${alumnos[1][2]}`);
// "Carlos tiene 22 años y vive en Barcelona"
Propiedades de array (length)
La propiedad más importante de un array es length, que indica el número de elementos que contiene:
const frutas = ["manzana", "plátano", "naranja"];
console.log(frutas.length); // 3
const arrayVacio = [];
console.log(arrayVacio.length); // 0
Modificando la longitud de un array
La propiedad length no es solo de lectura, también podemos modificarla para cambiar el tamaño del array:
const numeros = [1, 2, 3, 4, 5];
// Truncar el array
numeros.length = 3;
console.log(numeros); // [1, 2, 3]
// Expandir el array (creará espacios vacíos)
numeros.length = 6;
console.log(numeros); // [1, 2, 3, vacío × 3]
Utilizando length para operaciones comunes
La propiedad length es muy útil para acceder al último elemento o iterar sobre arrays:
const letras = ["a", "b", "c", "d"];
// Acceder al último elemento
const ultima = letras[letras.length - 1];
console.log(ultima); // "d"
// Añadir elemento al final (alternativa a push)
letras[letras.length] = "e";
console.log(letras); // ["a", "b", "c", "d", "e"]
// Iterar sobre todos los elementos
for (let i = 0; i < letras.length; i++) {
console.log(`Elemento ${i}: ${letras[i]}`);
}
Arrays dispersos (sparse arrays)
Los arrays dispersos son aquellos que tienen "huecos" o posiciones sin definir:
// Crear un array disperso
const disperso = [];
disperso[0] = "primero";
disperso[3] = "cuarto";
console.log(disperso); // ["primero", vacío × 2, "cuarto"]
console.log(disperso.length); // 4
// Verificar si una posición está definida
console.log(disperso[0]); // "primero"
console.log(disperso[1]); // undefined
console.log(1 in disperso); // false (el índice 1 no existe realmente)
console.log(0 in disperso); // true (el índice 0 sí existe)
Los arrays dispersos pueden causar comportamientos inesperados, por lo que generalmente es mejor evitarlos.
Buenas prácticas de manipulación
1. Preferir métodos de array en lugar de modificación directa
// Menos recomendado
const numeros = [1, 2, 3];
numeros[numeros.length] = 4;
// Más recomendado
numeros.push(4);
2. Cuidado con la modificación de length
Modificar directamente la propiedad length puede llevar a pérdida de datos:
const datos = ["importante", "crítico", "necesario"];
datos.length = 0; // ¡Ha borrado todos los elementos!
3. Usar funciones de utilidad para casos comunes
// Función para verificar si un elemento existe en un array
function contiene(array, elemento) {
return array.indexOf(elemento) !== -1;
}
// En JavaScript moderno, podemos usar directamente:
const numeros = [1, 2, 3, 4, 5];
console.log(numeros.includes(3)); // true
4. Preferir const para arrays que no necesiten ser reasignados
// Preferible si el array no será reasignado a otra referencia
const colores = ["rojo", "verde", "azul"];
// Los elementos del array pueden modificarse
colores[0] = "amarillo"; // Esto es válido
// Pero no se puede asignar un nuevo array a la variable
// colores = ["negro", "blanco"]; // Error: no se puede reasignar una constante
5. Tener cuidado con la comparación de arrays
Los arrays se comparan por referencia, no por contenido:
const a = [1, 2, 3];
const b = [1, 2, 3];
const c = a;
console.log(a === b); // false (diferentes referencias aunque mismo contenido)
console.log(a === c); // true (misma referencia)
// Para comparar contenido, necesitamos comparar cada elemento
function compararArrays(arr1, arr2) {
if (arr1.length !== arr2.length) return false;
for (let i = 0; i < arr1.length; i++) {
if (arr1[i] !== arr2[i]) return false;
}
return true;
}
console.log(compararArrays(a, b)); // true
6. Crear copias en lugar de modificar el original
const original = [1, 2, 3];
// Copia mediante slice()
const copia1 = original.slice();
// Copia mediante spread operator
const copia2 = [...original];
// Copia mediante Array.from()
const copia3 = Array.from(original);
// Modificar la copia no afecta al original
copia1.push(4);
console.log(original); // [1, 2, 3]
console.log(copia1); // [1, 2, 3, 4]
Resumen
Los arrays son una estructura de datos fundamental en JavaScript que nos permite almacenar colecciones ordenadas de valores. Podemos crearlos usando notación literal ([]), el constructor Array(), o métodos como Array.of() y Array.from(). Para acceder a sus elementos utilizamos índices numéricos, comenzando por 0, y podemos modificarlos asignando nuevos valores a posiciones específicas.
La propiedad length nos indica el número de elementos en un array y puede ser modificada para cambiar su tamaño. Los arrays también pueden contener otros arrays, formando estructuras multidimensionales como matrices o tablas.
Al trabajar con arrays, es importante seguir buenas prácticas como preferir métodos específicos para añadir o eliminar elementos, tener cuidado con los arrays dispersos, y recordar que los arrays se comparan por referencia, no por contenido.
En el próximo artículo, profundizaremos en los métodos principales de los arrays, que nos proporcionarán herramientas poderosas para manipular, transformar y extraer información de nuestras colecciones de datos.