Language Tour

🚀 Clases en Vivo — Inicio: Domingo 6 de Septiembre ($200 MXN / clase). Aprende a programar desde cero con acompañamiento directo y construye el proyecto ShortURL.

Apartar mi Lugar en las Clases en Vivo

En la Lección 2: Conceptos básicos (L2) aprendimos a guardar información en variables y a estructurar la lógica con condicionales, bucles y funciones. Ahora que conocemos las bases, es momento de abrir la caja de herramientas completa de JavaScript: nuestro Language Tour.

En esta sesión intensiva de 4 horas, aprenderemos a manipular textos, dominar los métodos modernos de listas y objetos, y proteger nuestras aplicaciones ante fallos imprevistos utilizando bloques de control de errores.

🗺️ Estructura de la Sesión

Cada una de nuestras sesiones semanales sigue una metodología pedagógica dividida en 5 fases:

Estructura de la Sesión
├── ☕ Fase 1: Revisión del Tema Anterior y Conclusiones
├── 🎯 Fase 2: Introducción al Tema y Fundamentos
├── 💻 Fase 3: Práctica Asistida en Vivo
├── 🗣️ Fase 4: Exposición, Debate y Debugging
└── 🏠 Fase 5: Reto Semanal y Práctica en Casa

☕ Fase 1: Revisión del Tema Anterior y Conclusiones

Comenzamos la sesión revisando el proyecto de facturación de la semana anterior y conectando con los desafíos del mundo real.

1. Puesta en Común del Reto de la Lección 2

En la sesión previa desarrollamos el “Asistente de Facturación del Minimarket”, sumando un arreglo de precios con un bucle for y aplicando descuentos condicionales:

Discusión en grupo: ¿Cómo manejaste el cálculo del IVA sobre el subtotal descontado?
¿Qué ocurrió si intentaste agregar un producto con precio negativo o texto por accidente?
¿Notaste lo repetitivo que puede ser escribir bucles for tradicionales para tareas sencillas?

2. El Puente Conceptual: La Caja de Herramientas Moderna

En el desarrollo real, los datos rara vez vienen limpios y perfectos:

Los usuarios escriben correos electrónicos con espacios accidentales al inicio (" [email protected] ").
Los nombres vienen mezclados en mayúsculas y minúsculas ("jOuL mEdInA").
Necesitamos filtrar listas de miles de productos en milisegundos sin escribir decenas de líneas de código manual.
Las conexiones a internet o los datos corruptos pueden hacer que nuestro programa se detenga de golpe si no tenemos un escudo protector contra errores.

Hoy exploraremos las herramientas integradas de JavaScript diseñadas para resolver estos problemas de manera elegante y profesional.

🎯 Fase 2: Introducción al Tema y Fundamentos Teóricos

En esta fase recorreremos las cuatro grandes áreas de la sintaxis moderna de JavaScript.

1. Métodos de Texto (Strings): Limpieza y Búsqueda

Las cadenas de texto en JavaScript no son simples letras estáticas; vienen equipadas con “superpoderes” (métodos) para transformar y analizar su contenido:

const mensaje = "  ¡Aprender JavaScript en Desde0 es Genial!  ";

// 1. Limpiar espacios en blanco de los extremos
const mensajeLimpio = mensaje.trim();
// Resultado: "¡Aprender JavaScript en Desde0 es Genial!"

// 2. Transformar a mayúsculas o minúsculas para comparaciones seguras
const enMinusculas = mensajeLimpio.toLowerCase();
// Resultado: "¡aprender javascript en desde0 es genial!"
const enMayusculas = mensajeLimpio.toUpperCase();
// Resultado: "¡APRENDER JAVASCRIPT EN DESDE0 ES GENIAL!"

// 3. Preguntar si contiene una palabra clave (devuelve true o false)
const contieneJavaScript = mensajeLimpio.includes("JavaScript"); // true
// Resultado: true

// 4. Reemplazar partes del texto
const mensajeAdaptado = mensajeLimpio.replace("Genial", "Transformador");
// Resultado: "¡Aprender JavaScript en Desde0 es Transformador!"

2. Métodos Avanzados de Arreglos (Arrays): La Tríada Funcional

En la Lección 2 usamos bucles for tradicionales para recorrer listas. En el desarrollo moderno utilizamos métodos declarativos que expresan qué queremos lograr con la lista:

