Curso de Closures y Scope en JavaScript

¿Qué es un Closure?

Curso de Closures y Scope en JavaScript

Contenido del curso

Bienvenida

  • 1
    Bienvenida al Curso de Closures y Scope

    Bienvenida al Curso de Closures y Scope

    01:11 min

Tipos de scope en JavaScript

  • 2
    Global Scope

    Global Scope

    12:09 min
  • 3
    Function Scope

    Function Scope

    05:52 min
  • 4
    Block Scope

    Block Scope

    07:16 min
  • 5
    Reasignación y redeclaración

    Reasignación y redeclaración

    14:05 min
  • 6
    Strict Mode

    Strict Mode

    05:54 min

Closure

  • 7
    ¿Qué es un Closure?

    ¿Qué es un Closure?

    Viendo ahora
  • 8
    Practicando Closures

    Practicando Closures

    15:24 min

Hoisting

  • 9
    ¿Qué es el Hoisting?

    ¿Qué es el Hoisting?

    08:28 min

Debugging

  • 10
    Debugging

    Debugging

    04:33 min

Cierre

  • 11
    Conclusiones

    Conclusiones

    03:23 min
schoolTomar examen
search
CursosEmpresasBlogLiveConfEventosPrecios

0:00/9:37

¿Qué es un Closure?

Curso de Closures y Scope en JavaScript

Clase 7 de 11

Clase 7 / 11

Progreso del curso

Bienvenida

  • 1

    Bienvenida al Curso de Closures y Scope

    01:11

Tipos de scope en JavaScript

  • 2lock

    Global Scope

    Suscríbete para ver más
  • 3lock

    Function Scope

    Suscríbete para ver más
  • 4lock

    Block Scope

    Suscríbete para ver más
  • 5lock

    Reasignación y redeclaración

    Suscríbete para ver más
  • 6lock

    Strict Mode

    Suscríbete para ver más

Closure

  • play_arrowlock

    ¿Qué es un Closure?

    play_circleViendo ahora
  • 8lock

    Practicando Closures

    Suscríbete para ver más

Hoisting

  • 9lock

    ¿Qué es el Hoisting?

    Suscríbete para ver más

Debugging

  • 10lock

    Debugging

    Suscríbete para ver más

Cierre

  • 11lock

    Conclusiones

    Suscríbete para ver más
workspace_premiumTomar examen

