Casi nunca se trabaja con un dato suelto: una paleta tiene varios colores, un portfolio varios proyectos, y cada proyecto tiene título, año y categoría. Las estructuras de datos agrupan valores relacionados. Las dos básicas de JavaScript son los arrays (listas) y los objetos (fichas).

const paleta = ["#264653", "#2a9d8f", "#e9c46a", "#f4a261", "#e76f51"];

paleta[0];          // "#264653": la posición empieza en 0
paleta[4];          // "#e76f51": el último
paleta.length;      // 5
paleta[paleta.length - 1];   // el último, sea cual sea la longitud

• Cada valor ocupa una posición (índice) que empieza en 0.
• length dice cuántos elementos hay.
• Pedir una posición que no existe (paleta[10]) devuelve undefined.

Un array declarado con const sí se puede modificar; lo que no se puede es reasignar la variable a otro array.

paleta.push("#ffffff");     // añade al final
paleta.pop();               // quita el último
paleta.includes("#e9c46a"); // true
paleta.indexOf("#2a9d8f");  // 1

Lo más habitual es hacer algo con cada elemento. Tienes tres formas:

Dos métodos que devuelven un array nuevo sin tocar el original:

const tamanos = [12, 16, 20, 25, 31];

const enRem = tamanos.map((px) => px / 16);        // [0.75, 1, 1.25, 1.5625, 1.9375]
const grandes = tamanos.filter((px) => px >= 20);  // [20, 25, 31]

• map aplica una función a cada elemento y devuelve los resultados.
• filter se queda con los elementos que cumplen la condición.

Un objeto describe una cosa con pares clave: valor, como una ficha:

const proyecto = {
  titulo: "Cartel Festival de Otoño",
  anio: 2026,
  categoria: "cartelismo",
  destacado: true,
  colores: ["#d62828", "#111111"],
};

proyecto.titulo;        // "Cartel Festival de Otoño"
proyecto["categoria"];  // "cartelismo" (otra forma de acceder)
proyecto.colores[0];    // "#d62828"

proyecto.destacado = false;       // modificar
proyecto.cliente = "Ayto. de Sevilla";   // añadir

Las claves son nombres sin espacios (en camelCase); los valores pueden ser de cualquier tipo, incluidos arrays y otros objetos. Usa objetos cuando los datos tienen nombre (título, año), y arrays cuando tienen orden (primero, segundo…).

La combinación más útil: una lista de fichas. Es exactamente como llegan los datos de una base de datos o de una API (lo verás con JSON en la lección Ficheros y formatos de datos y con la API de WordPress en la lección Del gestor a JavaScript: leer datos por API).

const proyectos = [
  { titulo: "Identidad Café Norte", categoria: "branding", anio: 2025 },
  { titulo: "Web del Festival", categoria: "web", anio: 2026 },
  { titulo: "Cartel de Otoño", categoria: "cartelismo", anio: 2026 },
];

for (const p of proyectos) {
  console.log(`${p.anio} · ${p.titulo}`);
}

const recientes = proyectos.filter((p) => p.anio === 2026);
const titulos = proyectos.map((p) => p.titulo);

Con filter sobre un array de objetos ya tienes la lógica de un filtro de portfolio; en la lección Eventos lo conectarás a unos botones.

console.log(proyectos) muestra la estructura desplegable. Para arrays de objetos, console.table(proyectos) la muestra como una tabla: muy útil para comprobar datos.

📌 Nota. Hay un formato de texto casi idéntico a los objetos de JavaScript para guardar e intercambiar datos: JSON. Lo verás en la lección Ficheros y formatos de datos.

• Olvidar que se empieza a contar en 0: el tercer elemento es lista[2].
• Salirse del array: i <= lista.length da una vuelta de más; es i < lista.length.
• Olvidar las comas entre propiedades de un objeto o entre elementos de un array.
• Esperar que map o filter cambien el array original: devuelven uno nuevo; guárdalo en una variable.
• Confundir proyecto.titulo (propiedad titulo) con proyecto[titulo] (usa el valor de una variable llamada titulo).