Curso de JavaScript para Principiantes - Lección 7: Arreglos: Listas de Datos

¡Bienvenido a la séptima lección! Hasta ahora, has aprendido a trabajar con variables, operadores, condicionales, bucles y funciones. Pero, ¿qué haces si necesitas almacenar una lista de cosas, como los nombres de tus amigos o los precios de varios productos? Aquí entran los arreglos, que son como una estantería donde puedes guardar muchos datos en un solo lugar y acceder a ellos fácilmente.

¿Qué son los arreglos?

Un arreglo es una estructura de datos que almacena una colección ordenada de valores. Cada valor tiene un índice (una posición numérica, empezando desde 0). Puedes guardar cualquier tipo de dato en un arreglo: números, cadenas, booleanos, e incluso otros arreglos.

Ejemplo mental: Imagina un arreglo como una fila de casilleros numerados. Cada casillero (índice) contiene un valor, y puedes acceder a él diciendo "dame lo que está en el casillero 2".

1. Creando y Accediendo a Arreglos

Para crear un arreglo, usas corchetes [] y separas los valores con comas.

Sintaxis:

let nombreDelArreglo = [valor1, valor2, valor3];

Ejemplo práctico:

let frutas = ["manzana", "banana", "naranja"];

console.log(frutas); // Imprime: ["manzana", "banana", "naranja"]
console.log(frutas[0]); // Imprime: manzana (índice 0)
console.log(frutas[2]); // Imprime: naranja (índice 2)

Los índices empiezan en 0, así que el primer elemento es [0], el segundo [1], y así sucesivamente.
Si intentas acceder a un índice que no existe, obtienes undefined:

console.log(frutas[5]); // Imprime: undefined

2. Modificando Arreglos

Los arreglos son mutables, lo que significa que puedes cambiar sus elementos.

Ejemplo:

let numeros = [10, 20, 30];
numeros[1] = 25; // Cambia el elemento en el índice 1
console.log(numeros); // Imprime: [10, 25, 30]

3. Métodos Comunes de Arreglos

Los arreglos vienen con métodos (funciones integradas) que facilitan su manipulación. Aquí los más importantes para principiantes:

Método	Descripción	Ejemplo
`push()`	Añade un elemento al final	`arreglo.push(4)`
`pop()`	Elimina y devuelve el último elemento	`arreglo.pop()`
`shift()`	Elimina y devuelve el primer elemento	`arreglo.shift()`
`unshift()`	Añade un elemento al inicio	`arreglo.unshift(0)`
`length`	Devuelve la cantidad de elementos	`arreglo.length`

Ejemplo práctico:

let tareas = ["estudiar", "comer"];
console.log(tareas.length); // Imprime: 2

tareas.push("dormir"); // Añade "dormir" al final
console.log(tareas); // Imprime: ["estudiar", "comer", "dormir"]

tareas.pop(); // Elimina "dormir"
console.log(tareas); // Imprime: ["estudiar", "comer"]

tareas.unshift("despertar"); // Añade "despertar" al inicio
console.log(tareas); // Imprime: ["despertar", "estudiar", "comer"]

4. Recorriendo Arreglos con Bucles

Los bucles (como for o while) son perfectos para trabajar con arreglos, ya que puedes acceder a cada elemento usando su índice.

Ejemplo con for:

let colores = ["rojo", "azul", "verde"];

for (let i = 0; i < colores.length; i++) {
  console.log("Color " + i + ": " + colores[i]);
}

Resultado:

Color 0: rojo
Color 1: azul
Color 2: verde

Ejemplo con for...of (una forma más moderna y sencilla):

for (let color of colores) {
  console.log("Color: " + color);
}

Resultado:

Color: rojo
Color: azul
Color: verde

Buenas Prácticas

Usa nombres claros: Llama a tus arreglos según lo que contienen (por ejemplo, nombres o precios, no cosas).
Verifica los índices: Asegúrate de no acceder a índices fuera del rango para evitar undefined.
Usa length: Es útil para bucles y para saber cuántos elementos hay.
Prefiere for...of para recorrer: Es más limpio que for cuando no necesitas el índice.
Evita modificar arreglos mientras los recorres: Puede causar errores, a menos que uses métodos como pop() con cuidado.

Ejercicios Prácticos

Crear y modificar un arreglo:
- Crea un arreglo comida con tres alimentos.
- Cambia el segundo elemento por otro alimento.
- Muestra el arreglo en la consola.
Usar métodos de arreglos:
- Crea un arreglo numeros con los valores [1, 2, 3].
- Usa push para añadir el 4.
- Usa pop para eliminar el último elemento.
- Usa unshift para añadir el 0 al inicio.
- Muestra el arreglo después de cada cambio.
Recorrer un arreglo:
- Crea un arreglo amigos con los nombres de tres amigos.
- Usa un bucle for para imprimir "Hola, [nombre]" por cada amigo.
- Repite el ejercicio usando for...of.
Función con arreglos:
- Crea una función agregarTarea que reciba un arreglo y una tarea, y use push para añadir la tarea al arreglo.
- Prueba la función con un arreglo vacío y varias tareas, mostrando el arreglo después de cada llamada.

Instrucción: Prueba estos ejercicios en JSFiddle o en la consola del navegador (F12). Por ejemplo:

let lista = ["a", "b"];
lista.push("c");
console.log(lista);

Para la Próxima Lección

En la Lección 8, exploraremos objetos, que son como contenedores para datos relacionados, como las propiedades de una persona (nombre, edad, etc.). ¡Sigue practicando los arreglos con los ejercicios de hoy para estar listo!

Apuntes javascript