DEV Community

loading...

Qué son los Closures en Javascript

nahuelsegovia profile image Nahuel Segovia Updated on ・2 min read

Una de las cosas complicadas al empezar con Javascript es entender como funcionan los Closures, o al menos saber identificarlos, porque como ya habrán escuchado en videos o tutoriales, los usamos varias veces sin darnos cuenta.

Pero antes de adentrarnos en el código vamos a hablar de algunos temas importantes:

Contexto de ejecución

En resumidas cuentas, es un lugar en donde se guardan 3 cosas importantes:

  • El valor de this
  • Lexical Environment
  • Variable Environment

Pero estas dos últimas cosas son practicamente lo mismo, así que vamos a unirlos y llamarlo Lexical Environment.

En Lexical Enviroenment almacenamos nuestras variables con sus nombres y sus respectivos valores, el mismo caso es para las funciones, así que si tenemos el siguiente código:

function nombre() {
    let a = 10;
    function imprimir() {
      console.log(a)
    }
  }
  foo()
Enter fullscreen mode Exit fullscreen mode

Nuestro contexto de ejecución se vería algo así:

execution_environment: {
  LexicalEnvironment: {
    a: 10,
    imprimir: function() {}
  },
  ValorDeThis: ...
}
Enter fullscreen mode Exit fullscreen mode

Lexical Scope

El lexical scope significa que en un grupo anidado de funciones, las funciones internas tienen acceso a las variables y otros recursos de su ámbito padre. Esto significa que las funciones hijas están vinculadas léxicamente al contexto de ejecución de sus padres.
REF: Link

Sabiendo todo esto, podemos decir que un closure es la posibilidad que tiene una o varias funciones anidadas de acceder al Lexical Environment de una función padre, y esto es posible gracias al Lexical Scope, que nos da la posibildiad de que esta o estas funciones estén vinculadas al contexto de ejecución de su función padre.
Pero eso no es todo, para que una función sea considerada como closure tampoco tiene que tener variables declaradas dentro de ellas.

Y acá el ejemplo en código de un clousure:

function imprimir (){
    let saludo = 'Hola';

    return function comoEstas(nombre){
        console.log(`${saludo} ${nombre} como estás?`);
    }
}

imprimir()('nahuel');
Enter fullscreen mode Exit fullscreen mode

La salida sería:

Hola nahuel como estás?
Enter fullscreen mode Exit fullscreen mode

Discussion (0)

pic
Editor guide