Apuntes sobre Javascript

JavaScript lo resuelve todo... eventualmente.

Arrays: Listas de Datos

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 arrays (en algun sitio se traduce como "arreglo"), que son como una estantería donde puedes guardar muchos datos en un solo lugar y acceder a ellos fácilmente.

¿Qué son los arrays?

Un array 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 arrays.

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 arrays

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

Sintaxis:

let nombreDelArray = [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 Arrays

Los arrays 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 arrays

Los arrays 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 arrays con Bucles

Los bucles (como for o while) son perfectos para trabajar con arrays, 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

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

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.).

TOP