El Closure de JavaScript: qué es y cómo funciona

Si has estado trabajando con JavaScript durante un tiempo, probablemente habrás oído hablar de los closures. El closure de JavaScript es una característica del lenguaje que puede ser confusa al principio, pero que es muy útil una vez que entiendes el concepto.

Podemode decir que un closure es una función que tiene acceso a variables de su contexto externo, incluso después de que la función ha sido llamada.

¿Qué es un closure de JavaScript?

Un closure es una combinación de una función y el entorno (o contexto) de variables disponibles en el momento en que se creó dicha función. Cuando una función se crea en JavaScript, también se crea este entorno, o contexto, que contiene todas las variables que estaban disponibles en ese momento y lugar. Veamos un ejemplo:

function saluda(nombre) {
  var textoSaludo = '¡Hola, ' + nombre + '!';
  return textoSaludo;
}

var mensaje = saluda('Juan');
console.log(mensaje); //=> '¡Hola, Juan!'

En este ejemplo, la función saluda crea una variable llamada textoSaludo en su contexto. La función devuelve la cadena ¡’Hola, Juan!. La variable mensaje la igualamos al valor devuelto por la función saluda, así que console.log(mensaje) mostrará ‘Hola, Juan!‘ por consola.

Partiendo de lo anterior, veamos un ejemplo de closure:

function saluda(nombre) {
  var textoSaludo = 'Hola, ' + nombre + '!';
  function muestraSaludo() {
    console.log(textoSaludo);
  }
  return muestraSaludo;
}

var diHola = saluda('Juan');
diHola(); //=> '¡Hola, Juan!'

En este último ejemplo, la función saluda es similar a la anterior, pero ahora en lugar de devolver la cadena de saludo, devuelve la función interna muestraSaludo. La función muestraSaludo tiene acceso a la variable textoSaludo de su contexto externo, incluso después de que la función saluda haya sido llamada y su contexto haya sido borrado.

La última línea del ejemplo crea una nueva variable llamada diHola y se iguala a la función devuelta por saluda. Cuando diHola es llamada, ejecuta la función muestraSaludo, que tiene acceso a la variable textoSaludo de la función externa.

Es un ejemplo sencillo, pero útil para ver y entender un ejemplo de lo que es un closure de JavaScript.

¿Cómo funciona el Closure en JavaScript?

Cuando se crea una función en JavaScript, también se crea un objeto que contiene el contexto actual de la función. Este objeto se llama Closure y se utiliza para disponibilizar las variables y las funciones que están disponibles en el momento en que se crea la función.

Cuando se llama a una función, se crea un nuevo contexto de ejecución para esa función, que incluye el objeto Closure que se creó cuando se definió la función. El contexto de ejecución de la función tiene acceso a las variables y funciones definidas en su propio alcance, además de a todas las variables y funciones definidas en los entornos de sus funciones externas (Closure).

Básicamente, cuando se crea un closure, se captura una copia de todas las variables que están en el contexto de la función en ese momento. Esto significa que aunque el contexto de ejecución de la función se destruya después de que la función termine de ejecutarse, el closure todavía tiene una referencia a las variables capturadas.

Podríamos decir que los closures disponibilizan para una función el contexto en el que se creó, incluso después de que la función haya terminado de ejecutarse y su entorno haya sido destruido. Esto es lo que permite a las funciones internas tener acceso a las variables definidas en las funciones externas.

Conclusión

Los closures en JavaScript son una característica muy útil que te permite crear funciones que tienen acceso a variables en su contexto externo. Los closures pueden ser útiles para crear funciones que almacenen información y mantengan el estado a lo largo del tiempo.

Los closures son difíciles de entender al principio, y pueden conducir a problemas de gestión de memoria si no se utilizan adecuadamente. Por otro lado, una vez que se entienden y se utilizan correctamente, los closures pueden ser una herramienta muy útil en JavaScript.

Puedes aprender más en la sección de Desarrollo Web o en la sección específica de JavaScript.

¡Espero que te haya sido de utilidad!