¿Qué es un Closure?

👨‍💻 Les dejo un Video sobre closures del tío Sacha

Es un gran complemento si todavía tienes dudas 😎
Es un poquito largo pero creéme que valdrá la pena 😉

• Los closures permiten acceder al ámbito de una función exterior desde una función interior. En javascript, los closures se crean cada vez que una función es creada.

• Los closures no son siempre utilizados.

• Un closure es cuando una función accede a una variable fuera de su contexto.

• Al trabajar con closures entra en juego el concepto de alcance de las variables.

Este tema del clousure siempre es algo extraño de digerir. Sin embargo, me costó menos trabajo ahora teniendo en cuenta que se abordó con bastante detalle el tema del scope global y local en los videos anteriores. Muy bien

El tema de las closures si es primera vez que lo ves puede ser confuso, pero voy a tratar de resumir según lo que entendí.
Básicamente una closure es cuando usamos una variable de una funcion “padre” en una función “hijo”. Además para que sea una closure es que estas funciones sean anidadas (“padre-hijo”)
En este ejemplo estoy creando funciones anidadas(una dentro de otra), y estoy usando la variable “a” que está declarada en la “primeraFN” y la estoy usando en la “segundaFN”

function primeraFN(){
	const a = 1

	function segundaFN(){
		a = a + 1;
	}
}

Claramente esta es la versión mas sencilla para entender inicialmente los clouseres, pero si cualquiera desea agregar mas información, o corregirme en algo bienvenido sea. 😃

Antes de ver esta clase te recomiendo pasarte por esta lectura: Execution Context
Y si quieres reforzar y entender más a profundidad los visto en la clase y en la lectura ve este video compartido por el compañero @pablozecua: video sobre closures

este curso abarca te mas muy engorrosos y los hace fáciles y entendibles sin tener clases de 30 minutos 10/10

Codigo:

const myGlobal = 0;

function myFunction(){
    const myNumber = 1;
    console.log(myGlobal);

    function parent(){
        const inner = 2;
        console.log(myNumber, myGlobal);

    
        function child(){
            console.log(inner, myNumber, myGlobal);
        }

        return child()
    }

    return parent();
}

myFunction();

Básicamente el ámbito léxico es, la accesibilidad de las variables depende de si están todas dentro de una misma función o bloque.
y va de arriba hacia abajo, como cascada.

Closure

Una clausura o closure es una función que guarda referencias del estado adyacente (ámbito léxico). En otras palabras, una clausura permite acceder al ámbito de una función exterior desde una función interior. En JavaScript, las clausuras se crean cada vez que una función es creada.

// Lexical Scope

// La función iniciar es una función externa.
function iniciar() {
  
  // La variable nombre es una variable local creada por iniciar.
  let nombre = "Hola, mundo";
  
  // La función mostrarNombre es una función interna, una clausura.
  function mostrarNombre() {
  
  // nombre es una variable declarada en la función externa.
  console.log(nombre);
  
  }
  mostrarNombre();
}
iniciar();
// output
// Hola, mundo

Una analogia buena para entender el clousure es que funciona como el polarizado de un auto. Uno estando dentro de un auto polarizad puede ver a los demas, como una funcion dentro de otra puede ver asi los elementos de afuera.
Pero los demas que estan afuera no pueden vernos a nosotros estando dentro del auto polarizado, al igual que las funciones de afuera no tienen acceso al scope de otros bloques.

Las funciones en javascript pueden ser declaradas dentro de otras funciones (funciones anidadas) . Esto es algo que no ocurre en Java, C# que son lenguajes orientados a objetos (En python tambien pueden crearse closures). La particularidad de poder crear una función dentro de otra brinda a la función contenida la posibilidad de acceder a las variables declaradas en la función contenedora y por supuesto a las variables globales.
Las closures es mas una característica de las funciones en javascript que las diferencia a las creadas en otros lenguajes ya mencionados.

const global_a = "Global"

function contenedora(){
	const contenedora_a = "Contenedora"
	function contenida(){
		const contenida_a = "Contenida"
		return global_a +contenedora_a + contenida_a
	}
    return contenida()
}

console.log(contenedora())

EJEMPLO DE FUNCCION CLOSURE

const myGlobal = 0;

function myFunction() {
  const myNumber = 1;
  console.log(myGlobal);

  function parent() {
    const inner = 2;
    console.log(myGlobal, myNumber);

    function child() {
      console.log(myGlobal, myNumber, inner);
    }

    return child; // No llames a child() aquí, solo devuelve la referencia a la función
  }

  return parent(); // Llama a parent() para obtener la referencia a la función child
}

var resultado = myFunction(); // funcion CLOSURE
resultado(); // Llama a resultado() para ejecutar la función child

