¿Qué son los cierres de JavaScript y cómo se escriben?

JavaScript es uno de los lenguajes de programación más difíciles de dominar. A veces, incluso los desarrolladores senior no pueden predecir el resultado del código que escribieron. Uno de los conceptos más confusos en JavaScript son los cierres. Los principiantes generalmente se equivocan con el concepto, no se preocupe. Este artículo lo guiará lentamente a través de los ejemplos básicos para ayudarlo a comprender mejor los cierres. Empecemos.

¿Qué son los cierres?

Un cierre es una estructura de una función y su entorno léxico, incluidas las variables del alcance de la función en el momento de la creación del cierre. En términos más simples, considere una función externa y una función interna. La función interna tendrá acceso al alcance de la función externa.

Antes de ver algunos ejemplos de cierre de JavaScript, deberá comprender el alcance léxico.

¿Qué es un entorno léxico?

El entorno léxico es la memoria local junto con su entorno padre. Consulte el ejemplo que se muestra a continuación y adivine el resultado del siguiente código:

function exterior () { 
 sea ​​a = 10;
 console.log (y);
 interno();
 function inner () {
 console.log (a);
 console.log (y);
 }
}
sea ​​y = 9;
exterior();

La salida será 9, 10, 9. La función interna tiene acceso a las variables de su padre, el exterior() función. Por lo tanto, la interno() la función puede acceder variable a. El interno() La función también puede acceder variable y debido al concepto de cadena de alcance.

El padre de la función externa es global y el padre de la interno() la función es la exterior() función. Por lo tanto, la interno() La función tiene acceso a las variables de sus padres. Si intenta acceder a la variable a en el ámbito global, mostrará un error. Por lo tanto, puede decir que el interno() la función está léxica dentro de la exterior() función, y el padre léxico de la exterior() la función es global.

Explicación de ejemplos de cierre de JavaScript

Como ha aprendido sobre el entorno léxico, puede adivinar fácilmente el resultado del siguiente código:

función a () {
 sea ​​x = 10;
 función b () {
 console.log (x);
 }
 B();
}
a();

La salida es 10. Si bien es posible que no lo adivine a primera vista, este es un ejemplo de cierre en JavaScript. Los cierres no son más que una función y su entorno léxico.

Consideremos un ejemplo donde hay tres funciones anidadas una dentro de la otra:

función a () { 
 sea ​​x = 10;
 función b () { 
 función c () {
 función d () {
 console.log (x);
 }
 D();
 }
 C();
 }
 B();
}
a();

¿Seguirá llamándose cierre? La respuesta es sí. Una vez más, una clausura es una función con su padre léxico. El padre léxico de la función D() es C(), y debido al concepto de cadena de alcance, función D() tiene acceso a todas las variables de las funciones externas y las globales.

Eche un vistazo a otro ejemplo interesante:

función x () {
 sea ​​a = 9;
 función de retorno y () {
 console.log (a); 
 }
}
sea ​​b = x ();

Puede devolver una función dentro de una función, asignar una función a una variable y pasar una función dentro de una función en JavaScript. Ésta es la belleza del lenguaje. ¿Puede adivinar cuál será la salida si imprime variable B? Imprimirá la función y (). La función X() devuelve una función y (). Por tanto, la variable B almacena una función. Ahora, ¿puedes adivinar qué pasará si llamas a variable B? Imprime el valor de la variable a: 9.

También puede lograr la ocultación de datos mediante cierres. Para una mejor comprensión, considere un ejemplo con un botón que tiene una identificación llamada "botón" en el navegador. Adjuntemos un detector de eventos de clic.

Ahora debe calcular la cantidad de veces que se hace clic en el botón. Hay dos formas de hacerlo.

1. Cree un recuento de variables globales e increméntelo con un clic. Pero este método tiene un defecto. Es fácil realizar modificaciones en las variables globales porque son fácilmente accesibles.

   Haz click en mi
   
   

2. Podemos lograr la ocultación de datos mediante el uso de cierres. Puedes envolver todo addEventListener () función dentro de una función. Hace un cierre. Y después de crear un cierre, puede crear un cuenta variable e incrementa su valor al hacer clic. Al usar este método, la variable permanecerá en el alcance funcionaly no se pueden realizar modificaciones.

   Haz click en mi
   
   

Relacionado: El héroe oculto de los sitios web: comprensión del DOM

¿Por qué son importantes los cierres?

Los cierres son muy importantes no solo cuando se trata de JavaScript, sino también en otros lenguajes de programación. Son útiles en muchos escenarios donde puede crear variables en su ámbito privado o combinar funciones, entre otros casos.

Considere este ejemplo de composición de funciones:

const multiplicar = (a, b) => a * b;
const multiplyBy2 = x => multiplicar (10, x);
console.log (multiplyBy2 (9));

Podemos implementar el mismo ejemplo usando cierres:

const multiplicar = función (a) {
 función de retorno (b) {
 devolver a * b
 }
}
const multiplyBy2 = multiplicar (2);
console.log (multiplyBy2 (10))

Las funciones pueden usar cierres en los siguientes escenarios:

1. Para implementar la función de curado
2. Para ser utilizado para ocultar datos.
3. Para usar con los oyentes de eventos
4. Para ser utilizado en el método setTimeout ()

No debe usar cierres innecesariamente

Se recomienda evitar cierres a menos que sea realmente necesario porque pueden reducir el rendimiento de su aplicación. El uso del cierre costará mucha memoria y, si los cierres no se manejan correctamente, puede provocar pérdidas de memoria.

El recolector de basura de JavaScript no liberará las variables cerradas. Cuando usa variables dentro de cierres, el recolector de basura no libera la memoria porque el navegador siente que las variables todavía están en uso. Por lo tanto, estas variables consumen memoria y reducen el rendimiento de la aplicación.

Aquí hay un ejemplo que muestra cómo las variables dentro de los cierres no se recolectarán como basura.

 función f () {
 constante x = 3;
 return function inner () {
 console.log (x);
 }
 }
 F()();

El variable x aquí consume memoria a pesar de que no se usa con frecuencia. El recolector de basura no podrá liberar esta memoria porque está dentro del cierre.

JavaScript es infinito

Dominar JavaScript es una tarea interminable, ya que hay muchos conceptos y marcos que no suelen ser explorados por los propios desarrolladores experimentados. Puede mejorar significativamente su manejo de JavaScript aprendiendo los conceptos básicos y practicándolos con frecuencia. Iteradores y generadores son algunos de los conceptos que las entrevistas plantean durante las entrevistas de JavaScript.

Introducción a los iteradores y generadores en JavaScript

Familiarízate con los métodos de iterador y generador en JS.

Leer siguiente

Sobre el Autor