Escuelas

  • Desarrollo Web
    • Fundamentos del Desarrollo Web Profesional
    • Diseño y Desarrollo Frontend
    • Desarrollo Frontend con JavaScript
    • Desarrollo Frontend con Vue.js
    • Desarrollo Frontend con Angular
    • Desarrollo Frontend con React.js
    • Desarrollo Backend con Node.js
    • Desarrollo Backend con Python
    • Desarrollo Backend con Java
    • Desarrollo Backend con PHP
    • Desarrollo Backend con Ruby
    • Bases de Datos para Web
    • Seguridad Web & API
    • Testing Automatizado y QA para Web
    • Arquitecturas Web Modernas y Escalabilidad
    • DevOps y Cloud para Desarrolladores Web
  • English Academy
    • Inglés Básico A1
    • Inglés Básico A2
    • Inglés Intermedio B1
    • Inglés Intermedio Alto B2
    • Inglés Avanzado C1
    • Inglés para Propósitos Específicos
    • Inglés de Negocios
  • Marketing Digital
    • Fundamentos de Marketing Digital
    • Marketing de Contenidos y Redacción Persuasiva
    • SEO y Posicionamiento Web
    • Social Media Marketing y Community Management
    • Publicidad Digital y Paid Media
    • Analítica Digital y Optimización (CRO)
    • Estrategia de Marketing y Growth
    • Marketing de Marca y Comunicación Estratégica
    • Marketing para E-commerce
    • Marketing B2B
    • Inteligencia Artificial Aplicada al Marketing
    • Automatización del Marketing
    • Marca Personal y Marketing Freelance
    • Ventas y Experiencia del Cliente
    • Creación de Contenido para Redes Sociales
  • Inteligencia Artificial y Data Science
    • Fundamentos de Data Science y AI
    • Análisis y Visualización de Datos
    • Machine Learning y Deep Learning
    • Data Engineer
    • Inteligencia Artificial para la Productividad
    • Desarrollo de Aplicaciones con IA
    • AI Software Engineer
  • Ciberseguridad
    • Fundamentos de Ciberseguridad
    • Hacking Ético y Pentesting (Red Team)
    • Análisis de Malware e Ingeniería Forense
    • Seguridad Defensiva y Cumplimiento (Blue Team)
    • Ciberseguridad Estratégica
  • Liderazgo y Habilidades Blandas
    • Fundamentos de Habilidades Profesionales
    • Liderazgo y Gestión de Equipos
    • Comunicación Avanzada y Oratoria
    • Negociación y Resolución de Conflictos
    • Inteligencia Emocional y Autogestión
    • Productividad y Herramientas Digitales
    • Gestión de Proyectos y Metodologías Ágiles
    • Desarrollo de Carrera y Marca Personal
    • Diversidad, Inclusión y Entorno Laboral Saludable
    • Filosofía y Estrategia para Líderes
  • Diseño de Producto y UX
    • Fundamentos de Diseño UX/UI
    • Investigación de Usuarios (UX Research)
    • Arquitectura de Información y Usabilidad
    • Diseño de Interfaces y Prototipado (UI Design)
    • Sistemas de Diseño y DesignOps
    • Redacción UX (UX Writing)
    • Creatividad e Innovación en Diseño
    • Diseño Accesible e Inclusivo
    • Diseño Asistido por Inteligencia Artificial
    • Gestión de Producto y Liderazgo en Diseño
    • Diseño de Interacciones Emergentes (VUI/VR)
    • Desarrollo Web para Diseñadores
    • Diseño y Prototipado No-Code
  • Contenido Audiovisual
    • Fundamentos de Producción Audiovisual
    • Producción de Video para Plataformas Digitales
    • Producción de Audio y Podcast
    • Fotografía y Diseño Gráfico para Contenido Digital
    • Motion Graphics y Animación
    • Contenido Interactivo y Realidad Aumentada
    • Estrategia, Marketing y Monetización de Contenidos
  • Desarrollo Móvil
    • Fundamentos de Desarrollo Móvil
    • Desarrollo Nativo Android con Kotlin
    • Desarrollo Nativo iOS con Swift
    • Desarrollo Multiplataforma con React Native
    • Desarrollo Multiplataforma con Flutter
    • Arquitectura y Patrones de Diseño Móvil
    • Integración de APIs y Persistencia Móvil
    • Testing y Despliegue en Móvil
    • Diseño UX/UI para Móviles
  • Diseño Gráfico y Arte Digital
    • Fundamentos del Diseño Gráfico y Digital
    • Diseño de Identidad Visual y Branding
    • Ilustración Digital y Arte Conceptual
    • Diseño Editorial y de Empaques
    • Motion Graphics y Animación 3D
    • Diseño Gráfico Asistido por Inteligencia Artificial
    • Creatividad e Innovación en Diseño
  • Programación
    • Fundamentos de Programación e Ingeniería de Software
    • Herramientas de IA para el trabajo
    • Matemáticas para Programación
    • Programación con Python
    • Programación con JavaScript
    • Programación con TypeScript
    • Programación Orientada a Objetos con Java
    • Desarrollo con C# y .NET
    • Programación con PHP
    • Programación con Go y Rust
    • Programación Móvil con Swift y Kotlin
    • Programación con C y C++
    • Administración Básica de Servidores Linux
  • Negocios
    • Fundamentos de Negocios y Emprendimiento
    • Estrategia y Crecimiento Empresarial
    • Finanzas Personales y Corporativas
    • Inversión en Mercados Financieros
    • Ventas, CRM y Experiencia del Cliente
    • Operaciones, Logística y E-commerce
    • Gestión de Proyectos y Metodologías Ágiles
    • Aspectos Legales y Cumplimiento
    • Habilidades Directivas y Crecimiento Profesional
    • Diversidad e Inclusión en el Entorno Laboral
    • Herramientas Digitales y Automatización para Negocios
  • Blockchain y Web3
    • Fundamentos de Blockchain y Web3
    • Desarrollo de Smart Contracts y dApps
    • Finanzas Descentralizadas (DeFi)
    • NFTs y Economía de Creadores
    • Seguridad Blockchain
    • Ecosistemas Blockchain Alternativos (No-EVM)
    • Producto, Marketing y Legal en Web3
  • Recursos Humanos
    • Fundamentos y Cultura Organizacional en RRHH
    • Atracción y Selección de Talento
    • Cultura y Employee Experience
    • Gestión y Desarrollo de Talento
    • Desarrollo y Evaluación de Liderazgo
    • Diversidad, Equidad e Inclusión
    • AI y Automatización en Recursos Humanos
    • Tecnología y Automatización en RRHH
  • Finanzas e Inversiones
    • Fundamentos de Finanzas Personales y Corporativas
    • Análisis y Valoración Financiera
    • Inversión y Mercados de Capitales
    • Finanzas Descentralizadas (DeFi) y Criptoactivos
    • Finanzas y Estrategia para Startups
    • Inteligencia Artificial Aplicada a Finanzas
    • Domina Excel
    • Financial Analyst
    • Conseguir trabajo en Finanzas e Inversiones
  • Startups
    • Fundamentos y Validación de Ideas
    • Estrategia de Negocio y Product-Market Fit
    • Desarrollo de Producto y Operaciones Lean
    • Finanzas, Legal y Fundraising
    • Marketing, Ventas y Growth para Startups
    • Cultura, Talento y Liderazgo
    • Finanzas y Operaciones en Ecommerce
    • Startups Web3 y Blockchain
    • Startups con Impacto Social
    • Expansión y Ecosistema Startup
  • Cloud Computing y DevOps
    • Fundamentos de Cloud y DevOps
    • Administración de Servidores Linux
    • Contenerización y Orquestación
    • Infraestructura como Código (IaC) y CI/CD
    • Amazon Web Services
    • Microsoft Azure
    • Serverless y Observabilidad
    • Certificaciones Cloud (Preparación)
    • Plataforma Cloud GCP

