Ámbito de variables en JavaScript (const, let, var)

Author
Por Darío Rivera
Publicado el en Javascript

Hay una gran diferencia en el ámbito de las variables declaradas con let, var y const. En nuestro artículo Declaración de Variables con JavaScript vimos en detalle cómo declarar cada una de las variables con estas palabras reservadas. En el presente artículo abordaremos más a detalle el scope o ámbito que conlleva cada una de estas declaraciones.

Bajo la premisa de que cualquier declaración de variable tiene su scope dentro del bloque o función en donde fue declarada, la siguiente tabla muestra que las variables declaradas con var son las únicas que salen del scope del bloque en donde se declararon.

Fuera de Bloque Fuera de Función
let
const
var X

Ámbito fuera de un bloque

Las variables definidas con let están disponibles solamente dentro del bloque javascript en el cual se crearon. Veamos un ejemplo sencillo de una definición dentro de un bloque de decisión.

if (true) {
   let message = 'All right';
} else {
   let message = 'Something looks wrong';
}

console.log(message); // Uncaught ReferenceError: ...

Como puedes ver la variable message no está definida al momento que queremos imprimir su valor debido a que fue creada dentro del bloque if{}. En este caso el intérprete arroja una excepción. Dejando claro esto, veamos el siguiente ejemplo en donde es bastante común su uso.

for (let i=0; i<3; i++){
   console.log(i); // 0, 1, 2
}

console.log(i); // Uncaught ReferenceError: ...

Al ejecutar el mismo ejemplo utilizando var vemos que la variable queda definida después del ciclo.

for (var i=0; i<3; i++){
   console.log(i); // 0, 1, 2
}

console.log(i); // 3

Esto por un lado indica que las variables declaradas dentro de la condición for se comportan como si fueran en bloque. Por otro lado, nos dice que una variable declarada con var "sale" del bloque en cuestión y queda disponible para su uso. Ahora veamos qué sucede con respecto a const.

if (true) {
   const message = 'All right';
} else {
   const message = 'Something looks wrong';
}

console.log(message); // Uncaught ReferenceError: ...

Esto indica que el scope de const es de bloque al igual que let.

Ámbito dentro de una función

El comportamiento de varlet y const es el mismo dentro del scope de una función.

function myFunction(){
   let letVariable = "Hola";
   var varVariable = "mundo!";
   const constVariable = "World";

   console.log(letVariable); // 'Hola'
   console.log(varVariable); // 'mundo!'
   console.log(constVariable); // 'World'
}

console.log(letVariable); // undefined
console.log(varVariable); // undefined
console.log(constVariable); // undefined

Acerca de Darío Rivera

Author

Application Architect at Elentra Corp . Quality developer and passionate learner with 10+ years of experience in web technologies. Creator of EasyHttp , an standard way to consume HTTP Clients.

LinkedIn Twitter Instagram

Sólo aquellos que han alcanzado el éxito saben que siempre estuvo a un paso del momento en que pensaron renunciar.