CLOSURES en JavaScript: Qué son y cómo funcionan

Las Closures o Funciones Cierre son una de las partes más importantes sobre JavaScript y que siempre nos provoca ciertas dudas. Con este vídeo te las resuelvo en menos de 10 minutos.
Ya estás un paso más adelante en tu camino para dominar JavaScript!
🔔 No olvides suscribirte y activar la campanita para no perderte ningún vídeo
► kzbin.info...
🏆 Si te gusta el contenido que comparto, puedes apoyarme de una manera más directa uniéndote al programa de MIEMBROS del canal
► / @carlosazaustre

[@CarlosAzaustre]

⬇️ Suscríbete al canal para que no te pierdas vídeos como este ⬇️ kzbin.info

[@juanburns3625]

Claro es como un hook, una forma de mantener un valor vivo sin que se lo lleve el garbage collector, manipulandolo con sus funciones, esta fue la explicación mas clara, excelente

[@irving7653]

Explicado de está manera encontré a los closures un poco parecidos a los custom hooks de react porque también contienen funciones internas y valores los cuales se pueden destructurar para usarlos más fácil y que solo pueden ser modificados dentro del mismo hook. Muchas gracias por la explicación Carlos!!

[@Sandevil]

La mayor diferencia entre un closure como defines al final y una clase, o una Closure que haga uso de prototype aislando el constructor de los métodos, y devolviendo únicamente la función constructora, seria que cada closure así definida va a usar su propia copia de las funciones pudiendo generar un impacto negativo en memoria en el caso de una gran cantidad de objetos. Un gran poder lleva una gran responsabilidad xD

[@franciscomunoz1377]

En 8 min me he enterado de algo que llevaba tiempo sin entender ni papa, gracias Carlos

[@marinas4475]

Genial. En 8 minutos entendí lo que no entendí en más de dos horas de clase. ¡Mil gracias!

[@luisberoiza227]

Tremanda explicacion. Muchas Gracias, Carlos!

[@Razor7w]

Gracias por el contenido que das a la comunidad!

[@CarlosAzaustre]

Gracias a ti Razor! Mientras os sea útil aquí seguiremos :)

[@valkirya65]

Una explicación fácil y clara del uso de closures. Gracias.

[@eanappi]

Genial, continua con estos video. Gracias

[@CarlosAzaustre]

Gracias Ernesto :)

[@estebangomez3799]

Genial Carlos, gracias por tomarte el tiempo para hacer estas cosas fáciles

[@Ivan-tu6jd]

Muy buen vídeo. En apenas 9 min acabo de aprender algo que mejorará mi código de forma sustancial. Un apunte: en la funciones de incrementar y decrementar si se coloca ++ antes de la variable a retornar se obtiene ya el valor 'actualizado'

[@CarlosAzaustre]

Muchas gracias Iván! Por el feedback y me alegro que lo que he comentado en el vídeo te haya servido :)

[@alexandradanithansley4938]

Había leído varios documentos, y videos, pero el más claro es el tuyo. Gracias.

[@edd_gos]

Carlos muchas gracias por el video, estoy aprendiendo JS en Platzi pero este tema no me quedo claro y tu video me ayudo muchismo a entender este tema. Muchas gracias nuevamente

[@marcelosaravia3347]

Excelente explicación...lo pude entender gracias a tu video...

[@CarlosAzaustre]

🤩

[@henryjoseizquierdovillegas8409]

Muchas gracias por tan espectacular clase de CLOSURES. Lo entendí completamente así como también las aplicaciones que este puede tener . Te agradezco demasiado , suscrito y su like de todas maneras 🥳🥳

[@zvzartedigital1003]

El concepto mas claro que encontre sobre closure, muchas gracias!

[@CarlosAzaustre]

Un placer! :)

[@racsoaromserauz]

Muchas gracias maestro, eso sería un patrón modulo?.

[@diegoavendano8165]

