¿Cuáles son los cierres de JavaScript con ejemplos??

JavaScript es un lenguaje de programación versátil que admite una amplia gama de paradigmas de programación. Una de las características más poderosas de JavaScript son los cierres, que permiten a los desarrolladores crear un código potente y flexible. En este artículo, exploraremos qué son los cierres y cómo funcionan, junto con algunos ejemplos.

¿Qué es un cierre en JavaScript??

Un cierre es una función interna que tiene acceso a las variables, parámetros y argumentos de la función exterior. La función interna puede acceder a estas variables incluso después de que la función exterior haya regresado. Un cierre le permite encapsular y proteger los datos dentro de una función, evitando que se accedan por otras funciones.

Los cierres se crean cuando una función se define dentro de otra función y se devuelve como un valor. La función devuelta mantiene una referencia a las variables en la función externa, incluso después de que la función exterior ha regresado. Esto significa que la función interna puede acceder y manipular esas variables.

Los cierres se pueden utilizar en una variedad de situaciones, como crear variables y métodos privados, implementar devoluciones de llamada y manejadores de eventos, y administrar el estado.

Ejemplo 1: Variables y métodos privados

Uno de los usos más comunes de los cierres es crear variables y métodos privados. Las variables y métodos privados no son accesibles desde fuera de la función, lo que los hace más seguros y menos propensos a los errores.

función contador () LET count = 0; función increment () count ++; consola.log (recuento); Incremento de retorno; const incrementCount = contador (); incrementCount (); // 1 incrementCount (); // 2 incrementCount (); // 3

12345678910111213141516

función contador () LET count = 0; función increment () count ++; consola.log (recuento); return increment; const incrementCount = contador (); incrementCount (); // 1incrementCount (); // 2IncrementCount (); // 3

En el ejemplo anterior, hemos creado un encimera función que devuelve una función de incremento. El contar La variable se define en el encimera función pero solo es accesible desde el incremento función. Cada vez que el incremento Se llama a la función, aumenta la variable de conteo y registra el nuevo valor en la consola.

Ejemplo 2: devoluciones de llamada y manejadores de eventos

Los cierres también se pueden utilizar para implementar devoluciones de llamada y controladores de eventos. Una devolución de llamada es una función que se pasa como un argumento a otra función y se llama cuando la otra función se completa. Los manejadores de eventos son funciones que se llaman en respuesta a un evento específico, como un clic de botón o envío de formulario.

function fetchData (url, devolución de llamada) Fetch (URL) .Entonces (respuesta => respuesta.json ()) .entonces (data => devolución de llamada (datos)) .Catch (Error => Consola.error (error)); fetchData ('https: // API.ejemplo.com/data ', function (data) consola.Dato de registro); );

12345678910

function fetchData (url, devolución de llamada) Fetch (URL) .Entonces (respuesta => respuesta.json ()) .entonces (data => devolución de llamada (datos)) .Catch (Error => Consola.error (error)); fetchData ('https: // API.ejemplo.com/data ', function (data) consola.Dato de registro););

En el ejemplo anterior, hemos creado un obtener datos función que toma una URL y una función de devolución de llamada como argumentos. El obtener datos La función usa el buscar API para recuperar datos de la URL especificada y luego pasa esos datos a la función de devolución de llamada. La función de devolución de llamada se define como una función anónima que registra los datos en la consola.

Ejemplo 3: Gestión del estado

Los cierres también se pueden utilizar para administrar el estado en un programa. El estado se refiere a los datos que describen la condición actual del programa, como la entrada del usuario o la configuración de la aplicación.

function createCounter (inicialValue = 0) LET count = inicialValue; return increment () count ++; consola.log (recuento); , disminución () Count--; consola.log (recuento); , reset () count = inicialValue; consola.log (recuento); ; const contador = createCounter (5); encimera.incremento(); // 6 contador.decremento(); // 5 contador.reiniciar(); // 5

123456789101112131415161718192021222324

function createCounter (inicialValue = 0) LET count = inicialValue; return increment () count ++; consola.log (recuento); , disminución () Count--; consola.log (recuento); , reset () count = inicialValue; consola.log (recuento); ; const contador = createCounter (5); encimera.incremento(); // 6Counter.decremento(); // 5Counter.reiniciar(); // 5

En el ejemplo anterior, hemos creado un createCounter función que devuelve un objeto con tres métodos: incremento, decremento, y reiniciar. Los métodos acceden y manipulan una variable de conteo que se define en el createCounter función. El valor inicial de contar se establece en el parámetro InitialValue pasado a createCounter. Cada método devuelve el valor actualizado del contar y lo registra en la consola.

El encimera objeto devuelto por createCounter mantiene una referencia a la variable de recuento en el createCounter función, permitiendo el incremento, decremento, y reiniciar Métodos para acceder y modificar el estado del programa.

Conclusión

En conclusión, los cierres son una característica poderosa de JavaScript que le permite crear un código flexible y seguro. Los cierres se crean cuando una función se define dentro de otra función y se devuelve como un valor. La función devuelta mantiene una referencia a las variables en la función externa, incluso después de que la función exterior ha regresado. Los cierres se pueden utilizar en una variedad de situaciones, como crear variables y métodos privados, implementar devoluciones de llamada y manejadores de eventos, y administrar el estado. Al usar cierres en su código JavaScript, puede escribir aplicaciones más robustas y mantenibles.