Platzi y comunidad

  • Platzi Business
  • Live Classes
  • Lanzamientos
  • Executive Program
  • Trabaja con nosotros
  • Podcast

Recursos

  • Manual de Marca

Soporte

  • Preguntas Frecuentes
  • Contáctanos

Legal

  • Términos y Condiciones
  • Privacidad
  • Tyc promociones
Reconocimientos
Reconocimientos
Logo reconocimientoTop 40 Mejores EdTech del mundo · 2024
Logo reconocimientoPrimera Startup Latina admitida en YC · 2014
Logo reconocimientoPrimera Startup EdTech · 2018
Logo reconocimientoCEO Ganador Medalla por la Educación T4 & HP · 2024
Logo reconocimientoCEO Mejor Emprendedor del año · 2024
De LATAM conpara el mundo
YoutubeInstagramLinkedInTikTokFacebookX (Twitter)Threads

Comentarios (62)62 comentarios

Recursos

Un closure es la combinación entre una función y el ámbito léxico en el que esta fue declarada. Con esto, la función recuerda el ámbito con el cual se creó. Puedes entender los closures como: función interna + scope. Mira estos pasos:

  1. Genera una función que retorna una función interna.
  2. Esta función interna tiene un scope, el cual puede ser accedido únicamente por esta función, es decir, las variables, funciones, etc. definidas en el scope solo pueden ser accedidas por la función interna.
  3. Como resultado, esta función interna retornada con su scope será nuestro closure.

Veamos la siguiente imagen para entenderlo mejor. En la imagen FUNCTION es la función interna de la cual hablamos.

https://static.platzi.com/media/user_upload/closure-parts-8921ccbc-074b-4082-a28f-be5a2c01bb0e.jpg