[Arreglo Original]
       │
       ├──► filter() ──► El Colador: Selecciona solo los elementos que cumplen una condición.
       ├──► map()    ──► La Fábrica: Transforma cada elemento aplicando una fórmula.
       └──► reduce() ──► La Alcancía: Acumula todos los elementos en un único resultado final.

Ejemplos Prácticos de la Tríada:

const numeros = [10, 25, 40, 5, 80];

// 1. FILTER: Obtener solo los números mayores o iguales a 20
const mayores = numeros.filter(num => num >= 20);
// Resultado: [25, 40, 80]

// 2. MAP: Duplicar cada número de la lista
const dobles = numeros.map(num => num * 2);
// Resultado: [20, 50, 80, 10, 160]

// 3. REDUCE: Sumar todos los números para obtener el gran total
const sumaTotal = numeros.reduce((acumulado, num) => acumulado + num, 0);
// Resultado: 160

3. Objetos Complejos y Acceso a Propiedades

En aplicaciones reales trabajamos con colecciones de objetos (fichas de datos) que combinan múltiples tipos de información:

const catalogo = [
  { id: 1, titulo: "Curso de Frontend", precio: 150, disponible: true },
  { id: 2, titulo: "Curso de Backend", precio: 200, disponible: false },
  { id: 3, titulo: "Taller de Bases de Datos", precio: 120, disponible: true }
];

// Accedemos a la propiedad de un elemento específico
console.log(catalogo[0].titulo);
// Resultado: "Curso de Frontend"

// Combinamos arreglos y objetos con filter:
const disponibles = catalogo.filter(curso => curso.disponible);
// Resultado: [
//   { id: 1, titulo: "Curso de Frontend", precio: 150, disponible: true },
//   { id: 3, titulo: "Taller de Bases de Datos", precio: 120, disponible: true }
// ]

4. El Cinturón de Seguridad contra Errores (`try / catch / finally`)

Cuando ocurre un error imprevisto (por ejemplo, intentar procesar un texto que no existe o una falla de conexión), JavaScript detiene por completo la ejecución de la aplicación (crash).

Para evitar que nuestro programa muera frente al usuario, lo envolvemos en un bloque try / catch:

try {
  // 1. TRY: Intentamos ejecutar este código peligroso
  console.log("Iniciando operación crítica...");
  const resultado = operacionRiesgosa();
  console.log("Operación completada:", resultado);
} catch (error) {
  // 2. CATCH: Si ocurre CUALQUIER error dentro del try, se salta aquí de inmediato
  console.warn("⚠️ Ocurrió un error controlado:", error.message);
} finally {
  // 3. FINALLY: Se ejecuta SIEMPRE, haya ocurrido error o no
  console.log("Limpieza finalizada. La aplicación sigue viva y funcionando.");
}

🔍 Experimento en Vivo: El Detector de Datos Corruptos

Vamos a comprobar juntos el poder de try / catch en la consola:

Abramos la consola del navegador (F12).
Intentemos procesar un formato JSON inválido sin protección:
```
JSON.parse("Este texto no es un JSON válido");
```
(Verás cómo la consola arroja un error rojo Uncaught SyntaxError que habría roto una página real).

Ahora ejecutemos la misma operación blindada con try / catch:

try {
  let datos = JSON.parse("Este texto no es un JSON válido");
} catch (error) {
  console.log("🟢 Error capturado con éxito: El usuario envió datos mal formados, pero el sistema sigue en pie.");
}

💻 Fase 3: Práctica Asistida en Vivo

Abriremos la consola y construiremos 4 retos guiados progresivos para dominar estas herramientas.

🧩 Reto 1: El Sanitizador y Normalizador de Datos de Usuario

Objetivo: Limpiar textos desordenados ingresados por usuarios utilizando métodos de String.

Imagina que recibes datos de registro con espacios accidentales y mezclas de mayúsculas. Vamos a crear una función que los deje impecables:

function sanitizarEmail(correoIngresado) {
  return correoIngresado.trim().toLowerCase();
}

function formatearNombre(nombreCompleto) {
  const limpio = nombreCompleto.trim();
  // Reemplazamos múltiples espacios por uno solo
  return limpio.replace(/\s+/g, ' ');
}

// Pruebas en consola:
console.log("Email limpio:", sanitizarEmail("   [email protected]  "));
// "[email protected]"

console.log("Nombre formateado:", formatearNombre("   María     Fernanda    López   "));
// "María Fernanda López"

🧩 Reto 2: El Buscador y Transformador de Catálogo (`filter` y `map`)