En el código proporcionado, tenemos una función myFunction que tiene dos funciones internas: parent y child.

Ahora, analicemos las llamadas a las funciones y el concepto de closures:

• En la línea return parent();, se llama a la función parent. Esto devuelve la referencia a la función child, pero no la ejecuta. La referencia se asigna a la variable resultado.
• Luego, en la línea resultado();, se llama a resultado, que en realidad es una referencia a la función child. Al llamar a resultado(), se ejecuta la función child, lo que provoca que se impriman los valores de myGlobal, myNumber e inner.

En resumen:

• La función child es una función closure porque tiene acceso a las variables locales de su función externa parent, incluso después de que parent haya finalizado su ejecución.
• Al llamar a resultado() estamos ejecutando la función child, que se convierte en la función closure debido al acceso que tiene a las variables locales de parent.

Espero que esto aclare el código y el concepto de closures en este contexto.

¿Qué es un Closure?

Un closure se crea cuando una función interna hace referencia a variables de una función externa. La función interna tiene acceso a las variables y parámetros de la función externa, incluso después de que la función externa haya terminado de ejecutarse.

Aquí tienes un ejemplo para ilustrar cómo se crea un closure en JavaScript:

function contador() {
  var contador = 0;

  function incrementar() {
    contador++;
    console.log(contador);
  }

  return incrementar;
}

var miContador = contador(); // función closure
miContador(); // Output: 1
miContador(); // Output: 2

En el ejemplo anterior, la función contador define una variable llamada contador y una función interna llamada incrementar. La función incrementar tiene acceso a la variable contador y la puede modificar. Luego, la función contador devuelve la función incrementar.

Cuando se llama a contador() y se asigna el resultado a miContador, se crea un closure. miContador se convierte en una función que aún tiene acceso a la variable contador definida en la función contador. Cada vez que se llama a miContador(), el valor de contador se incrementa y se muestra en la consola.

El uso de closures en JavaScript es útil en situaciones donde se necesita preservar el estado de ciertas variables y tener acceso a ellas en un ámbito diferente al de su creación, como en el ejemplo anterior donde se mantiene un contador privado. Los closures son ampliamente utilizados en JavaScript para implementar patrones como módulos, funciones de retorno de llamada y manejo de eventos.

En JavaScript, una clausura o closure es una función que guarda referencias del estado adyacente (ámbito léxico). En otras palabras, una clausura permite acceder al ámbito de una función exterior desde una función interior.

En JavaScript, las clausuras se crean cada vez que una función es creada. Los closures son creados con toda la información del entorno donde fueron creados y mantienen la información de su ambiente.

• Que es un clousure

  En JavaScript, un closure es una función que recuerda el estado de las variables en el momento en que se creó, incluso cuando la función se ejecuta en un entorno diferente.

  En otras palabras, un closure es una función que tiene acceso a variables que están fuera de su alcance léxico, es decir, a variables que no están definidas dentro de la función en sí misma, sino en su ámbito exterior, ya sea en la función que la contiene o en el ámbito global. El closure “cierra” el ámbito en el que se creó y lo mantiene disponible para su uso posterior.

  Los closures son útiles en situaciones donde se necesita acceder a variables que no están disponibles dentro de una función, como en el manejo de eventos, la implementación de funciones de devolución de llamada y la creación de módulos. Al usar closures, se pueden crear funciones que tienen acceso a variables privadas y mantenerlas aisladas del ámbito global, lo que ayuda a evitar conflictos de nombres y a escribir un código más seguro y modular.

Que es un Closure?

• Los Closure permiten:

  Acceder al ámbito de una función exterior desde una función interior. En JavaScript, las clausuras se crean cada vez que una función es creada.

  A diferencia de otros conceptos como funciones, variables, u otros. Los closures no son siempre utilizados.

  Aprender el concepto es saber identificar cuando lo estas utilizando.

• Se tiene una closure cuando:

  Una función cualquiera accede a una variable fuera de su contexto y la recuerda.

Codigo de la calse:

const myGlobal = 0;

function myFunction(){
    const myNumber = 1;
    console.log(myGlobal);

    //esto es un closure
    function parent() {// function interna
        const inner = 2;
        console.log(myNumber, myGlobal);

        function child() {
            console.log(inner, myNumber, myGlobal);
        }
        return child();
    }
    return parent();
}

myFunction();

se me hace mas entendible para mi decirle EL ÁMBITO DE LAS VARIABLES

Mi resumen de closure, espero haya entendido bien.

Tenemos un closure cuando en una funcion se accede a una variable fuera del contexto de la funcion, y “recuerda” su valor

En un curso que imparte Diego De Granda hacía la siguiente analogía para hablar del scope:
Si tú vas por el campo, puede que pases por al lado de un hormiguero y no darte cuenta, pero las hormigas si se están dando cuenta de que tú pasas por al lado…

