Fundamentos de JavaScript con ejemplos en vivo

Aprende los fundamentos clave de JavaScript que verás en cualquier etapa: variables, conversión de tipos, ciclos, funciones y hoisting. Con ejemplos prácticos y errores comunes, Leo y Juan David Castro muestran cómo pensar el código, detectar bugs típicos y escribir soluciones que realmente funcionan.

¿Qué aprenderás en el reto de 30 días de JavaScript?

Este reto dura seis semanas (con descanso sábado y domingo). Inicia con bases sólidas y avanza hacia temas más complejos, con sesiones en vivo, chat y ejercicios prácticos.

• Semana 1: funciones, loops, declarar, inicializar y hoisting.
• Flujo de trabajo: navegador en blanco + consola + editor; copias el código y ejecutas.
• Dinámica: preguntas en vivo y sección de Q&A.
• Ejercicio: dibujar un triángulo isósceles con bucles, sin métodos de arrays.
• Invitado: Juan David Castro comparte trucos y decisiones clave del lenguaje.

¿Cómo está pensada la práctica?

• Ejecuta fragmentos en la consola del navegador.
• Itera rápido: copia, pega, prueba y observa resultados.
• Anota los comportamientos raros para discutirlos.

¿Cómo entender variables y tipos en JavaScript sin errores?

La base es distinguir entre dos momentos: declarar e inicializar. Luego, aprender a convertir tipos correctamente con coerción y casteo.

¿Qué significa declarar e inicializar una variable?

• Declarar: informar al motor que la variable existe.
• Inicializar: asignar el primer valor.
• Atajo común: declarar e inicializar en la misma línea.

// Declaración
let variable1;

// Inicialización
variable1 = 'valor';

// Atajo: declaración + inicialización
let variable2 = 42;

Claves que se mencionan: usar let y const. Evitar var por temas de scope y hoisting.

¿Cómo funciona la coerción o el casteo en JavaScript?

• Con el operador + entre string y número, JavaScript hace coerción implícita y trata todo como texto.

const n1 = '12';
const n2 = 24;
const password = n1 + n2; // '1224'

• Para una suma numérica, realiza conversión explícita. Number es clara y directa.

const n1 = '35';
const n2 = 25;
const total = Number(n1) + n2; // 60 (number)

• Si usas template literals, puedes ejecutar primero la operación y luego convertir a string.

const n1 = 35;
const n2 = 25;
const password = `${n1 + n2}`; // '60' (string)

• Nota práctica: ambos términos, coerción y casteo, se usan para hablar de conversión de tipos. La discusión exacta de nombres varía, pero lo importante es distinguir entre implícito y explícito.

¿Comillas dobles, sencillas o comillas invertidas?

• Dobles y sencillas se comportan igual para strings.
• Con comillas invertidas (backticks) usas template literals y expresiones con ${ }.

const nombre = 'Leo';
const saludo = `Hola, ${nombre}!`; // Interpolación de variables

• Truco que funciona pero es feo para reviews: forzar texto sumando un string vacío.

const n = 60;
const comoTexto = '' + n; // '60' (string)

¿JavaScript es de tipado dinámico?

• Sí: tipado dinámico. El lenguaje infiere tipos en tiempo de ejecución.
• En lenguajes de tipado fuerte como TypeScript, Java, C#, C o C++, declaras tipos y las conversiones son explícitas.
• Beneficio del tipado fuerte: menos sorpresas en producción al compilar o verificar tipos.

¿Por qué los ciclos, las funciones y el hoisting importan?

Dominar estas tres piezas te ahorra tiempo, evita errores silenciosos y te da estructuras reutilizables.

¿Cómo se repite código con ciclos while y for?

• Un ciclo repite un bloque hasta que una condición deje de cumplirse.
• while significa “mientras”. Define cuándo se ejecuta, no cuándo termina.

let numerito = 0;
while (numerito <= 10) {
  console.log('mensaje ' + numerito);
  numerito += 1; // operador +=
}

• Desafío sugerido: traduce esto a la sintaxis de for.

¿Para qué sirven las funciones y qué retorna una función?

• Encapsulan responsabilidad única y hacen el código legible y reusable.
• return devuelve el valor principal.
• Si no retornas, el valor es undefined.

function declararInicializar() {
  let v = 'valor 1';
  v = 'valor 2';
  return v; // 'valor 2'
}

function sumarComoNumero() {
  const n1 = '35';
  const n2 = 25;
  return Number(n1) + n2; // 60
}

function imprimirMensajes() {
  let i = 0;
  while (i <= 10) {
    console.log('mensaje ' + i);
    i += 1;
  }
  // No return: devuelve undefined
}

• Organiza por temas y nombres claros para leer y mantener mejor.

¿Qué es el hoisting y por qué var se comporta distinto a let/const?

• Con var, JavaScript eleva la declaración antes de ejecutar el código. Resultado típico: undefined en vez de error.

console.log(diego); // undefined por hoisting
var diego;
diego = 'un profe muy chido';

• Con let y const, si accedes antes de declarar, obtienes ReferenceError.

console.log(leo); // ReferenceError
const leo = 'un profe muy chido';

• Idea clave: primero declara, luego usa y después inicializa. Evita sorpresas con var.
• Pregunta abierta que quedó planteada: ¿cómo aplica el hoisting a las funciones?

¿Te animas con el reto del triángulo isósceles usando while y sin métodos de arrays? Comparte tus dudas, tu enfoque y tu solución en los comentarios.