Arrays

Creación y acceso a elementos

Los arrays son estructuras de datos fundamentales que nos permiten almacenar múltiples valores en una sola variable. En JavaScript, representan colecciones ordenadas donde cada elemento tiene una posición específica llamada índice.

Creación de arrays

Existen varias formas de crear arrays en JavaScript moderno. La sintaxis literal con corchetes es la más común y recomendada:

// Array vacío
const numeros = [];

// Array con elementos iniciales
const colores = ["rojo", "verde", "azul"];

// Array con diferentes tipos de datos
const mixto = [42, "texto", true, null];

También puedes usar el constructor Array(), aunque es menos frecuente:

// Array vacío con longitud específica
const espacios = new Array(5); // [undefined, undefined, undefined, undefined, undefined]

// Array con elementos iniciales
const frutas = new Array("manzana", "naranja", "plátano");

Para casos especiales, JavaScript ofrece métodos estáticos útiles:

// Crear array con valores consecutivos
const rango = Array.from({length: 5}, (_, i) => i + 1); // [1, 2, 3, 4, 5]

// Crear array rellenado con el mismo valor
const ceros = Array(3).fill(0); // [0, 0, 0]

Acceso a elementos

El acceso a elementos se realiza mediante la notación de corchetes, utilizando el índice del elemento. Los índices en JavaScript comienzan en 0:

const animales = ["gato", "perro", "pájaro", "pez"];

// Acceder a elementos por índice
console.log(animales[0]); // "gato"
console.log(animales[2]); // "pájaro"

// Acceder al último elemento
console.log(animales[animales.length - 1]); // "pez"

Puedes usar índices negativos de forma indirecta con el método at():

const letras = ["a", "b", "c", "d"];

// Método at() para índices negativos
console.log(letras.at(-1)); // "d" (último elemento)
console.log(letras.at(-2)); // "c" (penúltimo elemento)

Modificación de elementos

Los arrays son mutables, lo que significa que puedes cambiar sus elementos después de la creación:

const ciudades = ["Madrid", "Barcelona", "Valencia"];

// Modificar un elemento existente
ciudades[1] = "Sevilla";
console.log(ciudades); // ["Madrid", "Sevilla", "Valencia"]

// Añadir elemento en una posición específica
ciudades[3] = "Bilbao";
console.log(ciudades); // ["Madrid", "Sevilla", "Valencia", "Bilbao"]

Acceso seguro y validación

Es importante validar el acceso a elementos para evitar errores:

const productos = ["laptop", "ratón", "teclado"];

// Verificar si existe un índice antes de acceder
if (productos[5] !== undefined) {
    console.log(productos[5]);
} else {
    console.log("El elemento no existe"); // Esto se ejecutará
}

// Usar optional chaining para acceso seguro
console.log(productos[10] ?? "Elemento no encontrado"); // "Elemento no encontrado"

Arrays multidimensionales

JavaScript permite crear arrays dentro de arrays para estructuras más complejas:

// Matriz 2D (array de arrays)
const matriz = [
    [1, 2, 3],
    [4, 5, 6],
    [7, 8, 9]
];

// Acceder a elementos en matriz 2D
console.log(matriz[0][1]); // 2 (fila 0, columna 1)
console.log(matriz[2][0]); // 7 (fila 2, columna 0)

// Modificar elemento en matriz 2D
matriz[1][2] = 10;
console.log(matriz[1]); // [4, 5, 10]

Esta forma de crear y acceder a elementos establece los fundamentos para trabajar con arrays, preparando el terreno para operaciones más avanzadas como la iteración y el uso de métodos especializados.

Propiedades y métodos básicos

Los arrays en JavaScript vienen equipados con propiedades y métodos esenciales que facilitan su manipulación. Estas herramientas integradas te permiten obtener información sobre el array y realizar operaciones comunes sin necesidad de escribir código complejo.

La propiedad length

La propiedad length es fundamental para trabajar con arrays. Te indica cuántos elementos contiene el array:

