Pregunta de Entrevista en JS, ¿Qué es un Closure en JavaScript?

El comienzo de una nueva etápa

Actualmente por cuestiones de una pandemia mundial; desafortunadamente demasiadas personas se quedaron sin empleo, lo cuál ha orillado a que muchas empresas optaran por una nueva forma de trabajo, por desgracia me tocó ser una de las personas que perdieron su trabajo, y al ver la creciente ola en la programación decidí incursionarme al mundo del desarrollo-web.

Al principio me costó trabajo decidirme por un lenguaje de programación, pero esa es otra historia, decidí tomar un bootcamp donde aprendí Javascript; una vez finalizado decidí buscar empleo y hasta la fecha me ha costado trabajo comenzar a desarrollarme en alguna empresa para poder demostar mis habilidades técnicas, que si bien no son de un desarrollador senior, creo que mi conocimiento y mis soft-skills en un entorno laboral son bastantes amplias, ya que me desempeñe durante 5 años como asesor logístico.

Durante unos 5 meses he aplicado mínimo unas 100 veces a ofertas de trabajo, algunas me han regresado la llamada, o me enviado un correo, algunas hasta la fecha sigo esperando, y en muchas otras he tenido la oportunidad de tener entrevistas técnicas, en las cuáles se maneja muchas veces un poco mas de conocimiento teórico para visualizar si efectivamente comprendes el funcionamiento del lenguaje de programación.

En demasiadas entrevistas me encontré con la pregunta, ¿Qué es un Closure en JavaScript?, y por mas que investigaba nunca podía entender claramente lo que era y su funcionamineto, pero posterior a varios videos y documentos logré entenderlo, y es lo que hoy quiero compartir para poder facilitar y aportar mi granito de arena a personas como yo, que a pesar de tener el mundo en contra decidimos irnos por nuestros sentimientos y gustos, y dedicarnos al mundo de la programación.

¿Qué es Scope en JavaScript?

Para comenzar a hablar de los Closures, primero tenemos que entender un poco los tipos de Scope que existen en JS; y por Scope nos referimos al lugar donde una variable va a vivir, o mejor dicho donde ésta pora ser accesible. Es escencial conocer al menos el Global Scope, Local Scope, Lexical Scope y Block Scope, ya que los vamos a mencionar al explicar el concepto de Closure. De una manera breve tratré de explicarte estos 4 conceptos:

Global Scope: Se dice que una variable se encuentra en el scope global cuando está declarada fuera de una función o de un bloque. Vamos a poder acceder a este tipo de variables desde cualquier parte de nuestro código, ya sea dentro o fuera de una función.

var= varGlobal
// En esta parte del código vamos a poder accesar a varGlobal.
function unaFunción(){
// De igual manera en esta parte del código vamos a poder accesar a varGlobal.
}

Local Scope: Las variables que definimos dentro de una función son variables locales, es decir se encuentran en el Scope local. Esto significa que este tipo de variables van a vivir únicamente dentro de la función en donde las hayamos declarado y si intentamos accederlas fuera de ella, dichas variables no van a estar definidas. Lo anterior nos ayuda a decidir si sólo queremos que una variable exista en una función.

// El código escrito en esta parte NO va a poder acceder a varLocal.
function myFunction() {
var varLocal= "Hola mundo!"
// El código escrito acá SI puede.
}

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.

Block Scope: A diferencia del scope local este scope está limitado al bloque de código donde fue definida la variable. Desde ECMAScript 6 contamos con los keyword let y const los cuales nos permiten tener un scope de bloque, esto quiere decir que las variables solo van a vivir dentro del bloque de código correspondiente.

Ahora que entendemos un poco mejor los conceptos de los scopes, y las diferencias entre ellos podremos continuar a la definición de Closure.

¿Qué es un Closure en JavaScript?

Comenzaremos por explicar el por qué de los Closures, hay una razón por la cuál existen en JavaScript, JS tiene lo que llamamos Lexical Scope que ya lo explicamos anteriormente, pero que sucedería si requerimos una variable que no está definida en un Scope Superior o en el Scope Padre. JavaScript es un lenguaje de programación funcional donde la mayoría de las veces vamos a declarar funciones en un lugar, y posteriormente las vamos a utilizar en otro documento, o dentro de otra función, en una promesa o utilizando un setTimeOut, en estos casos definimos una función en un Scope y posterior los ejecutamos en otro Scope, y no estará disponible cuando la usemos.

Aquí la función f() está definida dentro del Block Scope, por consecuente no puedo ejecutarla fuera del mismo. La solución a éste problema son los Closures.

Como podemos ver, 1 fue impreso en la consola, ya que se puede ver quef() guarda la variable dentro de su scope de bloque. Esto es similar a un Closure, (enseguida pondré un ejemplo con un Closure), en éste caso en específico la variable se está guardando dentro de éste bloque y así es cómo funciona un Closure, pero veamos ahora un ejemplo con un Closure real.

En la imagen de arriba podemos observar que dentro de nuestra función f() declaramos dos variables i y j, a la vez que también creamos una función anónima la cual realiza un console.log(i). Al nosotros ejecutar f(), estamos creando i y j, pero podemos observar que sólo i está encerrada y no j, eso es porque no estamos utilizando la variable.

En pocas palabras podríamos decir que:

Closure es una función que almacena datos que no son declarados dentro de ella.

Para aclarar todavía mejor lo anterior, enseñaré otro ejemplo, haciendo uso de un Closure.

Observemos detenidamente la imagen, a lo que hemos aprendido sum() es una función que tiene como parámetro a y retorna una función. La función que regresa recibe un parámetro b. Eso convierte a sum() en una función capaz de crear otras funciones. En el ejemplo utilizamos sum() para crear dos funciones sumar5() y sumar10() las cuales son Closures, ambas con un valor asignado a a de acuerdo al parámetro que le pasamos en sum(); podemos ver como al hacer console.dir(sumar5) sumar5() contiene un Closure con un valor de a=5. Por consecuente cuando ejecutamos sumar5(15) nos da un valor de 20.

Espero poder ayudarte a pasar una pregunta de entrevista técnica, definiciones encontraremos demasiadas en internet, pero es mejor poder entender a fondo como funciona, para nosotros poder dar una definición de lo que en realidad es.