𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗖𝗹𝗼𝘀𝘂𝗿𝗲𝘀 𝗘𝘅𝗽𝗹𝗮𝗶𝗻𝗲𝗱

Usas closures todos los días en JavaScript. Probablemente los uses en React hooks, event listeners y callbacks de Node.js. Muchos desarrolladores tienen dificultades con la teoría, pero el concepto es sencillo una vez que ves el patrón.

Para entender los closures, debes entender el scope léxico.

El scope léxico significa que una función puede acceder a variables de su propio scope y de cualquier scope externo donde haya sido definida. Depende de dónde escribas el código, no de dónde lo llames.

Un closure es una función que recuerda las variables de su scope original incluso después de que ese scope haya terminado de ejecutarse.

Imagina que una función lleva una mochila. Cuando se crea la función, guarda cada variable que necesita de su entorno en esa mochila. La función lleva esa mochila a todas partes.

Así es como funcionan los closures en la práctica:

  • Variables privadas: Puedes ocultar datos al mundo exterior. En un ejemplo de una cuenta bancaria, la variable del saldo permanece privada. Solo puedes cambiarla a través de métodos específicos como deposit o withdraw. Esto evita el acceso directo a datos sensibles.

  • Fábricas de funciones: Puedes crear funciones que produzcan otras funciones. Una fábrica de multiplicadores puede crear una función para duplicar o una para triplicar. Cada nueva función mantiene su propio multiplicador específico en su mochila.

  • Event Listeners: Cuando adjuntas un evento click a un botón, el manejador recuerda los datos de la función de configuración. Incluso después de que la función de configuración termine, el listener conserva esos datos.

  • React Hooks: Cada vez que usas useState o useEffect, estás usando closures. Un error común en React ocurre cuando un closure captura un valor antiguo del estado. Esto se llama un stale closure.

Ten cuidado con el uso de memoria. Debido a que un closure mantiene una referencia viva a las variables, el motor no puede eliminarlas mediante el garbage collection mientras el closure exista. Evita mantener objetos masivos en un closure si no los necesitas durante mucho tiempo.

Summary:

  • El scope léxico define el acceso.
  • Los closures hacen que ese acceso sea persistente.
  • Una función lleva su entorno en una mochila.
  • Usa let en lugar de var en los bucles para evitar errores de scope.

Source: https://dev.to/digitalunicon/javascript-closures-explained-with-examples-339f