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?