Variables: let, const, var y scope
Declare variables con let, const y var. Comprenda el scope de bloque y de función, y por qué const se prefiere para la mayoría de los valores.
Variables: let, const, var y scope es una lección gratuita de Frontend Academy en CoddyKit. Esta es la lección 1 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Frontend Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Frontend Academy incluye 4 lecciones en total.
¿Por qué usar variables?
Las variables almacenan valores para que pueda reutilizarlos, actualizarlos y asignarles nombres significativos. JavaScript ofrece tres formas de declarar variables: var (antigua), let (moderna y reasignable) y const (moderna, con vinculación constante).
const: la opción predeterminada
Declare con const cuando no vaya a reasignar la variable. Esto expresa su intención y evita reasignaciones accidentales. Nota: const impide cambiar la vinculación, pero no hace que los objetos o arrays sean inmutables.
const name = 'Alice'; // can't reassign
const PI = 3.14159;
const user = { age: 25 }; // object is mutable
user.age = 26; // OK — property change, not rebinding
// user = {}; // Error — can't reassign constlet: cuando necesita reasignar
Use let cuando el valor vaya a cambiar: contadores de bucles, sumas acumuladas o variables de estado. let tiene ámbito de bloque: solo existe dentro del { } envolvente más cercano.
let score = 0;
score = score + 10; // OK
for (let i = 0; i < 3; i++) {
console.log(i); // 0, 1, 2
}
// console.log(i); // ReferenceError — i is out of scopevar: la declaración heredada
var tiene ámbito de función (no de bloque) y se eleva al principio de su función. Esto provoca errores sutiles. Evite var en el JavaScript moderno; prefiera const y let.
function example() {
if (true) {
var x = 5; // function-scoped, not block-scoped
}
console.log(x); // 5 — still accessible here!
}Ámbito: dónde viven las variables
Ámbito global: se declara fuera de cualquier función o bloque y es accesible desde cualquier lugar. Ámbito de función: se declara dentro de una función y solo es accesible dentro de esa función. Ámbito de bloque: let/const dentro de { }, solo es accesible dentro de ese bloque.
Elevación
La elevación mueve las declaraciones al principio de su ámbito durante la compilación. Las declaraciones var se elevan y se inicializan con undefined. let y const se elevan, pero no se inicializan; acceder a ellas antes de la declaración provoca un error de zona muerta temporal.
Nombres de variables
Use nombres descriptivos. Use camelCase para variables y funciones (userName), UPPER_SNAKE_CASE para constantes (MAX_RETRIES) y PascalCase para clases (UserProfile). Evite las letras individuales, excepto en bucles (i, j).
Declarar varias variables
Puede declarar varias variables en una sola instrucción, pero normalmente es más claro usar una declaración por variable. Evite la forma separada por comas, ya que puede ocultar el ámbito y los tipos.
// Less clear:
let a = 1, b = 2, c = 3;
// Preferred:
const MAX = 10;
let count = 0;
const label = 'Score';La zona muerta temporal (TDZ)
Acceder a una variable let o const antes de su declaración en el código produce un ReferenceError. Esta zona entre el inicio del bloque y la declaración se denomina TDZ.
console.log(value); // ReferenceError: Cannot access 'value' before initialization
const value = 42;const con arrays y objetos
const impide reasignar la variable, pero el valor al que hace referencia aún puede modificarse. Use Object.freeze() para crear un objeto inmutable superficial o patrones inmutables para lograr una inmutabilidad profunda.
const items = [1, 2, 3];
items.push(4); // OK — mutates the array
items = []; // Error — can't reassign const
const config = Object.freeze({ maxAge: 30 });
config.maxAge = 99; // Silently fails in non-strict mode¿Por qué preferir const a let?
Usar const de forma predeterminada facilita comprender el código: sabe que la variable no se reasignará en otra parte. Cambie a let solo cuando realmente necesite reasignarla. Este hábito reduce los errores y mejora la legibilidad.
Comprobación rápida
¿Cuál es la diferencia clave entre let y var?
Repaso: variables y ámbito
Prefiera const para los valores que no se reasignarán. Use let para los valores mutables. Evite var. El ámbito de bloque (let/const) mantiene las variables contenidas. En la elevación, var se inicializa con undefined, mientras que let/const producen un error de TDZ si se accede a ellas demasiado pronto.
Preguntas frecuentes
¿La lección «Variables: let, const, var y scope» es gratis?
Sí — el texto completo de «Variables: let, const, var y scope» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Frontend Academy, actualiza a CoddyKit PRO. El curso de Frontend Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Variables: let, const, var y scope»?
Declare variables con let, const y var. Comprenda el scope de bloque y de función, y por qué const se prefiere para la mayoría de los valores. Practicas Frontend Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Frontend Academy?
No se requiere experiencia previa. Frontend Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 4.
¿Cuánto tiempo toma la lección «Variables: let, const, var y scope»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Frontend Academy?
Sí. Cada lección de Frontend Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Variables: let, const, var y scope
- Tipos de datos: string, number, boolean, null y undefined
- Funciones: declaraciones, expresiones y arrow functions
- Flujo de control: if, else, switch, for y while