Arrays y Objetos
¡Arrays y objetos son estructuras fundamentales para organizar datos. Vamos a dominarlos!
Arrays (Listas)
Un array es una lista ordenada de valores:
javascript
const frutas = ["manzana", "banana", "naranja"];const numeros = [1, 2, 3, 4, 5];const mezclado = ["texto", 42, true, null];Accediendo a Elementos
¡Los índices empiezan en 0!
javascript
const frutas = ["manzana", "banana", "naranja"]; console.log(frutas[0]); // "manzana"console.log(frutas[1]); // "banana"console.log(frutas[2]); // "naranja"console.log(frutas[3]); // undefined (no existe) // Último elementoconsole.log(frutas[frutas.length - 1]); // "naranja"Modificando Arrays
javascript
const frutas = ["manzana", "banana"]; // Agregar al finalfrutas.push("naranja"); // ["manzana", "banana", "naranja"] // Quitar del finalfrutas.pop(); // ["manzana", "banana"] // Agregar al iniciofrutas.unshift("uva"); // ["uva", "manzana", "banana"] // Quitar del iniciofrutas.shift(); // ["manzana", "banana"] // Cambiar elemento específicofrutas[0] = "fresa"; // ["fresa", "banana"]Métodos Útiles de Array
javascript
const numeros = [3, 1, 4, 1, 5, 9, 2, 6]; // Longitudnumeros.length; // 8 // Buscarnumeros.includes(5); // truenumeros.indexOf(4); // 2 (posición) // Ordenarnumeros.sort((a, b) => a - b); // [1, 1, 2, 3, 4, 5, 6, 9] // Invertirnumeros.reverse(); // [9, 6, 5, 4, 3, 2, 1, 1] // Rebanarnumeros.slice(0, 3); // primeros 3 elementos // Unir en string["a", "b", "c"].join("-"); // "a-b-c"Métodos de Iteración
javascript
const numeros = [1, 2, 3, 4, 5]; // forEach - ejecutar para cada itemnumeros.forEach(num => { console.log(num * 2);}); // map - transformar y crear nuevo arrayconst doblados = numeros.map(num => num * 2);// [2, 4, 6, 8, 10] // filter - filtrar itemsconst mayorQue2 = numeros.filter(num => num > 2);// [3, 4, 5] // find - encontrar primero que satisface condiciónconst encontrado = numeros.find(num => num > 3);// 4 // reduce - reducir a un valorconst suma = numeros.reduce((acc, num) => acc + num, 0);// 15Objetos
Los objetos almacenan datos en pares clave-valor:
javascript
const persona = { nombre: "Juan", edad: 25, ciudad: "Madrid", activo: true};Accediendo a Propiedades
javascript
// Notación de puntoconsole.log(persona.nombre); // "Juan"console.log(persona.edad); // 25 // Notación de corchetesconsole.log(persona["nombre"]); // "Juan" // Útil con variablesconst prop = "ciudad";console.log(persona[prop]); // "Madrid"Modificando Objetos
javascript
const persona = { nombre: "Juan", edad: 25 }; // Modificarpersona.edad = 26; // Agregarpersona.email = "juan@email.com"; // Eliminardelete persona.email;Métodos de Objeto
javascript
const persona = { nombre: "Juan", edad: 25 }; // ClavesObject.keys(persona); // ["nombre", "edad"] // ValoresObject.values(persona); // ["Juan", 25] // EntradasObject.entries(persona); // [["nombre", "Juan"], ["edad", 25]] // Verificar si existe"nombre" in persona; // truepersona.hasOwnProperty("email"); // falseObjetos con Métodos
Los objetos pueden tener funciones:
javascript
const persona = { nombre: "Juan", edad: 25, presentarse() { return `¡Hola, mi nombre es ${this.nombre}!`; }, cumplirAnos() { this.edad++; return `¡Ahora tengo ${this.edad} años!`; }}; console.log(persona.presentarse()); // "¡Hola, mi nombre es Juan!"console.log(persona.cumplirAnos()); // "¡Ahora tengo 26 años!"this se refiere al objeto mismo.
Arrays de Objetos
Super común en la práctica:
javascript
const usuarios = [ { id: 1, nombre: "Ana", edad: 28 }, { id: 2, nombre: "Bruno", edad: 35 }, { id: 3, nombre: "Carla", edad: 22 }]; // Encontrar por idconst usuario = usuarios.find(u => u.id === 2);// { id: 2, nombre: "Bruno", edad: 35 } // Filtrar por edadconst adultos = usuarios.filter(u => u.edad >= 25);// [{ id: 1, nombre: "Ana"... }, { id: 2, nombre: "Bruno"... }] // Extraer solo nombresconst nombres = usuarios.map(u => u.nombre);// ["Ana", "Bruno", "Carla"] // Sumar edadesconst sumaEdades = usuarios.reduce((acc, u) => acc + u.edad, 0);// 85Desestructuración
Extraer valores elegantemente:
Arrays
javascript
const colores = ["rojo", "verde", "azul"]; const [primero, segundo, tercero] = colores;console.log(primero); // "rojo"console.log(segundo); // "verde"Objetos
javascript
const persona = { nombre: "Juan", edad: 25, ciudad: "Madrid" }; const { nombre, edad } = persona;console.log(nombre); // "Juan"console.log(edad); // 25En parámetros de función
javascript
function mostrarPersona({ nombre, edad }) { console.log(`${nombre} tiene ${edad} años`);} mostrarPersona({ nombre: "Ana", edad: 30 });Operador Spread (...)
Copiar arrays
javascript
const original = [1, 2, 3];const copia = [...original];Unir arrays
javascript
const a = [1, 2];const b = [3, 4];const junto = [...a, ...b]; // [1, 2, 3, 4]Copiar objetos
javascript
const original = { a: 1, b: 2 };const copia = { ...original };const modificado = { ...original, b: 10, c: 3 };// { a: 1, b: 10, c: 3 }Ejercicio: Lista de Tareas
javascript
const tareas = [ { id: 1, titulo: "Estudiar JS", completada: true }, { id: 2, titulo: "Hacer ejercicios", completada: false }, { id: 3, titulo: "Crear proyecto", completada: false }]; // Agregar tareafunction agregarTarea(titulo) { const nuevaTarea = { id: tareas.length + 1, titulo, completada: false }; tareas.push(nuevaTarea); return nuevaTarea;} // Marcar como completadafunction completarTarea(id) { const tarea = tareas.find(t => t.id === id); if (tarea) { tarea.completada = true; return tarea; } return null;} // Listar pendientesfunction listarPendientes() { return tareas.filter(t => !t.completada);} // TestagregarTarea("Revisar código");completarTarea(2);console.log(listarPendientes());Resumen
- ✅ Arrays: listas ordenadas con índices
- ✅
map,filter,find,reducepara transformar - ✅ Objetos: pares clave-valor
- ✅
thisreferencia al objeto mismo - ✅ Desestructuración extrae valores elegantemente
- ✅ Spread
...copia y combina
¡En la próxima lección, conectaremos JavaScript al HTML con el DOM! 🚀