Qué son las clausuras de JavaScript y cómo utilizarlas en React

JavaScript es uno de los lenguajes de programación más populares entre los desarrolladores, pero esto no significa que es uno de los más sencillo de dominar. Entre sus distintos conceptos y funciones están las clausuras, unas que hasta un desarrollador senior puede tener problemas dominando.

¿Qué son las clausuras en JavaScript?

Su definición oficial nos dice "una clausura 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 de la clausura". Explicándolo de otra manera, con las clausuras en JavaScript se logra que una función interna tenga acceso al alcance de una función externa.

Previo a ver algunos ejemplos de clausuras en JavaScript, debemos comprender un poco lo que es el alcance léxico. Este es la memoria local junto con su entorno padre, ejemplo que vemos en el siguiente código, donde te invitamos a adivinar el resultado:

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

El resultado sería 9, 10, 9. La función interna tiene acceso a las variables de su padre, la función externa (). Por tanto, la función inner () puede acceder a la variable a. La función inner () también puede acceder a la variable y debido al concepto de cadena de alcance.

Clausura en JavaScript: ejemplos

Esto es un ejemplo de una clausura en JavaScriptt, estas no son más que una función y su entorno léxico: 

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

Otro ejemplo de clausura que podemos considerar es uno donde tres funciones se aniden una dentro de la otra. 

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

La importance de las clausuras en JavaScript

No solo para JavaScript, las clausuras son muy importantes en cualquier lenguaje de programación, utilizadas en varios escenarios donde puede crear variables en su ámbito privado o combinar funciones.

Clausuras en React

Un código clausura en React se vería de esta manera:

function App() {
  
    const [state, toggle] = useState(0);
  
    useEffect(()=>{
    
    setInterval(()=>{
      console.log(`state ${state}`);
    },3000)
  
    },[])
    
    return (       <div>       
            <h2>{`${state}`}</h2>       
           <button onClick={() => { toggle(state+1)                  }}>Increase</button>
                  </div>
)
}

Puedes observar cómo el registro permanece igual en todo momento. Nuevamente, el comportamiento se puede atribuir a las clausuras. SetInterval ha capturado el estado anterior (0). Por lo tanto, es una clausura obsoleta.

En Rootstack, tenemos un equipo de developers expertos en JavaScript y React quienes con su talento han dado solución a los problemas tecnológicos de nuestros clientes regionales e internacionales. Tu puedes formar parte de este equipo, haz click aquí y comienza a forjar tu carrera profesional.

Te recomendamos en video