Closures

Hoy quiero hablarles sobre uno de los conceptos más interesantes en JavaScript: los closures.

.
Un closure es una función que guarda referencias a variables en su entorno léxico, incluso después de que la función ha sido devuelta. Esto significa que una función que se define dentro de otra función (la función interna) tiene acceso a las variables de la función externa (el ámbito léxico).
.
En términos más simples, un closure permite que una función acceda a variables que no están dentro de su propio ámbito. Esto es útil para crear funciones más flexibles y reutilizables.
.
Ejemplo:

function sumar(a) { // función declarativa que recibe un parámetro 'a'
  return function(b) { // rotorno de función anónima que recibe un parámetro 'b'
    return a + b; // esa función retorna la suma de 'a' y 'b'
  }
}
// declaración de variables con llamadas de función 'sumar' y un parámetro 'a'
let suma1 = sumar(5);
let suma2 = sumar(10);

console.log(suma1(2)); // devuelve 7
console.log(suma2(3)); // devuelve 13

En este ejemplo, sumar() es una función que devuelve otra función. La función interna es el closure, y tiene acceso a la variable a de la función externa.
.
Al llamar a sumar(5), se crea un closure que guarda el valor de a como 5. Luego, al llamar a suma1(2), la función interna suma 2 al valor de a (5) y devuelve 7.
.
De manera similar, al llamar a sumar(10), se crea otro closure que guarda el valor de a como 10. Luego, al llamar a suma2(3), la función interna suma 3 al valor de a (10) y devuelve 13.

Contador me imagino que sea counter intercambio de idioma jijij

Una cuestión que me costó entender en el primer ejemplo es por qué la variable count no se inicializa a 0 cada vez que se llama a la variable myCounter dado que existe la linea

let count = 0;

Mi interpretación después de un buen rato razonando, es que cuando se ejecuta

const myCounter =counter();

básicamente lo que sucede es que se inicializa count=0, se devuelve la función increment() y se almacena en la variable myCounter. Por lo tanto esta ultima variable es igual a increment(), por lo que llamar a myCounter() es exactamente lo mismo que llamar a increment(). En este caso existe una variable guardada en memoria bajo el nombre count, y cada vez que se llama a myCounter (o increment), este espacio se sobreescribe y es por eso que el output de la función cambia.

Por favor corríjanme si alguien tiene un conocimiento más verídico de lo que sucede detrás de la ejecución del script. Gracias

arreglen el typo en “contador”, creo que deberia haber sido counter

25/89 Closures
Es una característica que permite a las funciones mantener un estado interno privado y protegido de variables y funciones externas. Los closures se crean cuando una función es declarada dentro de otra función y tienen acceso al ámbito de la función extenera, incluyendo las variables y funciones genéricas y reutilizables, que pueden ser parametrizadas con variables y funciones declaradas en su entorno de ejecución.

Un ejemplo de closure en JavaScript es la función “counter, que crea una variable privada count y devuelve el valor actual cada vez que se llama. Al asignar la función contador a una variable y luego llamar a la funciín varias veces, se está utilizando el closure para acceder a la variable count y modificar su valor cada vez que se llama a la función increment.

Otro ejemplo es la funciín multiplyBy que toma un factor como argumento y devuelve una función que multiplica el valor dado por el factor. Al asignar la función “multiplicador” con un factor específico a una variable y luego llamar ala función varias veces con diferentes valores, se está utilizando el closure para parametrizar la función con un valor específico y crear una nueva función reutilizable que siempre multiplica el valor dado por ese factor.

Ej createCounter para crear un contador personalizado a partir de un valor inicial:

function createCounter(initialValue) {
	let count = initialValue;
	return function() {
	count++;
	return count;
	}
}
const myCounter1 = createCounter(0);
console.log(myCounter1()); // Output: 1
console.log(myCounter1()); // Output: 2
console.log(myCounter1()); // Outuput: 3

const myCounter2 = createCounter(10);
console.log(myCounter2()); // Output: 11
console.log(myCounter2()); // Output: 12
console.log(myCounter2()); // Output: 13

Ej Función para calcular el área de un rectandulo utilizando un clousure:

function areaTect(width) {
	return function (height) {
	return width * height;
	}
}
const rectArea = areaRect(5);
console.log(rectArea(6)); // Output: 30
console.log(rectArea(8)); // Output: 40

EJ función para contar la cantidad de veces que se llama a una función utilizando un clousure:

function countCalls(fn) {
	let count = 0;
	return function (...args) {
		count++;
		console.log(`La función ha sido llamada ${count} veces.`);
		return fn(..arg);
	}
}
function greet(name) {
	console.log(`Hola, ${name}!);
}
const countedGreet = countCalls(greet);
countedGreet('Juan'); // Output: Hola, Juan! 
//La función ha sido llamada 1 vez
countedGreet('Maria'); // Output: Hola, Maria! 
// La función ha sido llamada 2 veces

Se me hizo complicado entenderlo.

1.- La función principal se resuelve y mantiene su estado.
2.- La función que se retorna se guarda en la variable a la que lo asignes con el estado.
3.- Podemos usar la variable que contiene a la función secundaria para hacer cosas.

creo que toca practicar mas, a ver cuando se necesitan usar este tipo de funciones…