const deportes = ["fútbol", "tenis", "baloncesto"];
console.log(deportes.length); // 3

const vacio = [];
console.log(vacio.length); // 0

Una característica interesante de length es que es modificable. Cambiar su valor afecta directamente al array:

const numeros = [1, 2, 3, 4, 5];
console.log(numeros.length); // 5

// Reducir el tamaño del array
numeros.length = 3;
console.log(numeros); // [1, 2, 3]

// Expandir el array (rellena con undefined)
numeros.length = 5;
console.log(numeros); // [1, 2, 3, undefined, undefined]

Métodos para añadir elementos

Los métodos push() y unshift() permiten añadir elementos al array de forma sencilla:

push() añade elementos al final del array:

const tareas = ["estudiar", "trabajar"];

// Añadir un elemento
tareas.push("ejercitarse");
console.log(tareas); // ["estudiar", "trabajar", "ejercitarse"]

// Añadir múltiples elementos
tareas.push("cocinar", "leer");
console.log(tareas); // ["estudiar", "trabajar", "ejercitarse", "cocinar", "leer"]

unshift() añade elementos al inicio del array:

const colores = ["verde", "azul"];

// Añadir un elemento al inicio
colores.unshift("rojo");
console.log(colores); // ["rojo", "verde", "azul"]

// Añadir múltiples elementos al inicio
colores.unshift("negro", "blanco");
console.log(colores); // ["negro", "blanco", "rojo", "verde", "azul"]

Métodos para eliminar elementos

Los métodos pop() y shift() eliminan elementos del array y los devuelven:

pop() elimina y devuelve el último elemento:

const frutas = ["manzana", "naranja", "plátano"];

// Eliminar el último elemento
const ultimaFruta = frutas.pop();
console.log(ultimaFruta); // "plátano"
console.log(frutas); // ["manzana", "naranja"]

shift() elimina y devuelve el primer elemento:

const vehiculos = ["coche", "moto", "bicicleta"];

// Eliminar el primer elemento
const primerVehiculo = vehiculos.shift();
console.log(primerVehiculo); // "coche"
console.log(vehiculos); // ["moto", "bicicleta"]

Conversión a cadena de texto

Los arrays pueden convertirse a cadenas de texto usando varios métodos:

toString() convierte el array en una cadena separada por comas:

const mascotas = ["perro", "gato", "pájaro"];
const cadena = mascotas.toString();
console.log(cadena); // "perro,gato,pájaro"

join() permite especificar el separador entre elementos:

const palabras = ["Hola", "mundo", "JavaScript"];

// Unir con espacios
console.log(palabras.join(" ")); // "Hola mundo JavaScript"

// Unir con guiones
console.log(palabras.join("-")); // "Hola-mundo-JavaScript"

// Unir sin separador
console.log(palabras.join("")); // "HolamundoJavaScript"

Inversión de elementos

El método reverse() invierte el orden de los elementos en el array:

const letras = ["a", "b", "c", "d"];
letras.reverse();
console.log(letras); // ["d", "c", "b", "a"]

Ten en cuenta que reverse() modifica el array original. Si necesitas mantener el array original intacto, crea una copia primero:

const original = [1, 2, 3, 4];
const invertido = [...original].reverse(); // Usando spread operator
console.log(original); // [1, 2, 3, 4] (sin cambios)
console.log(invertido); // [4, 3, 2, 1]

Concatenación de arrays

El método concat() permite unir arrays sin modificar los originales:

const grupo1 = ["Ana", "Luis"];
const grupo2 = ["María", "Carlos"];
const grupo3 = ["Pedro"];

// Concatenar dos arrays
const equipoCompleto = grupo1.concat(grupo2);
console.log(equipoCompleto); // ["Ana", "Luis", "María", "Carlos"]

// Concatenar múltiples arrays
const todoJunto = grupo1.concat(grupo2, grupo3);
console.log(todoJunto); // ["Ana", "Luis", "María", "Carlos", "Pedro"]

Extracción de porciones

El método slice() extrae una porción del array sin modificarlo:

