Arrays — añadir, eliminar y obtener elementos

Si guardas los artículos de un carrito en variables separadas (item1 / item2 / item3), cada producto nuevo te obliga a añadir otra variable y a reescribir el código que los cuenta. Un array (una estructura de datos que guarda varios valores en orden dentro de una sola variable) te permite manejar tantos elementos como haya con una sola variable, y deja las altas y las bajas en manos de sus propios métodos.

Guardar valores en orden dentro de un array — índice y length

Un array se construye escribiendo los valores separados por comas dentro de [ y ]. A cada valor individual se le llama elemento (cada uno de los valores que el array guarda en orden). Puedes mezclar cadenas y números, pero en la práctica se guardan valores del mismo tipo, para que el procesamiento posterior sea uniforme.

Para obtener uno de los elementos guardados, escribe su índice (la posición del elemento, contada desde 0) dentro de []. Si escribes cart[1] = "cinta", solo se reemplaza el elemento de esa posición.

cart[0] es el primer elemento y cart[1] es el segundo. Como el primero es el 0, la numeración va siempre uno por detrás de como cuentan las personas.

length es el número de elementos. Se escribe sin paréntesis, así: cart.length. Como el índice empieza en 0, el índice del último elemento es length menos 1.

at(-1) cuenta desde el final, así que puedes obtener el último elemento sin pasar por length. at(-2) es el segundo empezando por el final.

Leer un índice fuera de rango no da error: devuelve undefined, el valor que indica que ahí todavía no hay nada.

const cart = ["cuaderno", "bolígrafo", "cinta"];

console.log(cart[0]);        // cuaderno
console.log(cart[2]);        // cinta
console.log(cart.length);    // 3

// El último elemento está en length menos 1, o usa at(-1)
console.log(cart[cart.length - 1]);   // cinta
console.log(cart.at(-1));             // cinta

// Leer un índice fuera de rango no da error
console.log(cart[5]);        // undefined

Añadir y eliminar en ambos extremos — push / pop / shift / unshift

El contenido de un carrito cambia cada vez que se añade o se elimina un artículo. Si reescribieras el array a mano en cada cambio, tendrías que llevar tú mismo la cuenta de los elementos y de cada índice. Los arrays traen métodos para añadir y quitar elementos en ambos extremos, de modo que puedes delegarles los cálculos de posición.

push(value) añade un elemento al final y devuelve el número de elementos resultante. pop() elimina el último elemento y devuelve ese mismo elemento eliminado.

Para mostrar el nombre de lo que se eliminó, guarda en una variable el resultado del método (su valor de retorno), así: const removed = cart.pop();.

unshift(value) y shift() son los que trabajan sobre el principio: unshift añade al principio y shift elimina el primer elemento. Si añades un elemento al principio, el índice de todos los que van detrás aumenta en uno.

const cart = ["bolígrafo"];

console.log(cart.push("cinta"));   // 2 (número de elementos resultante)
console.log(cart.join(", "));           // bolígrafo, cinta

console.log(cart.pop());                // cinta (el elemento eliminado)
console.log(cart.join(", "));           // bolígrafo

cart.unshift("nota");             // añadir al principio
console.log(cart.join(", "));           // nota, bolígrafo

console.log(cart.shift());              // nota (el elemento eliminado)
console.log(cart.join(", "));           // bolígrafo

Puede parecer raro que el contenido de cart cambie aunque esté declarado con const. Lo que const prohíbe es asignar otro valor a ese nombre, como en cart = someOtherArray; no impide modificar el contenido del array con cart.push(value). En un artículo posterior veremos con detalle por qué existe esta distinción.

Reproduce el flujo de añadir un artículo al carrito y retirarlo después. cart ya está declarado.

① Añade una estilográfica al final del carrito.

② Muestra el nombre del artículo que queda al final del carrito.

③ Muestra el número de artículos después de añadirlo.

④ Elimina el último artículo y muestra el nombre del que se ha eliminado.

⑤ Muestra el contenido restante del carrito unido con ", ".

(Si se ejecuta correctamente, aparecerá una explicación.)

Inserta una tarea urgente al principio de la lista de tareas de hoy. tasks ya está declarada.

① Añade "Primer aviso de incidencia" al principio de tasks.

② Muestra las tareas en orden, unidas con " → ".

③ Extrae la primera tarea y muestra su nombre.