Ámbito léxico

El ámbito léxico se refiere al alcance de una variable siguiendo la cadena de scopes. Una variable se puede abordar 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.

Ejemplo de closure

La mejor manera de entender un closure es por medio de un ejemplo práctico. Cuando declaramos una función dentro de nuestro global scope, estamos usando un closure.

var myVar = 'hi'; functionmyFunction() { console.log(myVar); } myFuntion(); // hi

Los closures son básicamente cuando aprovechamos la habilidad de JavaScript de emplear las variables que están en el scope padre de nuestro bloque de código, por eso el global scope es un closure grande. El bloque myFunction puede utilizar TODAS las variables que están disponibles en el bloque inmediato anterior. Usando el ejemplo visto en el video:

Si tú declaras la variable saveCoins en el global scope, estarías usando el mismo principio que si emplearas la segunda función que escribe el profesor porque estás usando las variables que están en el scope padre.

var saveCoins = 0; const moneyBox = (coins) => { saveCoins += coins; console.log(saveCoins); } moneyBox(5); //5 moneyBox(10); //15

Sin embargo, está mal visto modificar variables globales, por eso es que quieres crear variables dentro de un scope cerrado y que interactúen entre ellas. Entonces, declaras las variables que vas a usar dentro del scope padre del bloque que las va a modificar para que siempre pueda acceder a ellas.

Para eso originas un nuevo “global scope” ficticio que va a conservar todas las variables que tú quieras monitorear. Ahora mira las similitudes entre el código de arriba y el que está justo abajo de aquí:

const moneyBox = () => { var saveCoins = 0; const countCoins = (coins) => { saveCoins += coins; console.log(saveCoins); } return countCoins; } let myMoneyBox = moneyBox() myMoneyBox(4) myMoneyBox(10) myMoneyBox(6)

¡Si remueves " const moneyBox = () => {} " serían exactamente las mismas líneas de código!

//const moneyBox = () => { var saveCoins = 0; const countCoins = (coins) => { saveCoins += coins; console.log(saveCoins); } // return countCoins; //}

Lo que estás haciendo es simplemente bajar un nivel tu scope. Quieres que la función moneyBox regrese una función que estuvo declarada dentro de sí misma porque esa función tiene acceso a ese scope que ya no va a existir para que alguien más lo utilice, solamente lo podrá emplear la función countCoins.

Al guardar el resultado de moneyBox (countCoins) en otra variable estás generando el ámbito léxico que menciona el profesor, necesario para no dejar morir ese scope.

Contribución creada con los aportes de: Andrés Guano, Héctor Eduardo López Carballo y Franks Jhon Colque Zegarra.

Moises Samuel Urias Moreno

Moises Samuel Urias Moreno

Hace 4 años
    Diego Vanegas

    Diego Vanegas

    Hace 4 años
    freddy conto mena

    freddy conto mena

    Hace 4 años
Carlos Andrés Padilla Arroyo

Carlos Andrés Padilla Arroyo

Hace 4 años
Dario Paladines

Dario Paladines

Hace 4 años
    Gianmarco Cueva Apaza

    Gianmarco Cueva Apaza

    Hace 4 años
Kevin Correa

Kevin Correa

Hace 4 años
maximo galarza

maximo galarza

Hace 4 años
Joao Ivan Garduño Salgado

Joao Ivan Garduño Salgado

Hace 4 años
    Zajith Corro Viveros

    Zajith Corro Viveros

    Hace 4 años
    Amartana lng

    Amartana lng

    Hace 3 años
Alejandro Ivan Mendieta

Alejandro Ivan Mendieta

Hace 4 años
Billy  Torres

Billy Torres

Hace 4 años
Luis >

Luis >

Hace 4 años
Rodmy Rivero

Rodmy Rivero

Hace 4 años
    Carlos S. Aldazosa

    Carlos S. Aldazosa

    Hace 4 años
César Palma

César Palma

Hace 4 años
iker goitiandia

iker goitiandia