Buen vídeo y gracias por el aporte, cabe recalcar que no era necesario la función valor() ya que las otras funciones nos devuelven el resultado incrementado o decrementado solo que se necesita cambiar el _contador++ por ++_contador para que primero se aumente y luego retorne el valor ya incrementado, por decirlo así.

[@carsdfj]

Gracias hermano es información que nunca está demás saber y siempre puede llegar a ser de utilidad

[@CarlosAzaustre]

Muchas gracias ¿Hay alguna otra característica de JavaScript que te genere dudas?

[@carsdfj]

@@CarlosAzaustre si no se si tienes alguno vídeo ya de eso pero que se puede hacer con la fatiga de js hay tantos caminos y tantas sugerencias que aveces no sé por dónde irme empeze hace dos meses aprendiendo angular al cabo de dos semana de estudiar me di cuenta que prefería react pero igual hay tantas cosas que a veces es difícil que no te haga ruido

[@nando.95]

Son videos muy prácticos y bien explicados 👌🏽👨🏽‍💻

[@CarlosAzaustre]

Muchas gracias Fer! ¿Tienes alguna otra duda sobre JavaScript?

[@josedevelop]

Hola Carlos tienes una forma de enseñar muy practica me quedo claro contigo en solo 8 minutos lo capte, gracias

[@mundomagupe6088]

Muchas gracias quedo claro.

[@samuelangelesgutierrez5208]

Buen video para comprender el concepto de Closure, gracias por todo el contenido que subes..

[@juliorodriguez4946]

Gracias Carlos!, claro como el agua. El video preciso que estaba buscando para entender los Closures!

[@CarlosAzaustre]

Me alegro mucho que te haya servido, Julio :)

[@estebancarreno7310]

muy buena explicacion gracias

[@Flaminguero14]

Gran trabajo de divulgación Carlos. Una pregunta, al llamar a incrementar o decrementar muestra el valor pero aún sin actualizar por la operación. Es posible en lugar de hacer _contador++ poner ++_contador y que el valor que devuelva incrementar ya sea el valor incrementado? Espero haberme explicado bien jeje

[@Superpoke1]

Poderse se puede. Pero por consenso, las funciones suelen devolver el estado anterior si el nombre no dice otra cosa. Podrías añadir funciones terminadas en "AndGet" que hagan lo que quieres: incrementarAndGet() devolvería el nuevo valor/estado del contador

[@Flaminguero14]

@@Superpoke1 muchas gracias por la respuesta. Entiendo que lo que me quieres decir es que solo debería incrementar porque es lo que indica el nombre de la función y no debe devolver el resultado y en eso estoy de acuerdo. En este caso, como mostraba el resultado por eso preguntaba. De nuevo muchas gracias ;)

[@cristiandelrio2645]

Excelente, gracias

[@andresloaiza8051]

mucha gracias profe, es facil de entender con la explicacion

[@computeraidedyami]

no

[@MsElsospechoso28]

Impecable explicación, extremadamente fácil de entender, like y me suscribo.

[@CarlosAzaustre]

[@cristiantapiaolivera2234]

Buen video Carlos, esos temas a veces son confusos en JS, pero la forma como lo explicas hace que sea sencillo de entenderlo

[@CarlosAzaustre]

Gracias Cristian! Me alegra que te sirvan mis explicaciones 😉

[@vasyldalt8012]

Carlos si esto nos pemite usar la privacidad de datos que se enncuentran dentro de una funcion, quiere decir que esta manera seria una de las mejores para encapsular en este caso ?

[@angelgarcia6911]

Con el segundo ejemplo me quedo más claro. Se podría decir entonces que un closure es como una "simulación" de una clase? Debido a que a lo primero que lo relaciones (y como mencionas) se parece mucho a la creación de clases en JS. Muchas gracias por el vídeo

[@cristiansegura3352]

Gracias, no sabía

[@diegodelcastillo6625]

Crack con tus explicaciones

[@jmartinez4906]

Muy útil, los closures siempre se me atragantan. Muchas gracias, Carlos.

