En este tutorial, aprenderá acerca de los cierres de JavaScript con la ayuda de ejemplos.
Antes de aprender sobre cierres, debe comprender dos conceptos:
- Función anidada
- Devolver una función
Función anidada de JavaScript
En JavaScript, una función también puede contener otra función. Esto se llama función anidada. Por ejemplo,
// nested function example // outer function function greet(name) ( // inner function function displayName() ( console.log('Hi' + ' ' + name); ) // calling inner function displayName(); ) // calling outer function greet('John'); // Hi John
En el programa anterior, la greet()función contiene la displayName()función dentro de ella.
Devolver una función
En JavaScript, también puede devolver una función dentro de una función. Por ejemplo,
function greet(name) ( function displayName() ( console.log('Hi' + ' ' + name); ) // returning a function return displayName; ) const g1 = greet('John'); console.log(g1); // returns the function definition g1(); // calling the function
Salida
function displayName () (console.log ('Hola' + '' + nombre);) Hola John
En el programa anterior, la greet()función devuelve la displayNamedefinición de la función.
Aquí, la definición de función devuelta se asigna a la variable g1. Cuando imprima g1 usando console.log(g1), obtendrá la definición de la función.
Para llamar a la función almacenada en la variable g1, usamos g1()entre paréntesis.
Cierres de JavaScript
En JavaScript, el cierre proporciona acceso al alcance externo de una función desde el interior de la función interna, incluso después de que la función externa se haya cerrado. Por ejemplo,
// javascript closure example // outer function function greet() ( // variable defined outside the inner function let name = 'John'; // inner function function displayName() ( // accessing name variable return 'Hi' + ' ' + name; ) return displayName; ) const g1 = greet(); console.log(g1); // returns the function definition console.log(g1()); // returns the value
Salida
function displayName () (// accediendo a la variable de nombre return 'Hola' + '' + nombre;) Hola John
En el ejemplo anterior, cuando greet()se llama a una función, devuelve la definición de función de displayName.
Aquí g1hay una referencia a la displayName()función.
Cuando g1()se llama, todavía tiene acceso a la greet()función.
Cuando ejecutamos console.log(g1), devuelve la definición de la función.
El concepto de cierre existe para otros lenguajes de programación como Python, Swift, Ruby, etc.
Echemos un vistazo a otro ejemplo.
// closure example function calculate(x) ( function multiply(y) ( return x * y; ) return multiply; ) const multiply3 = calculate(3); const multiply4 = calculate(4); console.log(multiply3); // returns calculate function definition console.log(multiply3()); // NaN console.log(multiply3(6)); // 18 console.log(multiply4(2)); // 8
En el programa anterior, la calculate()función toma un solo argumento xy devuelve la definición de multiply()función de la función. La multiply()función toma un solo argumento yy regresa x * y.
Ambos multiply3y multiply4son cierres.
La calculate()función se llama pasar un parámetro x. Cuando multiply3y multiply4son llamados, la multipy()función tiene acceso a la x argumento que se pasa del exterior calculate()función.
Privacidad de datos
El cierre de JavaScript ayuda en la privacidad de los datos del programa. Por ejemplo,
let a = 0; function sum() ( function increaseSum() ( // the value of a is increased by 1 return a = a + 1; ) return increaseSum; ) const x = sum(); console.log(x()); // 1 console.log(x()); // 2 console.log(x()); // 3 a = a + 1; console.log(a); // 4
En el ejemplo anterior, la sum()función devuelve la definición de increaseSum()función de la función.
La variable a se incrementa dentro de la increaseSum()función. Sin embargo, el valor de la variable a también se puede cambiar fuera de la función. En este caso, a = a + 1;cambia el valor de la variable fuera de la función.
Ahora, si desea que la variable a se incremente solo dentro de la función, puede usar un cierre. Por ejemplo,
function sum() ( let a = 0; function increaseSum() ( // the value of a is increased by 1 return a = a + 1; ) return increaseSum; ) let x = sum(); let a = 5; console.log(x()); // 1 console.log(x()); // 2 console.log(a); // 5
En el ejemplo anterior, la sum()función establece el valor de a en 0 y devuelve la increaseSum()función.
Debido al cierre, aunque sum()ya está ejecutado, increaseSum()todavía tiene acceso a a y puede agregar 1 a cada vez que x()se llama.
Y la variable a es privada para la sum()función. Significa que solo se puede acceder a la variable a dentro de la sum()función.
Incluso si lo declara ay usa, no afecta la avariable dentro de la sum()función.
Nota : generalmente, los cierres se utilizan para la privacidad de los datos.
