Capítulo 1 Tres claves del reino

Timothy miraba la consola del navegador completamente desconcertado. Había escrito JavaScript que parecía simple pero el resultado no tenía sentido. Por ejemplo var x = 5; if (true) { var x = 10; } console.log(x); // 10 ¿por qué? y al probar let obtenía un comportamiento distinto let y = 5; if (true) { let y = 10; } console.log(y); // 5

Lo que Timothy había descubierto es una de las diferencias más importantes y a la vez más confusas del lenguaje variable scoping o alcance de variables. Para entenderlo hay que mirar la historia de JavaScript y cómo evolucionó sin romper la compatibilidad con código antiguo.

var fue la única forma de declarar variables en JavaScript desde 1995 y tiene un rasgo particular var es function scoped es decir su alcance está delimitado por funciones y no por bloques como if o loops Esto provoca que una declaración dentro de un bloque sea igualmente visible en toda la función

Ejemplo clásico con var function greet(name) { if (name) { var message = Hello + name; } console.log(message); // imprime message } greet(Alice); En este caso message existe en toda la función porque var fue elevado o hoisted al inicio de la función

En 2015 llegó ES6 y trajo let y const que introducen alcance por bloque block scope Con let una variable declarada dentro de un bloque solo existe dentro de ese bloque por ejemplo function greet(name) { if (name) { let message = Hello + name; } console.log(message); // ReferenceError message no está definida }

Resumen rápido de las tres formas de declarar variables

var permite redeclarar y reasignar var x = 5; var x = 10; x = 15; console.log(x); // 15 Es flexible pero peligroso en proyectos grandes porque puedes sobrescribir variables accidentalmente

let declara una vez y permite reasignar let y = 5; // let y = 10; // no permitido y = 15; console.log(y); // 15 Es la opción correcta cuando el valor cambia con el tiempo

const declara una constante que no puede reasignarse const z = 5; // z = 15; // Error console.log(z); // 5 const protege el enlace no el contenido de los objetos o arrays

Hoisting y zona muerta temporal La particularidad de var es que las declaraciones se elevan al inicio de la función pero las asignaciones se quedan donde están Por eso console.log(typeof x) puede mostrar undefined en vez de lanzar un error porque x existe pero no tiene valor aun Por el contrario let y const también se elevan al inicio del bloque pero permanecen en una Zona Muerta Temporal hasta que se ejecuta la línea de declaración y si se accede antes se lanza ReferenceError

Ejemplo de hoisting con var function example() { console.log(typeof x); // undefined if (true) { var x = 5; } console.log(x); // 5 } example(); Esto equivale internamente a function example() { var x; console.log(typeof x); if (true) { x = 5; } console.log(x); }

Patrones prácticos Contador clásico con var función createCounter var count = 0 return function() { count = count + 1 console.log(count) } Este patrón funciona pero con var es fácil que count sea sobrescrito desde otro sitio

Mejor con let función createCounter let count = 0 return function() { count = count + 1 console.log(count) } const counter = createCounter(); counter(); // 1 counter(); // 2

const protege la referencia pero no impide mutaciones internas const arr = [1,2,3]; arr.push(4); // permitido arr = [5,6]; // error Por eso const es ideal para referencias que no deben cambiar pero cuyo contenido sí puede mutar

Encapsulación y diseño Un patrón habitual para mantener el contador seguro es devolver un objeto con métodos que acceden a una variable cerrada por cierre léxico function createCounter() { let count = 0 return { increment() { count = count + 1 }, get() { return count } } } const c = createCounter(); c.increment(); c.increment(); console.log(c.get()); // 2 Aquí la variable count está oculta y solo se puede manipular mediante los métodos expuestos

Regla de oro Usa const por defecto Declara todo con const salvo que sepas que necesitarás reasignar más tarde Si necesitas cambiar el valor usa let Evita var en código nuevo var solo existe por compatibilidad con código legado

Conceptos clave var es function scoped y sus declaraciones son hoisted let es block scoped y no permite acceso antes de la declaración const impide la reasignación pero no la mutación interna La Zona Muerta Temporal evita lecturas antes de declarar y ayuda a detectar errores temprano

Aplicaciones prácticas y Q2BSTUDIO En Q2BSTUDIO desarrollamos software a medida y aplicaciones a medida aplicando buenas prácticas como el uso responsable de let y const para reducir bugs y mejorar mantenibilidad. Si necesitas crear una solución personalizada visita nuestra página de desarrollo de aplicaciones y software a medida. Además ofrecemos servicios de inteligencia artificial para empresas que incluyen agentes IA y soluciones a medida para automatizar procesos conoce nuestras capacidades en servicios de inteligencia artificial.

También somos especialistas en ciberseguridad y pentesting, servicios cloud aws y azure, y servicios de inteligencia de negocio como Power BI. Palabras clave relevantes que trabajamos a diario aplicaciones a medida software a medida inteligencia artificial ciberseguridad servicios cloud aws y azure servicios inteligencia de negocio ia para empresas agentes IA power bi

Preguntas para reflexionar Por qué JavaScript eligió inicialmente variabes con alcance de función en lugar de alcance de bloque Cuando elegirías let en vez de const y por qué En qué se diferencia no poder reasignar de ser inmutable Cómo cambia el hoisting la forma en que declaras variables En el patrón del contador por qué el objeto con métodos proporciona mejor encapsulación

Sobre la serie La vida secreta de JavaScript explica cómo funciona JavaScript realmente a través de conversaciones y ejemplos prácticos. Si quieres profundizar en temas como this, promesas o cierres suscríbete a nuestras publicaciones y consulta nuestros servicios profesionales en Q2BSTUDIO para llevar tu proyecto al siguiente nivel