Objetivo: Filtrar productos por presupuesto y calcular sus precios con impuestos de forma declarativa.

Escribe en tu consola:

// 1. Base de datos en memoria
const productos = [
  { nombre: "Teclado Mecánico", precio: 80, categoria: "Tecnología" },
  { nombre: "Silla Ergonómica", precio: 250, categoria: "Oficina" },
  { nombre: "Mouse Pad Gamer", precio: 25, categoria: "Tecnología" },
  { nombre: "Monitor 4K", precio: 400, categoria: "Tecnología" },
  { nombre: "Lámpara de Escritorio", precio: 45, categoria: "Oficina" }
];

// 2. Filtramos solo los artículos de Tecnología que cuesten menos de $100
const ofertasTecnologia = productos.filter(item => {
  return item.categoria === "Tecnología" && item.precio < 100;
});

console.log("Artículos en oferta:", ofertasTecnologia);

// 3. Usamos map para generar una lista con el precio final (agregando 16% de IVA)
const listaConIva = productos.map(item => {
  return {
    articulo: item.nombre,
    precioFinal: item.precio * 1.16
  };
});

console.log("Catálogo con IVA incluido:", listaConIva);

🧩 Reto 3: El Escudo Protector de Cálculos con `try / catch`

Objetivo: Crear funciones matemáticas seguras que validen los tipos de datos y lancen errores personalizados con throw.

function divisionSegura(dividendo, divisor) {
  try {
    // Validamos que ambos sean números reales
    if (typeof dividendo !== "number" || typeof divisor !== "number") {
      throw new Error("Ambos argumentos deben ser números válidos.");
    }

    // Validamos la división entre cero
    if (divisor === 0) {
      throw new Error("No es posible dividir entre cero en números reales.");
    }

    const resultado = dividendo / divisor;
    return "Resultado exitoso: " + resultado;

  } catch (error) {
    return "❌ Error detectado: " + error.message;
  }
}

// Casos de prueba:
console.log(divisionSegura(100, 4));    // "Resultado exitoso: 25"
console.log(divisionSegura(50, 0));     // "❌ Error detectado: No es posible dividir entre cero..."
console.log(divisionSegura("100", 2));  // "❌ Error detectado: Ambos argumentos deben ser números válidos."

🧩 Reto 4: Mini-Buscador de Contactos en Tiempo Real

Objetivo: Construir un motor de búsqueda flexible insensible a mayúsculas/minúsculas.

const libretaContactos = [
  { nombre: "Carlos Slim", telefono: "555-1234", email: "[email protected]" },
  { nombre: "Diana Prince", telefono: "555-5678", email: "[email protected]" },
  { nombre: "Carlos Santana", telefono: "555-9012", email: "[email protected]" },
  { nombre: "Ana Laura Torres", telefono: "555-3456", email: "[email protected]" }
];

function buscarContacto(terminoBusqueda) {
  const terminoLimpio = terminoBusqueda.trim().toLowerCase();

  return libretaContactos.filter(contacto => {
    const nombreEnMinusculas = contacto.nombre.toLowerCase();
    const emailEnMinusculas = contacto.email.toLowerCase();

    return nombreEnMinusculas.includes(terminoLimpio) || emailEnMinusculas.includes(terminoLimpio);
  });
}

// Probamos el buscador:
console.log("Búsqueda de 'carlos':", buscarContacto("carlos"));
console.log("Búsqueda por correo 'hero':", buscarContacto("hero"));
console.log("Búsqueda inexistente 'roberto':", buscarContacto("roberto")); // []

🗣️ Fase 4: Exposición de Resultados, Debate y Debugging

En esta fase compartimos pantallas, analizamos el código de los estudiantes y desarmamos las trampas clásicas de JavaScript en vivo.

🐞 Las 4 Trampas Clásicas de la Sintaxis de JavaScript

1. `TypeError: Cannot read properties of undefined`

El error: Intentar leer usuario.direccion.calle cuando direccion no existe en el objeto.
Solución moderna: Usar el encadenamiento opcional (Optional Chaining): usuario?.direccion?.calle. Si no existe, devuelve undefined pacíficamente sin romper el programa.

2. Olvidar el `return` dentro de `map()` o `filter()`

El error: Escribir numeros.map(n => { n * 2 }) con llaves { } pero sin la palabra return.
Consecuencia: Obtendrás un arreglo lleno de [undefined, undefined, undefined].
Regla: Si abres llaves en una función flecha, el return es obligatorio. Si no usas llaves numeros.map(n => n * 2), el retorno es automático.