A mi me sirvió para entenderlo muy claro.

**¿Que es un Closure? **

• De forma sencilla, en JavaScript un Closure se crea cuando tenemos una funcion (Padre) y dentro tenemos funciones (Hijas), es decir tenemos funciones anidadas.
  Luego gracias al “Ambito Lexico” podemos tener acceso a las variables de la funcion “Padre” desde la funcion “Hijo”.

Ejemplo 3 CLOSURE:

_

Ejemplo 2 CLOSURE:

_

Ejemplo 1 CLOSURE:

_

Definición de Closure y cómo esta relacionado con el tema de Scope 🌱👇

// What is a closure?
// A closure is a function that has access to its outer function scope even after the outer function has returned.

// What is a lexical scope?
// Lexical scope means that in a nested group of functions, the inner functions have access to the variables and other resources of their parent scope.

Código de esta clase:

const myGlobal = 0;

function myFunction(){
    const myNumber = 1;
    console.log(myGlobal);

    function parent(){ //Function Interna
        const inner = 2;
        console.log(myNumber, myGlobal);

        function child(){
            console.log(inner, myNumber, myGlobal);
        }
        return child();
    }
    return parent();
}

myFunction();

Bastante interesante, yo los uso seguido cuando programo pero no sabía que eran o como se llamaba, las daba por sentado 😅

Muchas veces en mi código he utilizado los Closure, pero no sabia que lo estaba utilizando. Ahora gracias a este curso se el concepto, que no esta mal saberlo.

Lean la información que viene abajo en la sección de “recursos”.
¡Es importante!

muchas gracias por la explicación, bastante clara, en otro curso me explicaron el tema de Closures pero me dejaron con más dudas

Definicion que puede ser de mucha ayuda si aun hay dudas:

https://www.freecodecamp.org/news/javascript-lexical-scope-tutorial/#:~:text=What is Lexical Scope in JavaScript%3F

Mis apuntes de este curso en Notion

inception???

Tantas veces que he utilizado closures en otros cursos y ejercicios de JS, y hasta ahora me entero del verdadero concepto.

digamos que un closure es como cuando hacemos uso de clases,nosotros podemos llamar a los parametros de dicha clase y mandarlos , en este caso un closure es una funcion la cual adentro de ella puede tener mas funciones o variables , las cuales solo se van a poder acceder a ellas fuera del contexto del scope si retornamos las mismas, segun lo que investigue esta era una forma de simular las clases antes que existieran como tal las clases en javascript!

• Una clausura o closure es una funcion que guarda referencias del estado adyacente ( ambito lexico), en otras palabras una clausura permite acceder al ambito de una funcion exterior desde una funcion interior.
• Son muy utilizados

Lectura para reforzar conceptos vistos en la clase: Tutorial de cláusula de JavaScript: cómo funcionan las cláusulas y el ámbito (scope) léxico en JS

Con este ejemplo se entiende muy bien el concepto de closure, gracias profe Oscar

tengo un clousure cuando tengo function child que accede al scope function parent, esto permite acceder a cualquier variable. Así pues, mi function parent retorna la function child, esto ocasiona que el resultado sea recordado por la function child, y se pueda acceder a ella.

Entonces un closure consta de:

• Una function que contendrá la nested func
• Una variable con su valor
• Una nested function accediendo a dicho valor (superior a su scope)
• Retornar la nested function
• Y por último llamar la function princpial.

Bueno mas o menos eso entendí 😃

¿Qué es un Closure?

Definición

• Permite acceder al ámbito de una función desde una función interior.En javascript,las clausuras se crean cada vez que una función es creada.

• A diferencia de otros conceptos como funciones,variables u otros.Los clousures no son siempre utilizados.

• Tienes una clouse cuando una función cualquiera accede a una variable fuera de su contexto.

• Vamos a entender qué es una clouster con un concepto llamado ambito lexíco(accesibilidad que vamos a tener de nuestras variables anidadas dentro de condiciones y llamarlas).

Código Ejemplo

const myGlobal = 0;

function myFunction() {
  const myNumber = 1;
  console.log(myGlobal);

  function parent() { // function interna ,creamos closure
    const inner = 2;
    console.log(myNumber, myGlobal);

    function child() {
      console.log(inner, myNumber, myGlobal);
    }

    return child();
  }

  return parent();
}

myFunction();

Mis notas:

• Un closure se crea cada vez que una función es creada.
• Permite acceder al ámbito de una función exterior desde una función interior.
• No son siempre usados.
• Probablemente ya hemos usado closures sin darnos cuenta.
• Cuando una función accede a una variable fuera de su contexto de ejecución hablamos de una closure.
• Ámbito léxico determina la accesibilidad de las variables dentro de ámbitos anidados.