Ámbitos de Variables y Clausuras

Si no entiendes como trabajan los contextos en JavaScript puedes ir a este post antes de comenzar y luego vuelves a este, ya que es requerido para un buen entendimiento de los ámbitos.

Ya hemos visto en posts pasados como se declaran variables, como accedemos y reasignamos un nuevo valor, pero las variables van más alla de solo almacenar valores de estado en el programa. Bien, ahora que son los Ámbitos (scopes en ingles)? un ámbito es el acceso a una variable desde la parte del programa donde fue declarada, se puede decir que es un conjunto de reglas entre el compilador y el motor de JavaScript para que los ámbitos de las variables puedan ser encontradas y ejecutadas, existen diferentes reglas para manipular los ámbitos que estare describiendo en este post.

Ámbito Léxico

El ámbito léxico es cuando se declara una variable en funciones anidadas, a esto también se les llaman Clausuras (Closures en ingles). Esto significa que una función interna consigue el ámbito de una función padre, veamos este ejemplo:

Bien, el ejemplo es muy sencillo, primero se declara una variable de ámbito global, estas variables globales se declaran por encima de cualquier función u objeto para acceder a desde cualquier ámbito, luego declaramos un función padre() y dentro de esta función declaramos una función interna(), esta función interna toma dos variables para el alert() que son frase y nombre, la función interna() la llamamos en el ámbito de la función padre() luego de que esta es llamada se muestra el alert() con “Mi nombre es: Jose”, realmente que paso aca? la función interna() tiene acceso al ámbito global y toma la variable global nombre y también tiene acceso al ámbito de la función padre() y toma la variable frase y asi el alert() consigue estas dos variables para mostrarlas en la ventana.

Las variables globales también se pueden declarar con el objeto window, window.nombre = ‘Jose’; es igual que var nombre = ‘Jose’;.

Ámbitos Desde funciones

Como vimos en el ejemplo anterior, el ámbito de variables son ciertas reglas aunque muy dinamicas y flexibles en JavaScript, vamos a ver este simple ejemplo:

todas la variables declaradas dentro de una función existen hasta el final de esta, esto significa que las variables toman el ámbito desde funciones, podemos imaginar que un ámbito es como una burbuja en cada función, estas variables declaradas dentro de una función se les llama variables locales entonces en el ejemplo de arriba las variables x y edad son variables locales de la función edadFn().

Variables Elevadas

Una variable elevada es cuando se declara en un ámbito desde funciónes como en el ejemplo anterior pero la declaramos sin valor y en el inicio de la función, estas variables le vamos asignando o reasignando valor en todo el ámbito de la función donde es elevada, veamos un ejemplo:

simple, declaramos la variable edad al principio de la función luego le asignamos un valor y la mostramos con un alert() y asi podriamos reasignarle nuevos valores dependiendo de nuestras necesidades en el programa.

Clausuras

una Clausura (Closure en ingles) es cuando una función es capaz de acceder a su ámbito léxico incluso hasta cuando su ejecución pasa fuera de su ámbito léxico. El primer ejemplo Ámbito Léxico se puede decir que es una Clausura pero que tal si queremos un nuevo ámbito de variable para la función interna, una función no puede bloquear el ámbito de sus variables y para esto usamos la función IIFE (Immediately Invoked Function Expression) pronunciado “iffy” y declarada de este forma:

la función IIFE bloquea el ámbito y crea uno propio e inicializa inmediatamente, ya que vimos un ejemplo de una Clausura en el primer tema, voy a tratar otro buen uso para una Clausura y es emular métodos privados ya que JavaScript no cuenta con una declaración explícita para métodos o variables privadas, aqui un ejemplo para entender como trabaja esto:

en este básico ejemplo usamos el famoso Patrón de Módulo (Module Pattern en ingles) este Patrón consta de una variable que su valor es una función IIFE para darle su propio entorno en este módulo se encuentran dos variables y un método privado, dentro del return esta un método público que toma el método privado pokedex() y lo ejecuta y este método accede al ámbito léxico de las variables, en otros lenguajes esto se conoce como una Interface, esto significa que no podemos acceder a la variable pokemon, tipo ni al método pokedex() como vemos en el ejemplo dispara un Uncaught TypeError si intentamos acceder a un método privado e igual para las variables.

Conclusión

Genial, ya con esto estaras consciente de lo que son los Ámbitos de Variables y Clausuras, en otros lenguajes de programación los ámbitos no son muy dinámicos y flexibles como en JavaScript y esto lo hace un poco confuso de entender, en este post vimos desde los tipos de ámbitos hasta como usar el Patrón de Módulo con la función IIFE y proteger nuestro ámbito para acceder a métodos y variables.