Closures in JavaScript | Inside a loop, inner function and setTimeoout

Sdílet
Vložit
  • čas přidán 15. 04. 2018
  • JavaScript closure fundamentals. Why do we use closures?, how closures work inside a block scope, inner function, callback function and setTimeouts?. How to solve some closure related issues in a for loop.
    Please be my patreons on patreaon
    * / techsith
    Follow me for technology updates
    * / techsith
    * / techsith1
    Help me translate this video.
    *
    Note: use translate.google.com/ to translate this video to your language. Let me know once you do that so i can give you credit. Thank you in advance.
    Please be my patreons on patreaon
    * / techsith
    Follow me for technology updates
    * / techsith
    * / techsith1
    Help me translate this video.
    * czcams.com/users/timedtext_vide...
    Note: use translate.google.com/ to translate this video to your language. Let me know once you do that so i can give you credit. Thank you in advance.
    Keywords: JS Closures, JS Closure, JavaScript Closures, JavaScript Closure, lexical Scope, inner function, IIFE, closure inside a loop. Interview Question.
  • Věda a technologie

Komentáře • 490

  • @ravikumaryazali2529
    @ravikumaryazali2529 Před 3 lety +18

    I can proudly say that watching your JavaScript videos changed my knowledge level from beginner to medium, I know JS is like an ocean. Waiting on more n more videos from you. Thanking you is not just enough though

    • @Techsithtube
      @Techsithtube  Před 3 lety +2

      Great to hear! I will keep putting more such videos.

  • @kensleylewis
    @kensleylewis Před 3 lety +2

    This is the first visual example of showing how let is different from var. Thanks for sharing this!

  • @scbu92
    @scbu92 Před 6 lety +10

    I was always confused by the setTimeout with closures. Thank you for finally clearing that up for me!

    • @Techsithtube
      @Techsithtube  Před 6 lety +1

      I am glad you got it. Thanks for watching!

    • @momithachoubey786
      @momithachoubey786 Před 4 lety +1

      @@Techsithtube hello.... Can u really provide ur JavaScript tutorial to us, full course??? PLEASE...🙏🙏🙏
      BTW LEMME TELL U I AM A BIG FAN OF URS... PLEASE PROVIDE ME UR CLASS DETAILS, REALLY WANNA LEARN FROM YOU SIR

  • @rick_from_yr
    @rick_from_yr Před 5 lety +16

    Seriously, the best tutorial I've ever seen about closures :D

  • @timfrailey1492
    @timfrailey1492 Před 5 lety +2

    Have read tons of closure examples and tutorials and I feel like have had a good understanding of them, but no one really broke it down in the way you did with each loop iteration. That is really the key to understanding why things are happening as they are. Great tutorial -- all of your videos are awesome

    • @Techsithtube
      @Techsithtube  Před 5 lety

      Tim, I am glad that you leaned from it. Thanks for watching

  • @flyingbirds4235
    @flyingbirds4235 Před 6 lety +116

    I started learning JS because of techsith.

    • @Techsithtube
      @Techsithtube  Před 6 lety +12

      I am glad you did. Thanks for watching!

    • @phalguniroy3351
      @phalguniroy3351 Před 4 lety +5

      @@Techsithtube me too. JavaScript seems very much clear after your videos.

  • @aishwersharma8130
    @aishwersharma8130 Před 5 lety +12

    Thanks.Your effort deserves a bigggg like.

  • @shadymohammed3197
    @shadymohammed3197 Před 5 lety +4

    Every time I watch this video I'd like to like it again!
    You're an awesome teacher!

  • @mptakable
    @mptakable Před rokem +1

    Thanks man for explaining a setTimeout inside for a loop with a var. It's priceless 👌🏻

  • @murrayKorir
    @murrayKorir Před 5 lety +9

    OmG this man is the man... I was using for loop with multiple queries inside it and several other callbacks, then at the end I had put a condition to check that the loop had finished, then finalize with a last update query..so the loop always ended before even the queries had finished processing what ta ef man!! it drove me crazy for days checked on stack overflow for solutions but those solutions were just too thick to understand so I found techsith, he explains it very well and made it look so easy. Thanks a lot of this. subscribed, liked and shared. The example with setTimeout() was a mind opener I was able to see the entire code universe, everything now made sense. wonderful work.

    • @Techsithtube
      @Techsithtube  Před 5 lety +2

      Carlos, I am glad that you finally got it. Please check it out my video on async await, that can be very useful. Thanks for watching!

  • @zt.5677
    @zt.5677 Před 4 lety +1

    I saw your Javascript Closure tutorial ( Closures Explained ) from 2015 as well. Both of them are very good. Thank you for keeping both of them.

  • @Karan60191
    @Karan60191 Před 6 lety +1

    wow that var and let concept for closures gave me goosebumps, well done Mr. Patel :)

  • @MrBulciu
    @MrBulciu Před 4 lety +4

    Woah, nice tutorial! I just found your channel and it is amazing. I didn't even feel those 16 minutes pass while watching. Thanks for making top notch content!

    • @Techsithtube
      @Techsithtube  Před 4 lety

      I am glad that you learn something . Thanks for watching!

  • @prasadambaledath7699
    @prasadambaledath7699 Před 5 lety +1

    Wow , what an explanation about 'Closures' ! clear and precise !! Thanks a lot techsith !

  • @suprajakoppisetty8231
    @suprajakoppisetty8231 Před 6 lety +5

    Awesome, I have been struggling to understand many concepts and your tutorials are life savers! :D

    • @Techsithtube
      @Techsithtube  Před 6 lety

      I am glad that they helped you . Thanks for watching!

  • @savitrimhatre2636
    @savitrimhatre2636 Před 4 lety +1

    This is the best tutorial ever I have came acrossed to learn Closure, difference between using var and let .
    I was really looking out for the explanation to the problem which you explained in the later part of the video. Thank you so much for the best explanation.

  • @krishnareddyrenabothu1409

    Great stuff, now its clear picture, added some more good stuff, thank you

  • @benogidan
    @benogidan Před 6 lety

    I'm glad you are going over this again dude. I was actually going to send you an email to convince you to do another. Thaks

  • @achyutrastogi8080
    @achyutrastogi8080 Před 4 lety

    Awesome, it's not the most complete video, but it explains a lot that most closure videos don't. Good job.

  • @jabezsamson
    @jabezsamson Před 3 lety

    Your explanation is just out of this world! Thanks, man! You helped me a lot!

  • @AddictedToCode387
    @AddictedToCode387 Před 3 lety

    probably the best video about this theme i have found so far, extra , perfect :)

  • @bhanupartapsingh3166
    @bhanupartapsingh3166 Před 5 lety +7

    bro love love love love u ... it took me time to understand closure loop but end of day ... it is deep understanding knowledge and I am beginner so it's so useful for me .... liked shared ...already subscribed

    • @Techsithtube
      @Techsithtube  Před 5 lety

      I am glad that you got it in the end. Keep learning! Thanks for subscribing!

  • @deeproy7292
    @deeproy7292 Před 5 lety +1

    you blew my mind with that example...thank you!

  • @cmoney1928
    @cmoney1928 Před 5 lety

    Best explanation of this concept I have seen. I always do this but never understood why it worked.

  • @shibnathroy106
    @shibnathroy106 Před 6 lety

    Thank you for making such high-quality content available to us for *free* .

  • @Mrdeepak8167
    @Mrdeepak8167 Před 6 lety +6

    Thanks! Please also create a video on different kind of loops and their differences.

  • @bhanubaghel3012
    @bhanubaghel3012 Před 5 lety

    every time whenever i see your videos something new is must in your videos what i don't know it's a real tech chennal

  • @emilewamsteker3412
    @emilewamsteker3412 Před 5 lety

    Hey Techsith, Thanks for taking the time do this video. This is a great explanation.

    • @Techsithtube
      @Techsithtube  Před 5 lety

      I am glad that it helped. Thanks for watching Emile.

  • @blackmamba6205
    @blackmamba6205 Před 4 lety +1

    I have watched a lot of JS tutorials, but I really understood it because of techsith! You are a gem my friend... Thank you!

  • @ruchirai5775
    @ruchirai5775 Před 5 lety +2

    Techsith- Genius , thanks for this video

  • @vivekvanga3588
    @vivekvanga3588 Před 6 lety +4

    Well explained sir... Thank you

  • @threeone6012
    @threeone6012 Před 6 lety +1

    Mind blown!
    Great upload.

  • @sunsneez
    @sunsneez Před 4 lety +2

    Love your videos!! They are so helpful. Thank you.

    • @Techsithtube
      @Techsithtube  Před 4 lety +1

      thanks for watching Lexi. Keep on learning!

  • @Gwith126
    @Gwith126 Před 6 lety +4

    Wow, great video and released on my birthday!

  • @alex-front-end
    @alex-front-end Před 6 lety +2

    The best of the best! Thank you

  • @ritendrasingh7491
    @ritendrasingh7491 Před 5 lety +1

    Well explained, thanks for the nice tutorial.

  • @mmmmmmm8706
    @mmmmmmm8706 Před 4 lety

    That's the best video thumbnail I've seen on CZcams! One of the best on closures too.

    • @Techsithtube
      @Techsithtube  Před 4 lety

      Thanks you . I put lot of thought in each thumbnail .

  • @sujanmahmud9168
    @sujanmahmud9168 Před 4 lety

    Thank you, all of your videos are really good and better descriptive.

  • @daliborkozar870
    @daliborkozar870 Před 3 lety +4

    I advanced in JS and working in react and I just forget things, this is a great refresher

    • @Techsithtube
      @Techsithtube  Před 3 lety

      I am glad that you think so . Keep on learning!

  • @dhimanchakraborty5639
    @dhimanchakraborty5639 Před 4 lety +1

    The best tutorial I have seen ever.

  • @himanshusharma3157
    @himanshusharma3157 Před 5 lety +35

    First half summary:
    "closure is a function which remembers its dependencies, so that it can be used outside of containing function." pretty simple...
    Second half summary (after for loop):
    it was about difference between var and let keywords. good example to explain scopes. but i din't understand how is related to closures. please explain that.

    • @satlibwanzai111
      @satlibwanzai111 Před 4 lety

      It demonstrates how the results of closure are changed by block-scope and function-scope.

    • @ExtraordinaryAF
      @ExtraordinaryAF Před 4 lety +1

      You are right. He used closure to show the difference between var and let. var uses functional scope, so the variable 'i' in the closure of the set timeout function keeps getting updated (its the way var works). Let uses block scope, so the variable 'i' in the closure of the set timeout function does not get updated.

    • @theskydeath
      @theskydeath Před 4 lety +5

      If you look closely, the settimeout function executes a callback at later point in time. And by later point means when the outer function has been already executed and it's variable, i, is not present in the lexical scope, But even then callback can access, value of i and that's the magic of closure.

    • @MinecraftN3rd
      @MinecraftN3rd Před 4 lety +1

      with the var keyword in the set Timeout function, the function always updates to the new value of i. Each of the setTimeout functions update to the new value of i after the for loop is finished, because the I in the setTimeout has function scope, which means the variable is visible only inside the function. Where as with "Let" a new variable is used for each of the SetTimeout functions, so the I isnt updated to 3 at the end like all the others. Think of the run time of the for loop is much less than the setTimeout function.

  • @joesmi8638
    @joesmi8638 Před 5 lety +2

    This is a super good explanation. Thx.

  • @davidklm1
    @davidklm1 Před 5 lety +4

    Thanks alot techsith

  • @henokgebremedhn1802
    @henokgebremedhn1802 Před 3 lety

    Best tutorial about closures by far, Thank you.

  • @christianteller661
    @christianteller661 Před 4 lety

    Great examples, thanks for your time!

  • @TechAahar
    @TechAahar Před 3 lety

    Great explanation with clear situations, thank you for sharing with us.

  • @eddiegere
    @eddiegere Před 5 lety

    Great Teacher!!! Awesome tutorial!

  • @ajotel94
    @ajotel94 Před 6 lety +2

    Great video, as always! ;)

  • @ramdhenudhunia1507
    @ramdhenudhunia1507 Před 5 lety +2

    Well explained sir, hats off to you

  • @anonymous.youtuber
    @anonymous.youtuber Před 4 lety +2

    Finally I understand this. Thank you so much ! 🙏🏻

  • @muneerahmad1428
    @muneerahmad1428 Před 6 lety +1

    i liked it before watching it even before you said to "like it before watching it", as i have watched few JS tutorials on your channel in last few hours ,, cant resist clicking the "Like" button and yeah i am a subscriber now,,, Thank you so much for your efforts, #RespectForYou

  • @asitgupta4299
    @asitgupta4299 Před 6 lety +1

    Please you be in good mood and keep uploading useful tutorial for us..Well explained ..thnks Sir :)

  • @ankitapagaria8610
    @ankitapagaria8610 Před 4 lety

    I've seen so many definitions for closures but never really understood it. This video cleared a lot of doubts for me. Thank you!

  • @manendra19
    @manendra19 Před 5 lety +1

    Great explanation of this problem.

  • @xxdreadsaintxx
    @xxdreadsaintxx Před 4 lety

    Mind blown! Never would have thought to look at it that way

  • @fameenaibrahim8764
    @fameenaibrahim8764 Před 5 lety +1

    thank you for the very good tutorial

  • @arturonavarrete8359
    @arturonavarrete8359 Před 5 lety +1

    Hello, i have watched your videos and the way you explain the concepts are amazing.

    • @Techsithtube
      @Techsithtube  Před 5 lety

      Thank you Arturo for watching and awesome comment. :)

  • @WasimKhan-0801
    @WasimKhan-0801 Před 6 lety

    Nice that clear my concept of closure

  • @LtKeyser
    @LtKeyser Před 3 lety

    In any of your tutos I learn some great trick. This console.dir thing is sweet. I'm still learning so I only know that much. Still I haven't seen it anywhere else and I've been doing quite a lot of reading and viewing these days. Good for you.

  • @climbers1376
    @climbers1376 Před 5 lety +7

    7:03 block function
    7:39 closures only show used variables within specified block function (shown via console.dir)
    8:13 articulating closure

  • @shikharchaudhary6984
    @shikharchaudhary6984 Před 5 lety +1

    Amazing explanation.

  • @cancanjaker1620
    @cancanjaker1620 Před 4 lety

    Very good explanation of closure from a new perspective.

  • @kmylodarkstar2253
    @kmylodarkstar2253 Před 4 lety

    Amazing dude. Really thanks, it's so important to learn by theory, examples and then challenges

    • @Techsithtube
      @Techsithtube  Před 4 lety

      Glad you think so! Fundamentals would take you far.

  • @fullstacktutorials2883

    Awesome man! keep doing good work. May God bless you and fulfill all your dreams.

  • @diwakarnrp2092
    @diwakarnrp2092 Před 5 lety +2

    Your explanation is super sir

  • @MdSarfarazAlamMDSA
    @MdSarfarazAlamMDSA Před 6 lety +3

    It's very useful tut.

  • @reynandelizo1480
    @reynandelizo1480 Před 4 lety

    Hi sir thanks for your hard work to share your knowledge in closure It helps me to understand more how to use closure..

  • @narsingyadav667
    @narsingyadav667 Před 5 lety

    very good teacher, the way you try to explain is awesome

  • @milindkhadse556
    @milindkhadse556 Před 3 lety

    Very helpful tutorial I don't know this differences. Thank you

  • @priteshm6823
    @priteshm6823 Před 3 lety

    your videos make learning super easy. Thanks man

  • @prakashbalaji2336
    @prakashbalaji2336 Před 3 lety +1

    Thanks a lot...man you cleared the my all the doubts about closures

  • @muhammadovaissiddiqui3895

    Thank u Sir! 👏 block and functional scope concepts are also cleared now with closures! ♥️

  • @viki_sky007
    @viki_sky007 Před 5 lety

    wow dats the problem i was solving last night. animating two arrows within .active class slider. JS can make u sometimes crazy. thanks techsith

  • @qariuki2587
    @qariuki2587 Před 2 lety +6

    Two things are happening here. one is hoisting where the 'i' becomes a global variable because of the use of Var which has no block scoping. The second is how the stack treats WebApi callback functions such as setTimeout. Each time the stack encounters setTimeout callback functions, execution is deferred to avoid blocking the main thread. however, the for loop still runs each time updating the value of 'i' and creating the callback functions( execution is deferred until the stack is empty). when the call back functions eventually get in the stack, their reference of 'i' has long been set to the upper limit of the for..loop and they console log this upper value. Use of IIFEs or keyword let solves this issue.

  • @alwaseem5309
    @alwaseem5309 Před 5 lety +1

    Outstanding !!!

  • @atalaguitare13
    @atalaguitare13 Před 3 lety

    You are absolutely right, I get an interview last week with a closure inside a loop question hahaha

  • @saida584
    @saida584 Před 4 lety

    You are REAL master. Keep Teaching us with same passion .Take a bow bro

  • @Rajinderdung
    @Rajinderdung Před 5 lety +1

    Great tutorial

  • @aman0591
    @aman0591 Před 4 lety +1

    Great work

  • @SumitJaiswalIndore
    @SumitJaiswalIndore Před 4 lety

    Great explanation by @
    techsith . thanks you for save our time.

  • @AhmedMohammed-gy7mt
    @AhmedMohammed-gy7mt Před 5 lety

    What an awesome tutorial
    I started love JS because of techsith

    • @Techsithtube
      @Techsithtube  Před 5 lety

      I am glad to have inspired you . Keep learning!

  • @VishnuvardanRS
    @VishnuvardanRS Před 6 lety

    I am really glad, I found your channel!

  • @saurabhjarande5585
    @saurabhjarande5585 Před 3 lety

    Thank you Sir. You explanation and topics r very nice. It actually helps.

  • @sidramaraddyhosamani819

    best tutorial keep inspiring us.

  • @shohruxdavronbekovich8267

    Great explanation!!! Thank you for your help!!!

  • @subhashvishwakarma5203

    Really awesome ....big thanks to you for such videos

  • @TheRaghavboyz
    @TheRaghavboyz Před 6 lety

    clear and concise.

  • @fazalzarif7986
    @fazalzarif7986 Před 5 lety +2

    I really appreciate the way it is explained.

  • @Sleepytj007
    @Sleepytj007 Před 4 lety

    Thank you for the lessons

  • @cooldezign
    @cooldezign Před rokem +1

    Your explanation is crystal clear !!!

  • @alexbauer1193
    @alexbauer1193 Před rokem

    I loved your video. You're doing a great job.

  • @maheshnallabothula7488

    Simple Awesome. well explained TX

  • @kshitizshah6685
    @kshitizshah6685 Před 3 lety +1

    He has got guts and confidence , Salute !

  • @razinmemon8766
    @razinmemon8766 Před 5 lety +1

    I really like your video + screen capture tool, which is it?

  • @ammujosephshajan2460
    @ammujosephshajan2460 Před 4 lety

    Super cool and i really loved it

  • @zakiahmed3198
    @zakiahmed3198 Před 3 lety

    your videos are such incredible js tutorial i have ever seen in youtube

  • @alvaroprietovideos
    @alvaroprietovideos Před 2 lety

    Good video! Thanks for sharing

  • @hans-detlefbrix8004
    @hans-detlefbrix8004 Před 5 lety

    well explained...thanks

  • @erezlieberman
    @erezlieberman Před 5 lety

    great video, thanks.

  • @purvasawant6169
    @purvasawant6169 Před 5 lety

    This couldn't be a coincidence that I already liked your video before watching it completely. Time of the video 1:17 seconds, video liked. I wish there was a super like button.