Entendamos Closures

Una de las preguntas que más me ha hecho en entrevistas es “¿Qué es un closure?”, y curiosamente es uno de los temas más difíciles de comprender en Javascript. En este articulo, trataré de explicar closures de una forma sencilla y rápida.

Que es un Closure?

Para poder entender bien los closures, es importante saber cómo funciona el scope. Si creas una función dentro de otra función, estarás creando algo llamado scope chain. La función padre no podrá ver las variables de la función hijo, pero el hijo puede ver las variables del padre. Un ejemplo que leí hace tiempo era pensar en una muñeca Matryoshka

Ahora imagina que estas muñecas tuvieran vida propia. La muñeca más grande no tendría forma de ver a las más pequeñas. Pero las muñecas interiores pueden verlo todo 😱. Así funciona el scope.

//Este es el scope global del closure
function outer(){
  // Este es el primer scope externo del closure
  function inner(){
  // Este es el scope local del closure
  }
}

Podemos decir que la función inner tiene tres scopes. La primera cadena del scope chain le permite a la función acceder a sus propias variables. La segunda le permite acceder a las variables y parámetros de la función outer. Y la tercera le permite acceder a las variables globales. Cada que tenemos una función, le agregamos un nuevo scope a nuestro scope chain. Al crear una función dentro de otra función, creamos un closure.

Ahora podemos ir un poco más a profundidad. Cuando una función retorna, la idea es que todas las variables del padre solo existirán cuando se llame la función, después de eso deben ser inexistentes. Sin embargo, los closures todavía tienen acceso a cualquier variable en su scope chain.

Por ejemplo:

function outerFunction(params){
  let firstName = params.firstName;
  let lastName = params.lastName;
    
  function innerFunction(action){
    return firstName + " " + lastName + " " + "is" + " " + action;
  }
  return innerFunction;
 } 
  
var data = {firstName: "Tatiana", lastName: "Molina" }; 
var firstPerson = outerFunction(data);
console.log(firstPerson("writing")) // Tatiana Molina is writing
console.dir(outerFunction)
console.dir(firstPerson)

Desde nuestra terminal podemos ver esto:

Vemos que innerFunction tiene acceso a 2 scopes y tiene en su closure las variables firstName y lastName, que pertenecen a outerFunction. Así mismo tiene acceso a las variables del scope global.

Los closures no almacenan valores. Los valores son estáticos. En su lugar, almacena referencias a valores de una variable de su scope chain. Lo cool es que si cambiase el valor de una variable en el scope chain antes de retornar el closure, el mismo valor utilizado en el closure se actualizará. A esto se le llama state. Queremos poder crear funciones cuyos datos internos vivan durante toda la vida útil de nuestras aplicaciones. Cuando un usuario ingresa datos, queremos que esos datos se actualicen.

Los closures son un excelente ejemplo de la flexibilidad de las funciones de JavaScript. Estos nos permiten establecer funciones en variables, funciones retornadas, llamadas a funciones anónimas, usar funciones como keys, hasta podemos crear IIFE’s (Immediately-invoked Function Expression).

Solo necesitas recordar: un closure es una función que se crea dentro de otra función.