④ Muestra la tarea que queda al principio después de esa extracción.

Comprobar si algo está incluido — includes e indexOf

Si vuelves a añadir el mismo producto a una lista de favoritos con un simple push, acabarás con el mismo nombre repetido dos veces. Comprobar si el valor ya está en el array antes de añadirlo evita los duplicados.

includes(value) devuelve true si ese valor está en el array y false si no. Cuando también necesitas la posición, usa indexOf(value), que devuelve el índice de la primera coincidencia. Devuelve -1 cuando no hay ninguna.

La idea es la misma que en el includes / indexOf de una cadena: aquí buscas un elemento en vez de un carácter.

Ambos comparan también el tipo, igual que ===, de modo que dos valores de tipos distintos se tratan como distintos. Si le pasas la cadena "2" a un array de números, no cuenta como coincidencia.

const favorites = ["nota", "tablero"];

console.log(favorites.includes("nota"));   // true
console.log(favorites.includes("goma"));  // false

console.log(favorites.indexOf("tablero"));   // 1
console.log(favorites.indexOf("goma"));   // -1

// Compara igual que ===: si el tipo es distinto, no coincide
const quantities = [1, 2, 3];
console.log(quantities.includes("2"));           // false

No uses el resultado de indexOf directamente como condición

Cuando la coincidencia está en el primer elemento, indexOf devuelve 0. Como 0 es falsy, escribir if (favorites.indexOf(name)) hace que solo ese primer elemento se dé por "no encontrado". Si solo quieres saber si está o no, usa includes; y si usas indexOf, compara su resultado de forma explícita, por ejemplo con !== -1.

Comprueba si un producto que vas a añadir a favoritos ya está registrado. favorites / selected / newItem ya están declarados.

① Muestra si selected está incluido en favorites.

② Muestra si newItem está incluido en favorites.

③ Muestra en qué posición está selected dentro de favorites.

④ Muestra la posición que se obtiene al buscar newItem.

Extraer o reemplazar parte de un array — slice y splice

Puede que quieras mostrar solo los 3 primeros de un ranking de ventas, o cambiar una sola entrada de una lista de opciones de envío. Lo que distingue un caso del otro es si extraes sin tocar el original o si modificas el propio array original.

slice(start, end) devuelve un array nuevo con todo lo que va desde el índice inicial hasta el índice final, sin incluirlo. El array original no cambia.

Si omites el final, extrae hasta el último elemento. Se cuenta igual que en el slice de una cadena.

splice(start, deleteCount, itemsToAdd) modifica el propio array original. Elimina deleteCount elementos a partir de start y, si indicas elementos que añadir, los inserta justo en esa posición.

Devuelve un array con los elementos eliminados, de modo que, cuando eliminas solo uno, lees su contenido con [0].

const ranking = ["bolígrafo", "cinta", "nota", "tablero"];

// slice devuelve un array nuevo; ranking no cambia
const top2 = ranking.slice(0, 2);
console.log(top2.join(", "));       // bolígrafo, cinta
console.log(ranking.length);        // 4

// splice modifica el propio ranking
const removed = ranking.splice(1, 2, "goma");
console.log(removed.join(", "));    // cinta, nota
console.log(ranking.join(", "));    // bolígrafo, goma, tablero
console.log(ranking.length);        // 3

slice y splice se diferencian en una letra, pero el resultado es distinto

Los nombres se parecen, pero slice no toca el array original y devuelve uno nuevo, mientras que splice modifica el original. Si llamas a splice solo para mostrar una lista, los datos de origen se van reduciendo cada vez que la muestras. Cuando solo quieres extraer, usa slice.

Recorta el rango que quieres mostrar de un ranking de ventas. ranking, con 5 entradas, ya está declarado.

① Extrae los 3 primeros y guárdalos en otra variable.

② Muestra los 3 extraídos, unidos con ", ".

③ Extrae todo desde el cuarto puesto en adelante y muestra cuántos hay.

④ Muestra el número de entradas del ranking original.

Cambia una sola entrada de una lista de opciones de envío. shipping ya está declarada.

① Reemplaza la segunda opción por "Envío de la noche" y guarda el elemento eliminado.

② Muestra el nombre de la opción que se ha eliminado.

③ Muestra la lista después del cambio, unida con ", ".

④ Muestra el número de opciones después del cambio.