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

Подписаться 142 тыс.

Просмотров 49 тыс.

50% 1

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
► ru-vid.com?su...
🏆 Si te gusta el contenido que comparto, puedes apoyarme de una manera más directa uniéndote al programa de MIEMBROS del canal
► / @carlosazaustre

Наука

Опубликовано:

17 мар 2021

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 161

@CarlosAzaustre 3 года назад

⬇️ Suscríbete al canal para que no te pierdas vídeos como este ⬇️ ru-vid.com

@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

@franciscomunoz1377 9 месяцев назад

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

@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!!

@samuelangelesgutierrez5208 3 года назад

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

@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

@marinas4475 Год назад

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

@eanappi 3 года назад

Genial, continua con estos video. Gracias

@CarlosAzaustre 3 года назад

Gracias Ernesto :)

@estebangomez3799 3 года назад

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

@alexandradanithansley4938 2 года назад

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

@joseg6675 2 года назад

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

@valkirya65 Год назад

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

@gracielamercado9789 2 года назад

Gracias! muy bien explicado ❤❤❤!

@diazterrom 2 года назад

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

@luisberoiza227 Год назад

Tremanda explicacion. Muchas Gracias, Carlos!

@kikeestrada69 Год назад

Super explicacion Muchas gracias!

@mundomagupe6088 Год назад

Muchas gracias quedo claro.

@henryjoseizquierdovillegas8409 8 месяцев назад

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 🥳🥳

@Razor7w 3 года назад

Gracias por el contenido que das a la comunidad!

@CarlosAzaustre 3 года назад

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

@miguelangelsotom5293 2 года назад

Muy buen contenido, muchas gracias

@cristiandelrio2645 11 месяцев назад

Excelente, gracias

@joseandresjimenezcontreras3160 2 года назад

Que buena explicación !!

@estebancarreno7310 Год назад

muy buena explicacion gracias

@juliorodriguez4946 3 года назад

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

@CarlosAzaustre 3 года назад

Me alegro mucho que te haya servido, Julio :)

@carlosbartolocubas9082 2 года назад

Muy buena explicación 😎

@delcarmat Год назад

gracias muy buen tutorial me costaba entenderlo

@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í.

@alejandrocano88 Год назад

gracias !

@nando.95 3 года назад

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

@CarlosAzaustre 3 года назад

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

@zvzartedigital1003 Год назад

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

@CarlosAzaustre Год назад

Un placer! :)

@diegodelcastillo6625 Год назад

Crack con tus explicaciones

@cristiansegura3352 3 года назад

Gracias, no sabía

@marcelosaravia3347 Год назад

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

@CarlosAzaustre Год назад

🤩

@martinalbarracin9055 3 года назад

otra vez una excelente explicación, gracias crack!

@CarlosAzaustre 3 года назад

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

@maxigarrett3121 3 года назад

Justo lo que estaba buscando. Excelente video me suscribo

@CarlosAzaustre 3 года назад

Yay!! 🙌🙌

@davecast_ 3 года назад

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

@CarlosAzaustre 3 года назад

Muchas gracias Dave!!!

@terry- 4 месяца назад

Genial!

@andresloaiza8051 2 года назад

mucha gracias profe, es facil de entender con la explicacion

@computeraidedyami 2 года назад

@MsElsospechoso28 3 года назад

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

@CarlosAzaustre 3 года назад

@racsoaromserauz Год назад

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

@baylowrecords 2 года назад

Clarisimo gracias

@logaritm0651 Год назад

muuyy buena explicación

@davidmora5249 3 года назад

Ufff, excelente explicación

@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

@ramiroaltamirano4210 3 года назад

me gustó, me suscribo

@Ivan-tu6jd 3 года назад

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 3 года назад

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

@carsdfj 3 года назад

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

@CarlosAzaustre 3 года назад

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

@carsdfj 3 года назад

@@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

@Ditmaros1 2 года назад

Explicación precisa

@william_rmz 2 года назад

Me queda claro

@karsonchik 3 года назад

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

@CarlosAzaustre 3 года назад

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

@MultiTelefono 3 года назад

Excelente Video!!!

@CarlosAzaustre 3 года назад

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

@jmario27 3 года назад

Excelente video, muchas gracias

@CarlosAzaustre 3 года назад

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

@jmario27 3 года назад

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

@jmartinez4906 3 года назад

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

@CarlosAzaustre 3 года назад