3. Mutación accidental con `sort()` o `splice()`

El error: Usar miArreglo.sort() creyendo que genera una copia.
Consecuencia: Modifica el arreglo original en la memoria.
Buena práctica: Si deseas ordenar sin alterar el original, crea una copia antes: [...miArreglo].sort().

4. Tragar errores en silencio (Empty Catch)

El error: Dejar el bloque catch (error) {} vacío sin registrar el fallo.
Consecuencia: El código falla pero nadie se entera de por qué, haciendo imposible la depuración. Registra siempre al menos un aviso con console.warn(error).

🏠 Fase 5: Definición de Práctica en Casa / Reto Semanal

Para afianzar el dominio de arreglos, objetos y manejo de errores, desarrollarás un analizador de datos comerciales.

🏆 Proyecto Semanal: “El Motor de Analíticas de Ventas del E-Commerce”

Descripción del Problema: Una tienda en línea te entrega un listado de transacciones registradas durante el fin de semana. Debes procesar la información y generar un informe gerencial estructurado.

Datos Iniciales:

const transacciones = [
  { id: "TX-101", cliente: "Sofía Gómez", monto: 1200, exitosa: true, categoria: "Electrónica" },
  { id: "TX-102", cliente: "Mateo Díaz", monto: 450, exitosa: false, categoria: "Hogar" },
  { id: "TX-103", cliente: "Valentina Vega", monto: 890, exitosa: true, categoria: "Electrónica" },
  { id: "TX-104", cliente: "Lucas Morales", monto: 150, exitosa: true, categoria: "Libros" },
  { id: "TX-105", cliente: "Camila Ortiz", monto: 3200, exitosa: true, categoria: "Electrónica" },
  { id: "TX-106", cliente: "Javier Ríos", monto: 95, exitosa: false, categoria: "Hogar" }
];

Especificaciones Técnicas del Script:

Envolver todo el proceso en un bloque try / catch para garantizar que ante cualquier dato dañado el programa informe el error sin detenerse.
Filtrar las ventas exitosas: Usa filter() para quedarte únicamente con las transacciones donde exitosa === true.
Extraer la lista de clientes compradores: Usa map() sobre las ventas exitosas para obtener un arreglo con solo los nombres de los clientes en mayúsculas ("SOFÍA GÓMEZ", etc.).
Calcular la recaudación total: Usa reduce() para sumar el monto de todas las ventas exitosas.
Filtrar ventas premium de Electrónica: Encuentra todas las ventas exitosas de la categoría "Electrónica" con monto superior a $1000.

Imprimir el Reporte Ejecutivo en Consola:

=============================================
📊 REPORTE DE ANALÍTICAS E-COMMERCE
=============================================
• Transacciones totales recibidas: 6
• Ventas exitosas concretadas: 4
• Clientes compradores: SOFÍA GÓMEZ, VALENTINA VEGA, LUCAS MORALES, CAMILA ORTIZ
• RECAUDACIÓN TOTAL ACUMULADA: $5,440.00
• Ventas Premium de Electrónica (> $1000): 2 transacciones
=============================================

📚 Recursos y Videos Recomendados

Para profundizar en la sintaxis moderna de JavaScript y buenas prácticas:

Métodos de Arreglos en JavaScript: map, filter y reduce Transformación, filtrado y reducción de colecciones de datos explicados visualmente.

Control de Flujo y Manejo de Errores (try...catch) Guía oficial en español sobre cómo capturar excepciones y gestionar try, catch, finally y throw.

Guía de Métodos del Objeto String Referencia completa de MDN sobre operaciones, formateo y búsqueda en cadenas de texto.

Una Reintroducción a JavaScript Moderno Recorrido exhaustivo por la sintaxis moderna de JavaScript (ES6+), operadores y estructuras.

🚀 Conclusión y Próximos Pasos

¡Felicidades por completar este gran recorrido por la sintaxis moderna de JavaScript! Ahora dominas la manipulación de textos, la tríada funcional de arreglos (map, filter, reduce), el modelado de objetos y el blindaje con try / catch.

En la próxima sesión exploraremos cómo organizar nuestro código a gran escala: Lección 4: Paradigmas (L4), donde aprenderemos sobre Programación Orientada a Objetos (POO), Programación Funcional y el fascinante mundo de la Asincronía con Promesas y async / await.