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

JavaScript es uno de los lenguajes de programación más complicados de dominar. A veces, incluso los desarrolladores senior no pueden predecir la salida del código que han escrito. Uno de los conceptos más confusos en JavaScript son los cierres. Los principiantes a menudo se topan 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. Vamos a empezar.

¿Qué son los cierres?

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

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 proporciona a continuación y adivine el resultado del siguiente código:

function outer(){ 
let a = 10;
console.log(y);
inner();
function inner(){
console.log(a);
console.log(y);
}
}
let y = 9;
outer();

La salida será 9, 10, 9. La función incorporada tiene acceso a las variables de su padre, el exterior() ocupación. En consecuencia, el 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() ocupación. En consecuencia, el interno() La función tiene acceso a las variables de sus padres. Si intentas acceder a la variable una en el ámbito global, mostrará un error. Entonces puedes 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 aprendió sobre el entorno léxico, puede adivinar fácilmente el resultado del siguiente código:

function a(){
let x = 10;
function b(){
console.log(x);
}
b();
}
a();

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

Consideremos un ejemplo donde hay tres funciones anidadas entre sí:

function a(){ 
let x = 10;
function b(){ 
function c(){
function 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 léxico padre 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 funciones externas y globales.

Eche un vistazo a otro ejemplo interesante:

function x(){
let a = 9;
return function y(){
console.log(a); 
}
}
let 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. Ésa es la belleza del lenguaje. ¿Puedes adivinar cuál será el resultado si imprimes la 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 la variable B? Imprime el valor de la variable una: 9.

También puede ocultar 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 maneras de hacer esto.

1. Cree un recuento de variables globales y auméntelo al hacer clic. Pero este método tiene un defecto. Es fácil realizar modificaciones a las variables globales porque son fácilmente accesibles.<button id="button">Click me</button>
<script>
let count = 0;
const button = document.getElementById("button");button.addEventListener("click", ()=>{
count++;
console.log(count);
})
</script>
2. Podemos lograr la ocultación de datos mediante cierres. Puedes envolver todo addEventListener () función dentro de una función. Esto hace un cierre. Y después de crear un cierre, puede crear un cuenta variable e incrementa su valor al hacer clic. Con este método, la variable permanecerá en el ámbito funcional y no se podrán realizar modificaciones.<button id="button">Click me</button>
<script>
const button = document.getElementById("button");
function countOnClick(){
let count = 0;
button.addEventListener("click", ()=>{
count++;
console.log(count);
})
}
countOnClick();
</script>

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 se pueden crear variables en su ámbito privado o combinar funciones, entre otros casos.

Considere este ejemplo de composición de roles:

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

Podemos implementar el mismo ejemplo usando cierres:

const multiply = function(a){
return function (b){
return a*b
}
}
const multiplyBy2 = multiply(2);
console.log(multiplyBy2(10))

Los roles pueden usar cierres en los siguientes escenarios:

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

No debe utilizar candados innecesariamente.

Es una buena idea evitar cierres a menos que sea realmente necesario, ya que pueden ralentizar 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 JavaScript no publicará las variables cerradas. Cuando usa variables dentro de los cierres, el recolector de basura no libera 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 serán recolectadas como basura.

 function f(){
const x = 3;
return function inner(){
console.log(x);
}
}
f()();

EL variable x aquí consume memoria, aunque no se usa muy a menudo. El recolector de basura no podrá liberar esta memoria porque está dentro de la cerradura.

JavaScript es infinito

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