const meses = ["enero", "febrero", "marzo", "abril", "mayo"];

// Extraer desde el índice 1 hasta el 3 (no incluido)
const trimestre = meses.slice(1, 4);
console.log(trimestre); // ["febrero", "marzo", "abril"]

// Extraer desde un índice hasta el final
const segundoSemestre = meses.slice(2);
console.log(segundoSemestre); // ["marzo", "abril", "mayo"]

// Array original permanece igual
console.log(meses); // ["enero", "febrero", "marzo", "abril", "mayo"]

Comprobación de existencia

El método includes() verifica si un elemento existe en el array:

const ingredientes = ["tomate", "cebolla", "ajo", "pimiento"];

// Verificar si existe un ingrediente
console.log(ingredientes.includes("ajo")); // true
console.log(ingredientes.includes("apio")); // false

// Buscar desde un índice específico
console.log(ingredientes.includes("tomate", 1)); // false (busca desde índice 1)

Búsqueda de índices

Los métodos indexOf() y lastIndexOf() encuentran la posición de un elemento:

const calificaciones = [8, 7, 9, 7, 10, 7];

// Encontrar la primera ocurrencia
console.log(calificaciones.indexOf(7)); // 1

// Encontrar la última ocurrencia  
console.log(calificaciones.lastIndexOf(7)); // 5

// Si no existe, devuelve -1
console.log(calificaciones.indexOf(6)); // -1

Estos métodos básicos proporcionan las herramientas esenciales para manipular arrays de forma eficiente, estableciendo la base para operaciones más complejas que veremos en lecciones posteriores.

Iteración con bucles

La iteración de arrays es una tarea fundamental en JavaScript que nos permite procesar cada elemento de forma secuencial. Utilizando los bucles que ya conoces, puedes recorrer arrays para realizar operaciones como mostrar contenido, buscar elementos específicos o transformar datos.

Iteración con bucle for tradicional

El bucle for clásico te ofrece control total sobre el proceso de iteración, siendo ideal cuando necesitas acceder tanto al índice como al valor:

const ciudades = ["Madrid", "Barcelona", "Valencia", "Sevilla"];

// Recorrer array completo
for (let i = 0; i < ciudades.length; i++) {
    console.log(`${i}: ${ciudades[i]}`);
}
// 0: Madrid
// 1: Barcelona
// 2: Valencia
// 3: Sevilla

Este enfoque es especialmente útil cuando necesitas modificar elementos durante la iteración:

const precios = [10, 25, 30, 15];

// Aplicar descuento del 20%
for (let i = 0; i < precios.length; i++) {
    precios[i] = precios[i] * 0.8;
}

console.log(precios); // [8, 20, 24, 12]

Iteración con for...of

El bucle for...of proporciona una sintaxis más limpia cuando solo necesitas acceder a los valores, sin preocuparte por los índices:

const colores = ["rojo", "verde", "azul", "amarillo"];

// Iterar solo por valores
for (const color of colores) {
    console.log(`Color: ${color}`);
}
// Color: rojo
// Color: verde
// Color: azul
// Color: amarillo

Es la opción más legible para operaciones simples de lectura:

const temperaturas = [22, 25, 18, 30, 27];
let suma = 0;

// Calcular temperatura media
for (const temp of temperaturas) {
    suma += temp;
}

const media = suma / temperaturas.length;
console.log(`Temperatura media: ${media}°C`); // Temperatura media: 24.4°C

Iteración con while y do...while

Los bucles while son útiles cuando la condición de parada depende del contenido, no solo del índice:

const numeros = [5, 12, 3, 8, 15, 2];
let i = 0;

// Buscar el primer número mayor que 10
while (i < numeros.length && numeros[i] <= 10) {
    i++;
}

if (i < numeros.length) {
    console.log(`Primer número mayor que 10: ${numeros[i]} en posición ${i}`);
} else {
    console.log("No hay números mayores que 10");
}

El bucle do...while garantiza al menos una ejecución, útil en validaciones:

