Arrays, Objetos y Loops
Volver a clases
Fundamentos de Programación●●Intermedio

Arrays, Objetos y Loops

120 min

Arrays y objetos, métodos de iteración y ciclos para recorrer datos.

Arrays

  • Estructuras para almacenar listas de datos, ordenadas por índice. Ejemplo:
    javascript
    1const tareas = ["Estudiar", "Practicar", "Publicar"];
    2console.log(tareas[0]); // "Estudiar"
  • Métodos esenciales: push, pop, shift, unshift, slice, splice, includes, indexOf. Ejemplo:
    javascript
    1const lista = ["a", "b"];
    2lista.push("c"); // ["a", "b", "c"]
    3const ultimo = lista.pop(); // "c"
  • Ordenar y combinar arrays con sort, concat y spread. Ejemplo:
    javascript
    1const nums = [3, 1, 2];
    2nums.sort((a, b) => a - b); // [1, 2, 3]
    3const combinados = nums.concat([4, 5]);
    4const copia = [...combinados];

Loops

  • for para recorridos controlados por índice. Ejemplo:
    javascript
    1for (let i = 0; i < 3; i++) {
    2  console.log(i);
    3}
  • while y do...while para repeticiones con condición. Ejemplo:
    javascript
    1let i = 0;
    2while (i < 2) {
    3  i++;
    4}
    5
    6let j = 0;
    7do {
    8  j++;
    9} while (j < 2);
  • Buenas prácticas: evitar bucles infinitos y usar break/continue con criterio. Ejemplo:
    javascript
    1for (let i = 0; i < 5; i++) {
    2  if (i === 2) continue;
    3  if (i === 4) break;
    4}

Objetos

  • Colecciones clave-valor para representar entidades reales. Ejemplo:
    javascript
    1const producto = { nombre: "Laptop", precio: 1000 };
  • Acceso con punto y corchetes, y actualización de propiedades. Ejemplo:
    javascript
    1producto.precio = 900;
    2producto["stock"] = 5;
  • Métodos en objetos y uso de this en contexto. Ejemplo:
    javascript
    1const usuario = {
    2  nombre: "Ana",
    3  saludar() {
    4    return `Hola, ${this.nombre}`;
    5  },
    6};

Métodos de iteración

javascript
1const numeros = [1, 2, 3, 4, 5];
2const dobles = numeros.map((n) => n * 2);
3const mayores = numeros.filter((n) => n > 3);
4const suma = numeros.reduce((acc, n) => acc + n, 0);
  • Diferencias entre forEach, map, filter, find y reduce. Ejemplo:
    javascript
    1const items = [1, 2, 3];
    2items.forEach((n) => console.log(n));
    3const encontrado = items.find((n) => n === 2);
  • Cuándo usar cada uno para transformar, filtrar o resumir datos. Ejemplo:
    javascript
    1const precios = [10, 20, 30];
    2const total = precios.reduce((acc, p) => acc + p, 0);

Ejemplos de Código

3 ejemplos

Métodos de arrays

Manipular arrays

javascript
1const frutas = ["manzana", "pera", "uvas"];
2frutas.push("naranja");
3console.log(frutas.join(", "));

Métodos en objetos

javascript
1const usuario = {
2  nombre: "Ana",
3  saludar() {
4    return `Hola, ${this.nombre}`;
5  },
6};

Map y transformación

javascript
1const productos = [
2  { nombre: "Laptop", precio: 1000 },
3  { nombre: "Mouse", precio: 20 },
4];
5const nombres = productos.map((p) => p.nombre);

Recursos

4 recursos disponibles

¡Hora de Practicar!

PrácticaIntermedio15 min🟡 IA con bitácora

Práctica guiada - Arrays y loops

Práctica

Crear una lista de tareas y recorrerla con for y forEach mostrando cada elemento en consola.

Desafío de Código

EjercicioIntermedio15 min🔴 Sin IA

Ejercicios - Objetos y métodos

Ejercicios

(1) Crear 5 objetos (libros) con título, autor y año, (2) filtrar libros posteriores a 2010, (3) calcular promedio de años.

Documentación Oficial

DocumentaciónIntermedio15 min

Documentación de apoyo

Explicaciones claras y ejemplos de métodos de arrays.

Reto de Lectura

Reto de LecturaPrincipiante30 min🔴 Sin IA

Reto de Lectura — Tres formas, un problema (y dos bugs)

El mismo problema resuelto con for, forEach y map. Una versión truena, otra miente. Decide cuál usarías y por qué.

Tres compañeros calcularon los precios con IVA de esta lista. Uno truena, otro devuelve algo inútil, y uno está bien. Encuentra los dos bugs SIN ejecutar, y responde cuándo usarías cada estructura.

javascript
1const precios = [100, 250, 80, 430];
2
3// Versión A
4function conIvaA(precios) {
5  const resultado = [];
6  for (let i = 0; i <= precios.length; i++) {
7    resultado.push(precios[i] * 1.16);
8  }
9  return resultado;
10}
11
12// Versión B
13function conIvaB(precios) {
14  const resultado = precios.forEach(function (p) {
15    return p * 1.16;
16  });
17  return resultado;
18}
19
20// Versión C
21function conIvaC(precios) {
22  return precios.map((p) => p * 1.16);
23}

Preguntas:

  1. ¿Qué devuelve exactamente cada versión con la lista de arriba? (Sé preciso: valores, largo del array, o qué error.)
  2. ¿Por qué forEach con return adentro no hace lo que su autor cree?
  3. Regla práctica: ¿cuándo for clásico, cuándo forEach, cuándo map?
  4. La IA genera mucho la versión B. ¿Por qué crees que este error es tan común en código generado?

La solución no se publica. Se revisa en voz alta en el laboratorio, después de que trabajaste el reto. Trae tu diagnóstico escrito: eso es lo que se entrega.