Arrays y Objetos

Los arrays y objetos son las estructuras de datos principales en JavaScript.

Arrays

const frutas = ["manzana", "banana", "cereza"];

// Acceso
frutas[0];          // "manzana"
frutas.at(-1);      // "cereza" (moderno, índice negativo)
frutas.length;      // 3

// Métodos mutables
frutas.push("dátil");              // Agregar al final
frutas.pop();                      // Eliminar del final
frutas.unshift("aguacate");        // Agregar al inicio
frutas.shift();                    // Eliminar del inicio
frutas.splice(1, 1, "arándano");   // Reemplazar en índice

Iteración de Arrays

const numeros = [1, 2, 3, 4, 5];

// forEach — solo efectos secundarios
numeros.forEach(n => console.log(n));

// map — transformar cada elemento
const cuadrados = numeros.map(n => n ** 2);       // [1, 4, 9, 16, 25]

// filter — mantener elementos que cumplen condición
const impares = numeros.filter(n => n % 2 !== 0); // [1, 3, 5]

// find — primer elemento que coincide
const primero4 = numeros.find(n => n > 3);        // 4

// reduce — reducir a un único valor
const suma = numeros.reduce((acc, n) => acc + n, 0); // 15

// some / every
numeros.some(n => n > 4);   // true
numeros.every(n => n > 0);  // true

// flat & flatMap
[[1,2],[3,4]].flat();       // [1, 2, 3, 4]

Spread y Desestructuración de Arrays

const a = [1, 2, 3];
const b = [4, 5, 6];

// Combinar arrays
const combinado = [...a, ...b]; // [1,2,3,4,5,6]

// Clonar (superficial)
const copia = [...a];

// Desestructurar
const [cabeza, ...cola] = a;
console.log(cabeza); // 1
console.log(cola);   // [2, 3]

Objetos

const usuario = {
  id: 1,
  nombre: "Alice",
  correo: "[email protected]",
  direccion: {
    ciudad: "Ciudad de México",
    pais: "México"
  }
};

// Acceso
usuario.nombre;          // "Alice"
usuario["correo"];       // "[email protected]"
usuario.direccion.ciudad; // "Ciudad de México"

// Agregar / modificar / eliminar
usuario.puntuacion = 100;
usuario.nombre = "Alicia";
delete usuario.puntuacion;

Métodos de Objeto

const config = { debug: true, puerto: 3000, host: "localhost" };

Object.keys(config);         // ["debug", "puerto", "host"]
Object.values(config);       // [true, 3000, "localhost"]
Object.entries(config);      // [["debug", true], ...]
Object.freeze(config);       // Hacer inmutable
Object.assign({}, config);   // Clonar superficial

// Spread (preferido moderno)
const fusionado = { ...config, puerto: 8080 };
const clon = { ...config };

Desestructuración de Objetos

const { nombre, correo, direccion: { ciudad } } = usuario;

// Con valores por defecto y renombrar
const { rol = "visitante", nombre: nombreUsuario } = usuario;

// En parámetros de función
function mostrarUsuario({ nombre, correo, rol = "visitante" }) {
  console.log(`${nombre} (${rol}): ${correo}`);
}

Encadenamiento Opcional y Coalescencia Nula

const datos = null;

// Encadenamiento opcional — acceso profundo seguro
console.log(datos?.usuario?.nombre); // undefined (sin error)
console.log(usuario?.direccion?.ciudad); // "Ciudad de México"

// Coalescencia nula — valor por defecto cuando null/undefined
const puerto = config.puerto ?? 3000;
const etiqueta = usuario.apodo ?? usuario.nombre;

Patrón: Usa ?. y ?? juntos para navegar datos anidados de forma segura con valores por defecto.