Atajos de JavaScript: una guía básica

Presentando su atención es una traducción de un artículo de Parathan Thiyagalingam publicado en medium.freecodecamp.org. ¿Quieres saber cómo funcionan los cierres de JavaScript? ¡Mira debajo del gato!


Foto Austin Distel con Unsplash

Un cierre es una combinación de todas las variables en el alcance en el momento en que se crea la función. Para usar el cierre, debe crear una función anidada, es decir, una función dentro de la función. La función interna tendrá acceso a variables en el ámbito de la función externa incluso después de que la función externa se complete. (Es el cierre el que proporciona este acceso). Cada vez que se crea una función, se crea el cierre.

Antes de comenzar a comprender el concepto de cierres, considere cuáles son las cadenas de alcance en JavaScript.

Como regla, hay dos tipos de áreas de visibilidad: global y local.

En JavaScript, una variable dentro de una función no es accesible externamente, a diferencia de, por ejemplo, las variables dentro de un bloque (en condiciones como if y while ).

En base a esto, una función en JavaScript tiene un alcance, pero un bloque no.

 var a = 10; function app(){ var b = 2; console.log(a); // 10 console.log(b); // 2 } console.log(b); // ReferenceError: b is not defined app(); 

Como ya sabemos, a es una variable global yb es local, es decir, solo la utiliza la función de la app . Fuera del ámbito local, no tenemos acceso a la variable local.

Cómo usar una función anidada (función dentro de una función)

 var a = 10; function app(){ var b = 2; var d = 3; function add(){ var c = a + b; } return add; } var x = app(); console.dir(x); 

En el ejemplo anterior, la app es la función principal, add es la función secundaria.

• En lugar de console.log, console.dir se usa para mostrar todas las propiedades del objeto seleccionado.
• La variable x se asigna a la función de la app , que luego devuelve la función de add . Esto le permite ver todas las propiedades del objeto de la función de add .

Si abre la consola en un navegador, encontrará el objeto Closure dentro de la matriz de datos Scopes .



Como la función interna add tiene acceso a las variables byd que pertenecen a la función externa, estas dos variables se agregarán al objeto Closure como referencia.
Considere otro ejemplo de cierre.

 var a = 10; var startFunc; function app(){ var b = 2; function add(){ var c = a + b; console.log(c); } startFunc = add(); } app(); // Invoke the app function startFunc; // as the app function invoked above will assign the add function to startFunc & console the value of c 

• A la función global startFunc asigna la función de add , que es un elemento secundario de la app función principal.
• Esto es posible solo después de llamar a la función de la aplicación. De lo contrario, la función startFunc se comportará como una variable global sin un valor asignado.

Cómo usar cierres en JavaScript

Muchos de nosotros, al usar cierres al escribir código, no entendemos completamente por qué lo hacen. JavaScript carece de los modificadores públicos , protegidos y privados que se encuentran en los lenguajes de programación orientados a objetos. Por lo tanto, para bloquear el acceso al espacio de nombres para el código externo, nos vemos obligados a recurrir a la ayuda de funciones.

Y como estamos hablando de funciones, la función llamada inmediatamente (IIFE) comienza inmediatamente después del anuncio. Ella ni siquiera necesita ser llamada.

La sintaxis IIFE se ve así:

 (function(){ //variables & scope that inside the function })(); 

Considere este ejemplo:

 var studnetEnrollment = (function () { //private variables which no one can change //except the function declared below. var count = 0; var prefix = "S"; // returning a named function expression function innerFunc() { count = count + 1; return prefix + count; }; return innerFunc; })(); var x = studnetEnrollment(); // S1 console.log(x); var y = studnetEnrollment(); // S2 console.log(y); 

count y prefix son dos variables privadas que no se pueden cambiar. El acceso a ellos está abierto solo para la función interna (en nuestro caso, esta es la función innerFunc ).

• La primera vez que se llama a la función studentEnrollment , la función studentEnrollment aumenta el valor de la variable count a 1.
• La segunda vez, el count aumenta de 1 a 2.
• Todo esto es posible solo a través del cierre.

Conclusión

Un cierre es un conjunto de variables de una función externa, debido a que el alcance de la función interna obtiene acceso a estas variables. Esto protege el espacio de nombres global.

La funcionalidad de cierre permite a los desarrolladores escribir código limpio, como en lenguajes de programación orientados a objetos, código en el que las variables globales y locales no se confunden.

---

Que tengas una buena codificación!