Domina las variables en JavaScript desde el primer día: qué son, cómo declararlas con var, let y const, y cómo evitar errores comunes como el hoisting. Con una metáfora sencilla y pasos prácticos, entenderás cómo escribir código confiable y mantener buenas prácticas desde tu workspace.
¿Qué es una variable en JavaScript y cómo entenderla con LEGO?
Una variable es un espacio de memoria donde almacenamos valores. Imagina una caja LEGO: la caja es la variable, la etiqueta o nombre clasifica su contenido y la forma/tamaño de las piezas representa el tipo de dato que guardas.
- Una variable guarda un valor en memoria.
- El nombre etiqueta su propósito.
- El tipo de dato define su forma de uso.
- Puedes tener varias cajas/variables y acceder según la necesidad.
¿Por qué importa el tipo de dato?
- Aclara qué esperas guardar: número, string o booleano.
- Evita confusiones al usarlas en operaciones.
- Mejora la legibilidad del programa.
¿Cómo declarar variables con var, let y const en JavaScript?
Existen tres formas de declarar variables. var es la más antigua y conviene evitarla por su facilidad para redeclarar y generar errores. Desde ECMAScript 2015, let y const ofrecen un manejo más seguro.
- Recomendación: usa const por defecto. Usa let solo cuando el valor cambie. Evita var.
¿Qué pasa al usar var y reasignar valores?
// Evitar var por comportamientos inseguros
var bloquesRojos = true; // booleano
var bloquesRojos = 5; // redeclaración y cambio de tipo
console.log(bloquesRojos); // 5
- var permite redeclarar y reasignar sin restricciones.
- El resultado imprime el último valor asignado.
¿Cómo funciona let y por qué es más seguro?
let contador = 0;
let mensaje = 'hola'; // string
// let contador = 5; // Error: no puedes redeclarar la misma variable.
contador = 5; // Correcto: puedes reasignar.
console.log(contador); // 5
- let no permite redeclarar la misma variable.
- let sí permite reasignar su valor.
¿Qué garantiza const y cuándo usarla?
const PI = 3.14159;
// PI = 4; // Error: no puedes reasignar una constante.
// const PI = 42; // Error: no puedes redeclararla.
console.log(PI); // 3.14159
- const no permite redeclarar ni reasignar.
- Ideal para valores que no cambian.
¿Cómo preparar tu entorno de trabajo con Visual Studio Code?
- Abre la terminal y crea tu carpeta del proyecto.
- Ejecuta: git init para iniciar el repositorio.
- Ejecuta: npm init --yes para crear la plantilla base.
- Abre el editor con: code . en Visual Studio Code.
- Crea la carpeta SRC y el archivo 01-vars.js.
- Usa la extensión para “Ejecutar código” y ver resultados en el editor.
¿Qué es el hoisting en JavaScript y cómo te afecta?
El hoisting es cómo el motor de JavaScript “eleva” declaraciones con var, asignándoles undefined antes de ejecutar el código. Esto provoca salidas inesperadas si imprimes una variable antes de asignarla.
console.log(nombre); // undefined por hoisting
var nombre = 'Oscar';
console.log(nombre); // 'Oscar'
- Primero imprime undefined porque la declaración con var se eleva sin su valor.
- Luego imprime el valor asignado.
- Evita acceder a variables antes de asignarlas.
- Usa let y const: no presentan estos comportamientos y fomentan código claro.
¿Te animas a practicar? Revisa el reto en recursos y comparte tu solución en los comentarios.