[@CarlosAzaustre]

A ti Jose Antonio, me alegra haber ayudado 😊

[@maxigarrett3121]

Justo lo que estaba buscando. Excelente video me suscribo

[@CarlosAzaustre]

Yay!! 🙌🙌

[@logaritm0651]

muuyy buena explicación

[@kikeestrada69]

Super explicacion Muchas gracias!

[@Maiklogi]

Pues muy bien explicado sí señor. Aprovecho para preguntar qué usas para que aparezca a la derecha la salida de javascript, uso Visual Studio Code, sé que hay alguna herramienta web que lo hace pero, ¿se trata de algún plugin? gracias !

[@CarlosAzaustre]

Hola Javier! Muchas gracias La herramienta que estoy usando en el vídeo es RunJS. Que permite ejecutar código JavaScript

[@Maiklogi]

@@CarlosAzaustre Gracias a ti !

[@delcarmat]

gracias muy buen tutorial me costaba entenderlo

[@alejandrocano88]

gracias !

[@baylowrecords]

Clarisimo gracias

[@terry-]

Genial!

[@fibertomasias9309]

Explicas muy bien gracias! algun canal como este pero de Python?

[@CarlosAzaustre]

Gracias Fiberto! Pues ahora mismo no recuerdo si hay algún o alguna otra EduTuber que hable sobre Python en español... Pero si encuentras, me interesa

[@jeckefe]

Excelente dato, yo lo uso en express para encapsular los metodos de los servicios sin saber como se llamaban

[@CarlosAzaustre]

Son patrones que usamos sin saber que es un patrón 😅. Me pasa continuamente.

[@Ditmaros1]

Explicación precisa

[@gonzocrazywastaken]

Hola! Muchas gracias por tu aporte. Qué usas para ir escribiendo y te muestre en el momento lo que se imprime en consola a la derecha? Soy nuevo en esto y estoy buscando herramientas. :D

[@CarlosAzaustre]

Hola Gonzalo! es una herramienta que se llama RunJS, la tienes en runjs.app :)

[@gracielamercado9789]

Gracias! muy bien explicado ❤❤❤!

[@TheKillergariman]

que terminal usa Carlos, o que gestor de codigo es. les agradeceria mucho

[@william_rmz]

Me queda claro

[@miguelangelsotom5293]

Muy buen contenido, muchas gracias

[@terla1454]

Muchas gracias! Resumen: Un closure es como un calcetín dentro de otro calcetín con otros calcetines dentro de otro calcetín! (aunque creo que esto sería mas bien un callback)

[@racsoaromserauz]

esos seíra un callback hell

[@ramiroaltamirano4210]

me gustó, me suscribo

[@joanjoan8845]

Excelente video! muy gráfico y explicativo. En que se diferencia a un IIFE?

[@CarlosAzaustre]

Si no me equivoco, una IIFE es prácticamente llamar a un Closure y se ejecute. Ejemplo: Closure (() => {}); IIFE: (() => {})();

[@martinalbarracin9055]

otra vez una excelente explicación, gracias crack!

[@CarlosAzaustre]

Muchas gracias Martin! Lo importante es que os sirva :)

[@fersan1908]

Que bueno de verdad

[@CarlosAzaustre]

Muchas gracias! ¿Algún otro concepto que te gustaría que explicase?

[@racsoaromserauz]

como se llama la extensión que usa para ver el retorno de las funciones;

[@joseandresjimenezcontreras3160]

Que buena explicación !!

[@carlosbartolocubas9082]

Muy buena explicación 😎

[@davecast_]

Excelente explicación crack!! 👌👏👏💪 Saludos

[@CarlosAzaustre]

Muchas gracias Dave!!!

[@brayanolarte3304]

Corto y concreto, gracias.

[@CarlosAzaustre]

Muchas gracias Brayan! ¿Hay alguna otra particularidad que tengas dudas sobre JavaScript?

[@brayanolarte3304]

