Marc Semper Lloret
← JavaScript: el lenguaje

Sesión 10 · Semana 4

Arrays

Hoy · Hoja de ruta

  1. 1. Aprende: Cómo se guarda una lista, cómo se accede a sus elementos y cómo se modifica.
  2. 2. Haz: Construye la lista de productos de tu catálogo y opera sobre ella.
  3. 3. Comprueba: Distingues los métodos que modifican el array de los que devuelven uno nuevo.

Antes de empezar · 5 minutos, sin apuntes

  1. En la sesión 6 usaste tres listas paralelas. ¿Qué problema tiene eso?
  2. ¿Cómo pedirías «el tercer producto»?
  3. ¿Qué pasa si pides el elemento número cien de una lista de tres?

Una lista ordenada de valores

const categorias = ["teclados", "ratones", "monitores"];

categorias[0]           // "teclados"   ← se empieza a contar en cero
categorias.length       // 3
categorias[2]           // "monitores"
categorias[99]          // undefined    ← no da error
categorias.at(-1)       // "monitores"  ← el último, sin calcular índices

Que pedir un índice inexistente devuelva undefined en lugar de fallar es cómodo y peligroso a partes iguales: el programa sigue, y el undefined viaja hasta reventar tres funciones más allá.

Añadir, quitar y buscar

const lista = ["teclados", "ratones"];

lista.push("monitores");      // añade al final       → 3
lista.pop();                  // quita el último      → "monitores"
lista.unshift("cables");      // añade al principio
lista.shift();                // quita el primero

lista.includes("ratones");    // true
lista.indexOf("ratones");     // 1, o -1 si no está

Los que modifican y los que no

Distingue mutar de devolver

Algunos métodos cambian el array original —push, pop, splice, sort, reverse— y otros devuelven uno nuevo sin tocarlo: slice, concat, map, filter.

El error clásico: ordenar «una copia» que en realidad era el mismo array, y descubrir después que el catálogo original quedó desordenado para todo el programa. Ante la duda, copia primero.

const original = [3, 1, 2];

const ordenado = [...original].sort();   // copia y ordena la copia
original;                                // [3, 1, 2], intacto

Los tres puntos, el operador de propagación, copian los elementos en un array nuevo.

Recorrer con forEach

categorias.forEach((categoria, indice) => {
  console.log(`${indice + 1}. ${categoria}`);
});

forEach recorre y no devuelve nada: sirve para «haz algo con cada uno». Cuando lo que quieres es obtener otra lista, el método es map, que viene en la sesión siguiente.

Tarea 10 · El catálogo como lista

Crea js/datos.js:

  1. Declara un array con al menos ocho nombres de producto de tu tema.
  2. Otro con sus precios, en el mismo orden.
  3. Escribe funciones para añadir, quitar y buscar un producto.
  4. Ordena una copia por precio sin alterar el original, y demuéstralo.
  5. Escribe una función que devuelva los tres primeros.
Objetivo mínimoLas operaciones básicas funcionando, y el original intacto tras ordenar.
Si lo tienesEscribe una función que devuelva un array sin duplicados.
RetoExplica por qué mantener dos arrays paralelos es mala idea, con un ejemplo de cómo se desincronizan.

Checkpoint · fin de la sesión 10

  • Accedes a los elementos por índice y conoces length.
  • Distingues los métodos que mutan de los que devuelven.
  • Copias un array antes de ordenarlo.
  • Sabes que un índice inexistente da undefined, no un error.

Antes de cerrar · 2 minutos, sin mirar

  1. ¿Qué índice tiene el primer elemento?
  2. Nombra dos métodos que muten y dos que no.
  3. ¿Qué hace [...lista]?
Ver respuestas

1 · El cero.

2 · Mutan push y sort; no mutan slice y map.

3 · Crea un array nuevo con los mismos elementos: una copia superficial.