👨💻 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 😉
Bienvenida
Bienvenida al Curso de Closures y Scope
Tipos de scope en JavaScript
Global Scope
Function Scope
Block Scope
Reasignación y redeclaración
Strict Mode
Closure
¿Qué es un Closure?
Practicando Closures
Hoisting
¿Qué es el Hoisting?
Debugging
Debugging
Cierre
Conclusiones
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Un closure permite acceder al scope de una función exterior desde una función interior. En JavaScript, los closures se crean cada vez que una función se genera. A diferencia de otros conceptos como funciones, variables u otros, los closures no se utilizan todas las veces.
Para construir un closure necesitaremos los siguientes requisitos:
function padre() {
function hijo(){
}
}
function padre() {
let numero = 5
function hijo(){
numero = numero + 1
return numero
}
}
function padre() {
let numero = 5
function hijo(){
numero = numero + 1
return numero
}
return hijo
}
const closure = padre()
De esta manera obtendremos una función (scope inferior) que tiene una referencia a la variable que se encontraba en un scope superior, que a su vez recordará el contexto donde fue creada.
El ámbito léxico se refiere al alcance de una variable, siguiendo la cadena de scopes. Es decir, una variable puede ser accedida desde un nivel inferior hasta uno superior, pero no al contrario.
function contador ( i ) {
let acumulador = i
function aumentar () {
console.log(acumulador);
acumulador = acumulador + 1
}
return aumentar
};
const closure = contador(1)
closure() // 1
closure() // 2
closure() // 3
const closure2 = contador(10);
closure2() // 10
closure2() // 11
closure() // 4
Podemos asignar la función contador
a una variable (_closure_
y _closure2_
). Dependiendo del valor que tenga como parámetro, cada variable cambiará el valor inicial por el ámbito léxico, por la que fue originada la variable acumulador
que está vinculada con la función aumentar
.
Contribución creada por: Andrés Guano.
Aportes 20
Preguntas 5
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
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
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();
**¿Que es un Closure? **
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!
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
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.
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:
Bueno mas o menos eso entendí 😃
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).
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();
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())
Mis notas:
Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.