@@CarlosAzaustre mas que js, tengo dudas sobre reactividad. Veo que es algo que cada vez se escucha mas, quisiera saber mas sobre eso.

[@CarlosAzaustre]

@@brayanolarte3304 tomando nota!

[@germanpinto883]

o sea un clusere es lo mismo q IIFE Immediately Invoked Function Expressions ??

[@HenrySalinasJva]

Exelente, por preguntarte como se llama la herramienta q utilizas para hacer el tutorial

[@CarlosAzaustre]

Se llama RunJS. Lo explico en este vídeo de aquí :) kzbin.infoMr7M6KmAb_4?feature=share

[@jmario27]

Excelente video, muchas gracias

[@CarlosAzaustre]

Muchas gracias Mario! ¿Tienes más dudas sobre otros aspectos de JavaScript?

[@jmario27]

@@CarlosAzaustre la verdad si hay algo que aun no comprendo del todo, las funciones flecha en javascript

[@javierloera1247]

Estas son iguales a las funciones anonimas autoejecutables?

[@PoderDigit4l]

Hola ! ¿ Que editor de código usas en el video ?

[@CarlosAzaustre]

Hola Javier! es una herramienta que se llama RunJS, lo explico en este short: kzbin.info/www/bejne/g6OafmmBoqaVlZY y la tienes aquí runjs.app

[@davidmora5249]

Ufff, excelente explicación

[@lortyaitor]

Hola, yo creo que te ha faltado enseñar una función privada, una que no se exponga al exterior y solo se pueda llamar desde dentro. ¿No crees?

[@calebmendez2838]

Aprendi bastante

[@CarlosAzaustre]

Genial Caleb!

[@hectorkaizenf.v.7224]

¿entonces despues de ES6 ya no debemos usar closures, entonces solo usamos clases?

[@karsonchik]

Muy útiles tus vídeos ;) sigue así :)

[@CarlosAzaustre]

Gracias Denis! ¿Algún otro concepto de JavaScript qué te gustaría que explicara o tengas dudas?

[@cristiancena5757]

Hola Carlos cómo se llama ese plugin que te permite ver una consola dentro del editor?

[@GerdSa]

lo que esta utilizando es un programa llamado RunJS

[@cristiancena5757]

@@GerdSa muchas gracias

[@emmanueltabordav3040]

gente ¿que tal?, que usa carlos para que al lado corra el javascript ? es alguna extension ?

[@CarlosAzaustre]

Es una App, se llama RunJS En este #short lo cuento ;) kzbin.infoMr7M6KmAb_4

[@sony7840]

Que locura yo las usaba y ni siquiera sabía que se llaman clousures

[@MultiTelefono]

Excelente Video!!!

[@CarlosAzaustre]

Muchas gracias Jeff! ¿Tienes alguna otra duda sobre JavaScript?

[@hendrickgalarza5369]

Este ejemplo fue extraído de la documentación a qué si! La leí hace unos meses jaja y no le ví mucha utilidad, que opinan?

[@adolfoc.basiliogeniz5049]

Que plugin usas de vscode para mostrar la salida de js?

[@CarlosAzaustre]

Hola Adolfo! En este vídeo no uso VSCode. Es un programa que se llama RunJS, sirve para ejecutar código JavaScript

[@adolfoc.basiliogeniz5049]

@@CarlosAzaustre oh! Jaja la costumbre 😅 igual se ve genial 👌existirá algo así para vscode?

[@CarlosAzaustre]

@@adolfoc.basiliogeniz5049 puede ser...

[@jask05]

Muchas gracias. No termino de verle la utilidad con respecto a las clases. Sería posible una aclaración ? Muchas gracias

[@CarlosAzaustre]

Claro, ten en cuenta que la “clases” son relativamente nuevas. Antes no teníamos eso y ahora aunque se puede usar “class” por debajo no deja de ser una función aplicándole un clousure.

[@jask05]

@@CarlosAzaustre Genial mil gracias. Yo vengo de la vieja escuela de JS y a partir de ES6 en adelante para mi es un mundo jajajaja

