Trabajar con arrays

Ahora que sabes cómo guardar una lista de datos dentro de un array, es momento de aprender cómo trabajar con esa lista.

En esta lección, practicarás cómo leer elementos específicos, agregar elementos nuevos y quitar elementos que ya no necesitas.

Repaso rápido: leer por índice

Los elementos de un array se numeran empezando desde 0. Este número se llama índice del elemento.

Puedes leer un elemento específico colocando su número de índice dentro de corchetes.

const favoriteFoods = ["pizza", "tacos", "sushi"];

console.log(favoriteFoods[0]);
console.log(favoriteFoods[1]);

En este ejemplo, favoriteFoods[0] lee el primer elemento, y favoriteFoods[1] lee el segundo elemento.

Agregar un elemento con push()

Puedes usar push() para agregar un elemento nuevo al final de un array.

push() cambia el array original al actualizar su contenido.

const inventory = ["sword", "shield", "health potion"];

inventory.push("magic ring");

console.log(inventory);

Quitar el último elemento con pop()

El método pop() quita el último elemento de un array.

También devuelve el elemento que fue quitado.

Al igual que push(), pop() cambia el array original.

const todoList = ["buy groceries", "wash dishes", "pay bills"];

todoList.pop();

console.log(todoList);

Ahora veamos el comienzo de un array.

Agregar un elemento con unshift()

Puedes usar unshift() para agregar un elemento nuevo al comienzo de un array.

const queue = ["second", "third"];

queue.unshift("first");

console.log(queue);

Quitar el primer elemento con shift()

Puedes usar shift() para quitar el primer elemento de un array.

También devuelve el elemento que fue quitado.

const tasks = ["wake up", "eat breakfast", "study JavaScript"];

tasks.shift();

console.log(tasks);

Explicación del código

Este es el patrón básico:

• array[index] lee un elemento por posición.
• push() agrega un elemento al final.
• pop() quita el último elemento.
• unshift() agrega un elemento al comienzo.
• shift() quita el primer elemento.
• Los cuatro métodos cambian el array original.

Cuando haces clic en Ejecutar, verás los arrays actualizados en la sección de salida.

Mini tarea

Mira el bloque de código tasks de arriba.

Antes de hacer clic en Ejecutar, ¿qué crees que pasará si agregas una línea más con tasks.shift(); debajo de la línea existente?

Pruébalo en el editor de código de arriba y revisa tu respuesta.

Quiz corto

Pregunta 1: ¿Qué método agrega un elemento al final de un array?

• A) pop()
• B) push()

Pregunta 2: ¿Qué método quita el primer elemento de un array?

• A) shift()
• B) unshift()

Pregunta 3: Si tienes un array llamado shoppingList, ¿cómo accedes al primer elemento?

• A) shoppingList[1]
• B) shoppingList[0]

Respuestas: 1. B, 2. A, 3. B

Pequeño desafío

Ahora es tu turno de practicar.

1. Crea un array llamado backpack que contenga "water" y "map".
2. Usa push() para agregar "flashlight" al final.
3. Usa unshift() para agregar "snack" al comienzo.
4. Usa pop() para quitar el último elemento.
5. Usa shift() para quitar el primer elemento.
6. Usa console.log() para imprimir tu array backpack.

// escribe tu código abajo

console.log()

Resumen

• Lee elementos por posición usando corchetes, como items[0].
• push() agrega un elemento al final de un array.
• pop() quita el último elemento de un array.
• unshift() agrega un elemento al comienzo de un array.
• shift() quita el primer elemento de un array.
• push(), pop(), unshift() y shift() cambian el array original.