Ámbito de variables en JavaScript

Author
By Darío Rivera
Posted on 2020-03-11 in 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.

Ámbito dentro 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

Si te ha gustado este artículo puedes invitarme a tomar una taza de café

Acerca de Darío Rivera

Author

Ingeniero de desarrollo en PlacetoPay , Medellín. Darío ha trabajado por más de 6 años en lenguajes de programación web especialmente en PHP. Creador del microframework DronePHP basado en Zend y Laravel.

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