A ti Jose Antonio, me alegra haber ayudado 😊

@fibertomasias9309 3 года назад

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

@CarlosAzaustre 3 года назад

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

@vasyldalt8012 5 месяцев назад

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 ?

@fersan1908 3 года назад

Que bueno de verdad

@CarlosAzaustre 3 года назад

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

@brayanolarte3304 3 года назад

Corto y concreto, gracias.

@CarlosAzaustre 3 года назад

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

@brayanolarte3304 3 года назад

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

@CarlosAzaustre 3 года назад

@@brayanolarte3304 tomando nota!

@pepinogdev 3 года назад

Buen video!

@CarlosAzaustre 3 года назад

Gracias Pepino!!

@jeckefe 3 года назад

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

@CarlosAzaustre 3 года назад

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

@Flaminguero14 3 года назад

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 3 года назад

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 3 года назад

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

@TheKillergariman 2 года назад

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

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

@calebmendez2838 3 года назад

Aprendi bastante

@CarlosAzaustre 3 года назад

Genial Caleb!

@cristiantapiaolivera2234 3 года назад

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

@CarlosAzaustre 3 года назад

Gracias Cristian! Me alegra que te sirvan mis explicaciones 😉

@Maiklogi 3 года назад

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 3 года назад

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

@Maiklogi 3 года назад

@@CarlosAzaustre Gracias a ti !

@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: (() => {})();

@racsoaromserauz Год назад

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

@javierloera1247 3 года назад

Estas son iguales a las funciones anonimas autoejecutables?

@jschellDev 3 года назад

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 3 года назад

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 3 года назад

@@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!

@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: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-Mr7M6KmAb_4.html y la tienes aquí runjs.app

@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í :) ru-vid.comMr7M6KmAb_4?feature=share

@germanpinto883 2 года назад

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

@terla1454 2 года назад

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

@cristiancena5757 Год назад

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

@geraldsanchez7772 Год назад

lo que esta utilizando es un programa llamado RunJS

@cristiancena5757 Год назад

@@geraldsanchez7772 muchas gracias

@pikilon 3 года назад

Que tiempos. Gracias

@jask05 3 года назад

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

@CarlosAzaustre 3 года назад

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 3 года назад

@@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

@adolfoc.basiliogeniz5049 3 года назад

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

@CarlosAzaustre 3 года назад

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

@adolfoc.basiliogeniz5049 3 года назад

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

@CarlosAzaustre 3 года назад

@@adolfoc.basiliogeniz5049 puede ser...

@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?

@emmanueltabordav3040 2 года назад

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

@CarlosAzaustre 2 года назад

Es una App, se llama RunJS En este #short lo cuento ;) ru-vid.comMr7M6KmAb_4

@hectorkaizenf.v.7224 2 года назад

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

@cristianarieta3871 3 года назад

Como se llama el editor que utilizas.

@CarlosAzaustre 3 года назад

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

@hendrickgalarza5369 3 года назад

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?

@sony7840 Год назад

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

@elmarcelo8760 3 года назад

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

@CarlosAzaustre 3 года назад

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

@carsdfj 3 года назад

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

@jorgemanuelcontrerasavina3513 3 года назад

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 3 года назад

RunJS :)

@jorgemanuelcontrerasavina3513 3 года назад

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

@CarlosAzaustre 3 года назад

@@jorgemanuelcontrerasavina3513 😻

@villadaniel 2 года назад

preferiria usar clases. Existe alguna ventaja en usar Closures?

@Weagle1337 2 года назад

Carlos vuelveeeeee

@CarlosAzaustre 2 года назад

Estamos trabajando en ello! :)

@Weagle1337 2 года назад

@@CarlosAzaustre kemosion iwi

@CarlosAzaustre 2 года назад

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

@Weagle1337 2 года назад

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

@JhonyHDV Год назад

Que clase de custom Hook es esto

@pieroangulocubas 3 года назад

1er COMENTARIO

@CarlosAzaustre 3 года назад

✌️

@mikehurtado4772 3 года назад

Tu apellido me recuerda a Capitan Alatristre

@CarlosAzaustre 3 года назад

Jajaja si, se parece :)

@thepablopissoni Год назад

Creo que me va a dar un ACV

@freddy9292 2 года назад

me salio tu publicidad :c

@mikehurtado4772 3 года назад

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

@juliorazo2299 3 года назад

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

@mikehurtado4772 3 года назад

@@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