Saltar al contenidoPedro Farbo
Lección 13 / 1645 min

Arrays y Objetos

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);// 15

Objetos

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"); // false

Objetos 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);// 85

Desestructuració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);    // 25

En 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, reduce para transformar
  • ✅ Objetos: pares clave-valor
  • this referencia 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! 🚀

¿Te gustó el contenido? ¡Tu contribución ayuda a mantener todo online y gratuito!

PIX:0737160d-e98f-4a65-8392-5dba70e7ff3e