const respuestas = ["no", "tal vez", "no", "sí", "no"];
let indice = 0;
let encontrado = false;

do {
    if (respuestas[indice] === "sí") {
        encontrado = true;
        console.log(`Respuesta positiva encontrada en posición ${indice}`);
    }
    indice++;
} while (indice < respuestas.length && !encontrado);

Iteración con control de flujo

Los comandos break y continue te permiten controlar el flujo de iteración de forma precisa:

break detiene completamente el bucle:

const productos = ["laptop", "ratón", "teclado", "monitor", "altavoces"];
const buscar = "teclado";

for (let i = 0; i < productos.length; i++) {
    if (productos[i] === buscar) {
        console.log(`${buscar} encontrado en posición ${i}`);
        break; // Detiene el bucle al encontrar el elemento
    }
}

continue salta a la siguiente iteración:

const edades = [16, 22, 17, 25, 19, 30];

console.log("Personas mayores de edad:");
for (const edad of edades) {
    if (edad < 18) {
        continue; // Salta menores de edad
    }
    console.log(`${edad} años`);
}
// 22 años
// 25 años
// 19 años
// 30 años

Iteración de arrays multidimensionales

Para arrays anidados, necesitas bucles anidados:

const matriz = [
    ["A", "B", "C"],
    ["D", "E", "F"],
    ["G", "H", "I"]
];

// Recorrer matriz completa
for (let fila = 0; fila < matriz.length; fila++) {
    for (let columna = 0; columna < matriz[fila].length; columna++) {
        console.log(`Posición [${fila}][${columna}]: ${matriz[fila][columna]}`);
    }
}

También puedes combinar for...of para mayor legibilidad:

const tablero = [
    [1, 0, 1],
    [0, 1, 0],
    [1, 1, 0]
];

for (const fila of tablero) {
    let linea = "";
    for (const celda of fila) {
        linea += celda === 1 ? "X " : "O ";
    }
    console.log(linea);
}
// X O X
// O X O  
// X X O

Patrones comunes de iteración

Búsqueda de elementos:

const estudiantes = ["Ana", "Luis", "María", "Carlos"];
const buscarEstudiante = "María";
let posicion = -1;

for (let i = 0; i < estudiantes.length; i++) {
    if (estudiantes[i] === buscarEstudiante) {
        posicion = i;
        break;
    }
}

console.log(posicion !== -1 ? `${buscarEstudiante} está en posición ${posicion}` : "No encontrado");

Conteo de elementos:

const votos = ["A", "B", "A", "C", "A", "B", "A"];
let conteoA = 0;

for (const voto of votos) {
    if (voto === "A") {
        conteoA++;
    }
}

console.log(`Opción A recibió ${conteoA} votos`); // Opción A recibió 4 votos

Acumulación de valores:

const ventas = [120, 250, 180, 300, 90];
let total = 0;
let maxVenta = 0;

for (const venta of ventas) {
    total += venta;
    if (venta > maxVenta) {
        maxVenta = venta;
    }
}

console.log(`Total vendido: €${total}`); // Total vendido: €940
console.log(`Mejor venta: €${maxVenta}`); // Mejor venta: €300

Consideraciones de rendimiento

Cuando iteres arrays grandes, es recomendable almacenar la longitud en una variable para evitar recalcularla en cada iteración:

const datosGrandes = new Array(1000000).fill(0);

// Menos eficiente
for (let i = 0; i < datosGrandes.length; i++) {
    // Procesar elemento
}

// Más eficiente
const longitud = datosGrandes.length;
for (let i = 0; i < longitud; i++) {
    // Procesar elemento
}

Para iteración hacia atrás, que a veces es más eficiente:

const elementos = [10, 20, 30, 40, 50];

// Iterar de atrás hacia adelante
for (let i = elementos.length - 1; i >= 0; i--) {
    console.log(`Posición ${i}: ${elementos[i]}`);
}

Dominar estos patrones de iteración te permitirá procesar arrays de forma eficiente y preparará el terreno para técnicas más avanzadas que explorarás en lecciones posteriores.