Hace 4 años
    Beder Danilo Casa Condori

    Beder Danilo Casa Condori

    Hace 2 años
Juan Pablo Quispe Molina

Juan Pablo Quispe Molina

Hace 3 años
Juan Pablo Quispe Molina

Juan Pablo Quispe Molina

Hace 3 años
Freddy Humberto Mendoza Muñoz

Freddy Humberto Mendoza Muñoz

Hace 4 años
Cristian Fernando Villca Gutierrez

Cristian Fernando Villca Gutierrez

Hace 4 años
    Oscar Barajas Tavares

    Oscar Barajas Tavares

    Team Platzi
    Hace 4 años
    Maria Camila Pulido Muñoz

    Maria Camila Pulido Muñoz

    Hace 4 años
David Rangel

David Rangel

Hace 3 años
Julian Roa Villamil

Julian Roa Villamil

Hace 4 años
Daniel Ruben Rivas Saltos

Daniel Ruben Rivas Saltos

Hace 4 años
Ricardo Alfonso Chavez Vilcapoma

Ricardo Alfonso Chavez Vilcapoma

Hace 3 años
  • 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.

Más claro no podria ser moises.

eran 30 minutos en youtube 9 en platzi o un par de parrafos rapido y al grano

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. :)

Yo entendí que primeraFN() tiene que retornar segundaFN() (la función declarada, no la función ejecutada) Quedaría mas o menos así:

function primeraFN(){ const a = 1 return function segundaFN(){ a = a + 1; } }

ó

function primeraFN(){ const a = 1 const segundaFN = function() { a = a + 1; } return segundaFN; }

Esto para que luego se asigne a una variable y se pueda llamar independientemente, como:

const finalFN = primeraFN(); // fianlFN = function segundaFN(){ a = a + 1 }

Nótese que finalFN contiene solamente al hijo mas no al padre. El Closure esta en que estamos accediendo a una variable de la función "padre" desde la función "hijo" aun estando "separado" de este, ya que finalFN no contiene al padre. Esto se debe a que aun habiéndose separado, la variable del padre sigue vinculada a la función hijo por que aun esta accediendo a ella.

Les recomiendo ver este video que es una recomendación de otro compañero.

Y como dijo el compañero Dario, si tienen acotaciones, háganlas. Al final estamos construyendo conocimientos entre nosotros.

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();

Thanks :smile:

Muchas gracias!!

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.

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.

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 pregunta.... porque hat que colocar los return ??? pense que al llamar myFunction todas las function se ejecutaban en cadena

Lo que pasa es que al retornarla, la función no se guarda en memoria como una variable declarada, esto ahorra memoria y "protege" las variables para que sean usadas únicamente en su contexto de ejecución, puedes profundizar con el video que compartio un companero

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())

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.

cierto, me hiciste acordar

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.

Podría decirse que una closure es una manera de resolver problemas en javascript?

Si los entiendes, te ayudarán mucho en tu lógica de programación.

Mira este recurso -> Qué es un closure

Le pregunté al GPT cómo le explicaría un closure de JS a un niño de 10 años, me GUSTÓ la respuesta:

Imagina que estás jugando con bloques de construcción. En JavaScript, a veces tenemos funciones (pedacitos de código) que pueden recordar cosas incluso después de que terminaron de hacer su trabajo. Un "closure" es como si una función guardara en una cajita especial algunos de esos bloques de construcción para más tarde.

Entonces, si una función tiene una cajita especial y guarda algunos bloques adentro, incluso cuando la función termina, esos bloques siguen guardados en la cajita. Puedes pensar en esa cajita especial como un pequeño recuerdo que la función mantiene consigo.

Por ejemplo, imagina que tienes una función que cuenta cuántas veces has dado un paso. Cada vez que das un paso, la función guarda ese número en su cajita especial. Aunque la función termine, aún recuerda cuántos pasos diste porque está guardado en su cajita especial. Esa función es como un "closure" porque mantiene algo (el número de pasos) guardado incluso después de que hizo su tarea principal.

  • 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.

closure.PNG