[@jschellDev]

Muy buen video Carlos y buena explicación, antes de las clases en JS solía utilizar objetos bastante grandes con variables y funciones dentro ya la verdad que quedaba bastante prolijo el código de esa manera.

[@CarlosAzaustre]

Si, era la manera, objetos y Heredar de Prototype. Ahora con las clases no es necesario todo esto, pero está bien saber cómo funciona

[@jschellDev]

@@CarlosAzaustre exactamente, bueno, al final en algunas entrevistas te preguntan este tipo de cosas, por lo tanto es bueno saberlo, gracias por el vídeo!

[@carsdfj]

siempre regreso para aca a refrescar parece simple pero me cuesta acordarme cuando llevo un tiempo sin usar nada de esto jejeje soy novato que mas

[@pepinogdev]

Buen video!

[@CarlosAzaustre]

Gracias Pepino!!

[@cristianarieta3871]

Como se llama el editor que utilizas.

[@CarlosAzaustre]

Es una herramienta que se llama RunJS y te permite ejecutar código JavaScript. No es un editor porque no guarda los cambios, sirve para hacer pruebas y ver el resultado rápidamente :)

[@elmarcelo8760]

Lo que no entendí en horas, lo entendí en minutos, gracias bro

[@CarlosAzaustre]

Oh! Muchísimas gracias Elmar! :) Me agrada que te haya servido mi explicación :)

[@pikilon]

Que tiempos. Gracias

[@jorgemanuelcontrerasavina3513]

Alguien sabe cuál es la herramienta que usa Carlos para escribir el código y se esté compilando/corriendo en tiempo real? saludos

[@CarlosAzaustre]

RunJS :)

[@jorgemanuelcontrerasavina3513]

Muchas gracias por tu respuesta Carlos, eres muy grande, saludos desde México :3

[@CarlosAzaustre]

@@jorgemanuelcontrerasavina3513 😻

[@villadaniel]

preferiria usar clases. Existe alguna ventaja en usar Closures?

[@Weagle1337]

Carlos vuelveeeeee

[@CarlosAzaustre]

Estamos trabajando en ello! :)

[@Weagle1337]

@@CarlosAzaustre kemosion iwi

[@CarlosAzaustre]

@@Weagle1337 hahaha mientras me puedes ver en Twitch cuando estoy en vivo Twitch.tv/carlosazaustre

[@Weagle1337]

@@CarlosAzaustre clarooo me pasare en un dia de estos c:

[@JhonyHDV]

Que clase de custom Hook es esto

[@thepablopissoni]

Creo que me va a dar un ACV

[@mikehurtado4772]

Tu apellido me recuerda a Capitan Alatristre

[@CarlosAzaustre]

Jajaja si, se parece :)

[@freddy9292]

me salio tu publicidad :c

[@mikehurtado4772]

Hacer eso con funciones es una locura. Es mejor usar objetos

[@juliorazo2299]

Como conviertes a privados los atributos en una clase? tengo entendido que solo con Typescript

[@mikehurtado4772]

@@juliorazo2299 Exactamente igual. Los objetos declarados dentro de una función solo son accesibles dentro de esa funcion. En todo caso, ya hay una propuesta para tener miembros privados dentro de un objeto

[@caninostudio9958]

Te recomiendo indagues mas en el tema de las closures, veras que la esencia de una closure no esta en comprarse con una clasey te sera util.

[@mikehurtado4772]

@@caninostudio9958 Uso closures a diario

[@pieroangulocubas]

1er COMENTARIO

[@CarlosAzaustre]

✌️

[@alejandrovergara1458]

me dejas la suscripción a 1000?

[@GermanSYK]

Genial!

[@CarlosAzaustre]

Gracias Germán ! ¿Hay alguna otra característica de JavaScript que tengas dudas?

[@GermanSYK]

@@CarlosAzaustre No por ahora pero lo tengo presente! Gracias.