No video

Learn Closures In 13 Minutes

JavaScript Simplified Course: javascriptsimp...
FREE JS Array Methods Cheat Sheet: webdevsimplifi...
FREE JS DOM Traversal Cheat Sheet: webdevsimplifi...
FREE JS DOM Manipulation Cheat Sheet: webdevsimplifi...
Closures are one of the core features of JavaScript that every developer needs to understand. You not only need to know what they are and how they work, but you also need to have a deep understanding of various niche behaviors of closures since many jobs will ask you complex interview questions on closures. In this video I will cover what closures are, how they work, and multiple example interview questions so you can be prepared for whatever gets thrown at you.
📚 Materials/References:
JavaScript Simplified Course: javascriptsimp...
FREE JS Array Methods Cheat Sheet: webdevsimplifi...
FREE JS DOM Traversal Cheat Sheet: webdevsimplifi...
FREE JS DOM Manipulation Cheat Sheet: webdevsimplifi...
Scoping Video: • If You Cannot Name All...
Scoping Article: blog.webdevsim...
Garbage Collection Video: • Only The Best Develope...
Strict Mode Video: • JavaScript Was So Bad ...
ES6 Modules Video: • JavaScript ES6 Modules
ES6 Modules Article: blog.webdevsim...
Arrow Functions Video: • JavaScript ES6 Arrow F...
Arrow Functions Article: blog.webdevsim...
Let vs Var vs Const Video: • Differences Between Va...
Let vs Var vs Const Article: blog.webdevsim...
🌎 Find Me Here:
My Blog: blog.webdevsim...
My Courses: courses.webdev...
Patreon: / webdevsimplified
Twitter: / devsimplified
Discord: / discord
GitHub: github.com/Web...
CodePen: codepen.io/Web...
⏱️ Timestamps:
00:00 - Introduction
00:50 - What Is A Closure
05:40 - Why Are Closures Important
08:36 - Closure Interview Questions
#Closures #WDS #JavaScript

Пікірлер: 90

  • @usmanquickcode
    @usmanquickcodeАй бұрын

    I just gave my interview and in this interview they asked me about closures. which ofcourse i have no idea. I have used it but no idea what is called. and i open my youtube and boom you are there. really like the simple explaination.

  • @anothermouth7077

    @anothermouth7077

    Ай бұрын

    Those know-it-all interviewers always play with these gotcha questions which are not even practical anymore

  • @looming_

    @looming_

    Ай бұрын

    @@anothermouth7077closures are pretty important tho

  • @thecoolnewsguy

    @thecoolnewsguy

    Ай бұрын

    Such useless interview questions. They really need to ask about the job instead of stupid shit that you're not gonna use 95% of the time

  • @jessecalato4677

    @jessecalato4677

    Ай бұрын

    ​@thecoolnewsguy you will use closures constantly though, and terminology is important for proper communication...

  • @thecoolnewsguy

    @thecoolnewsguy

    Ай бұрын

    @@jessecalato4677 I know. Yes closures are used extensively but asking about the var gotcha in a loop is just stupid like who's gonna use var in 2024 for a new code?

  • @joesharp3580
    @joesharp358020 сағат бұрын

    Just incredible video as always. Somehow you always get to the absolute core of a concept and then demonstrate it beautifully

  • @RaimundoAraujoCorrea
    @RaimundoAraujoCorreaАй бұрын

    I use one type closure all the time, combined with promises, when I have to execute a function on an array of data asynchronously, all you have to do is return a promise with a function, inside create a couter at 0, create the function thats going to process an entry, before return, incremente the counter, and excecute the inner function again, when its done, resolve the promise.

  • @mewansynniang1902
    @mewansynniang190227 күн бұрын

    Beautifully explained

  • @xzex2609
    @xzex2609Ай бұрын

    React vue and angular use closures all the time , all functional components are closures

  • @maciejzettt

    @maciejzettt

    Ай бұрын

    As well as state management is

  • @Regeneration1996

    @Regeneration1996

    Ай бұрын

    And react hooks to 😅

  • @xzex2609

    @xzex2609

    Ай бұрын

    @@Regeneration1996 of course in the end a hook will return some functions as objects and states too , when I was said react I mean most of it uses closures

  • @PavloBozhok
    @PavloBozhokАй бұрын

    Thanks a lot, I know and remember how closure works in javascript, but I never knew about something tricks.

  • @mhadi-dev
    @mhadi-devАй бұрын

    Best used in Factory design pattern.

  • @24306529
    @24306529Ай бұрын

    dude be selling 10 other videos within 1 video

  • @captkalik
    @captkalikАй бұрын

    That for loop let var closure interview question is just brutal

  • @matheusneves688
    @matheusneves688Ай бұрын

    Thank you! Amazing content!

  • @himalayagupta7744
    @himalayagupta7744Ай бұрын

    I had doubts for this last example, so I asked gpt to explain it to me deeply. It errored the first few times but at last gave the correct answer which claude also verified. Yes, for each iteration of the loop, a new scope is created, and within that scope, a new binding for the variable i is created. Here’s a detailed breakdown: First Iteration (i = 0): A new scope is created. A new binding for i is created and initialized to 0. The setTimeout callback captures this binding, so it logs 0. Second Iteration (i = 1): A new scope is created. A new binding for i is created and initialized to 1. The setTimeout callback captures this binding, so it logs 1. Third Iteration (i = 2): A new scope is created. A new binding for i is created and initialized to 2. The setTimeout callback captures this binding, so it logs 2. In each iteration, the let declaration ensures that i is re-declared and re-initialized within the new scope. This results in three separate bindings for i, each one unique to its iteration.

  • @jovi9918
    @jovi9918Ай бұрын

    Great quick watch

  • @plamenyordanov131
    @plamenyordanov131Ай бұрын

    Printing 3 times 3 has more to do with the event loop than closures

  • @tommysmith5479
    @tommysmith5479Ай бұрын

    So, if I can sum up and get confirmation: a closure is where an outer function or scope is not garbage collected because there is an inner function that relies on the outer function or scope's variables... is this correct?

  • @saurabhshrivastava5383
    @saurabhshrivastava538324 күн бұрын

    Hello Kayal, In your second example for closuers "function elementCreator(element)", if we directly return document.createElement(element) instead returning a function then what difference will it make, I think direct return will be better, what you suggest.

  • @lesalmin
    @lesalminАй бұрын

    This is the best explanation of closures I've seen (including your own previous explanations).

  • @AlejandroPoleo18
    @AlejandroPoleo1816 күн бұрын

    ❤ love it

  • @karimkrimou399
    @karimkrimou399Ай бұрын

    Excellent and really clear approch and explantion

  • @manpreetjord1885
    @manpreetjord1885Ай бұрын

    Great video as usual. But Kyle, your 1x Playback speed feels like 1.25x bro. 🙂 Interviewers also ask that how you will print 0,1,2 when using var i=0; . We have to use the concept of closure here.

  • @crakyanime8903
    @crakyanime8903Ай бұрын

    it would be good if you cover conditional scope or conditional closures

  • @consoledoterror971
    @consoledoterror971Ай бұрын

    I think the explanation for var, let with for loop is a bit wrong. 🤔

  • @amiryankolovich8560

    @amiryankolovich8560

    Ай бұрын

    I ran the code with the var and got 0,1,2 🤔

  • @amiryankolovich8560

    @amiryankolovich8560

    Ай бұрын

    Oh its because i had an error few lines before this I guess its js weird engine

  • @TalesGrechi
    @TalesGrechiАй бұрын

    Great video!

  • @QuanTran-wt4yt
    @QuanTran-wt4ytАй бұрын

    Can you make a video talking about message queue?

  • @Mari_Selalu_Berbuat_Kebaikan
    @Mari_Selalu_Berbuat_KebaikanАй бұрын

    Let's always do alot of good ❤

  • @ironCheval
    @ironChevalАй бұрын

    Does it keep the dependant variable and delete the old ones? E.x. when you added age = 30, will age = 29 be kept still by javascript?

  • @MbzMOKKA

    @MbzMOKKA

    Ай бұрын

    No because it's the same memory spot. In his example, when he does age = 30, it overwrites the value 29 in variable 'age', instead of creating a new variable.

  • @mcRidersEvolution
    @mcRidersEvolutionАй бұрын

    What is the purpose of returning function which returns element and not returning element with the first function?

  • @alexandraweather4156
    @alexandraweather4156Ай бұрын

    Thank you for this video and the job you do, but what is a JavaScript Developer? The only thing i could find is "JS developer" - in react, angular, vue and stuff Is there atually a job for JS developer in JS?

  • @doniaelfouly4142
    @doniaelfouly4142Ай бұрын

    Thanks

  • @viallymboma9874
    @viallymboma9874Ай бұрын

    In fact the concept of react custom hooks relies on the notion of closure When you're building a react custom hook, you're actually using closure.

  • @iftekharhaidar2397
    @iftekharhaidar2397Ай бұрын

    Dear, could you please explain what is JavaScript reference memory?

  • @dfields9511
    @dfields9511Ай бұрын

    Pascal lets you do this as a well, never used that feature of pascal. But was forced to Learn it

  • @ajiteshmishra0005
    @ajiteshmishra0005Ай бұрын

    Hii brother... You explained let and var concept in for loop. But still I'm confused. Can you explain in some other way.

  • @Kingreey
    @Kingreey21 күн бұрын

    Excelent

  • @siasquad7360
    @siasquad7360Ай бұрын

    Sir please explain with the help of draw and after that code

  • @AlThePal78
    @AlThePal78Ай бұрын

    I honestly thought that it didn't call function too until it said return function to and since the variable was already age 30, that is why it started with 30. What if you called the function first?

  • @Pareshbpatel
    @PareshbpatelАй бұрын

    JavaScript Closures, bautifully explained. Thanks, Kyle {2024-07-09}

  • @green-coder-clj
    @green-coder-cljАй бұрын

    I misread the title as "Learn Clojure in 13 minutes" 😅 Clojure & Clojurescript indeed help landing a job for the FE.

  • @sealsharp
    @sealsharpАй бұрын

    I was just wondering, is it possible to see the what structures&code JavaScript actually creates? Don't know how to call it. In C#, you can see the different stages ( C#, IL, ASM ) and that makes perfectly clear how closures technically work.

  • @letsbeafraid2233

    @letsbeafraid2233

    Ай бұрын

    JavaScript doesn't create code it gets JIT compiled into machine code directly by the engine. Read about V8 and how it works

  • @MichaelKire
    @MichaelKireАй бұрын

    Fun fact. Classes in JS is actually just syntactic sugar for a closure with a special constructor/prototype function inside

  • @charleschukwuemeka8482

    @charleschukwuemeka8482

    Ай бұрын

    While watching the video, this came to my mind... It's nice seeing that someone else thought of the same thing

  • @trombecher

    @trombecher

    Ай бұрын

    A class is syntactic sugar for a function, not necessarily a closure. A function becomes a closure when capturing variables from the parent scope, not because it’s a class.

  • @alienews0
    @alienews029 күн бұрын

    5:00 nope u didn't called your function on that line, u declared it ; u called it on the last line : return func2

  • @DanielBrownsan
    @DanielBrownsan27 күн бұрын

    I genuinely thought I had the playback speed set to 150-200% for the first 3 minutes of the video.

  • @user-ik7rp8qz5g
    @user-ik7rp8qz5gАй бұрын

    What you describe is just oop, but with extra steps

  • @supernovaw39
    @supernovaw39Ай бұрын

    Unrelated but why are you running VS Code as Admin? 🤔

  • @trombecher
    @trombecherАй бұрын

    If you have a global function that captures a variable from the outer (global) scope, then this function is a closure, because a closure is a function that captures variables from the parent scope. Even if you are calling console.log, because console is a variable in the global scope, you are capturing a variable and therefore your function is a closure. The only functions in JavaScript that are not closures are pure functions. Please do some research before making a 13min video about a topic.

  • @looming_

    @looming_

    Ай бұрын

    Really makes me wanna buy his “course” xd

  • @Efecretion
    @EfecretionАй бұрын

    Closure to scoping is like 0/1 to binary -- closure is how scoping is implemented in JS, while 0/1 is how binary is represented typically.

  • @BMikel
    @BMikelАй бұрын

    Please create Next js e-commerce project catalog with multiple checkboxes filtering, sorting, pagination, search. More e-commerce realistic. Thank you.

  • @bobwilkinsonguitar6142

    @bobwilkinsonguitar6142

    Ай бұрын

    I think you should do it!

  • @johnpatrickoldfield534
    @johnpatrickoldfield534Ай бұрын

    Do you know how to do that integer story with a public bank website inside a private login inside page two with a currency and interger value where I need to insert a legal agreement account balance update from 0 => R 1 000 000 Zar ? It’s a public https web address?! The javascript wipes the direct insert after page refresh how do I make the interger value const? Do you have team viewer and want to try and or show me?

  • @JacobZigenis

    @JacobZigenis

    Ай бұрын

    Hate to break it to you, but absolutely no one is going to help you with manipulating a bank website. Further, what you're seeing isn't just javascript wiping the value. It's retrieving the value from the bank's servers, which you cannot modify no matter how much you manipulate the page. Gotta study up a lot more and stop asking for advice on malicious activities on KZread. Also, on the off chance you do manage to do something malicious, you will almost certainly get caught.

  • @johnpatrickoldfield534

    @johnpatrickoldfield534

    Ай бұрын

    @@JacobZigenis my laptops storage is full and not booting at the moment so I cannot screenshare. I don't see how it's my problem the external and Internal banking staff cannot manually show me howto insert credits into bank tables in cobol or whatever the language is from the email pseudocode to the browser web security layers in the osi model so that I may make debits to pay attorney legal fees for bank account topups. I think it's worth a trial investigation ie look, screenshare, record discuss, etc and a look into the file and code framework on the Javascript and in the console just for a deeper explination, because I just know sql server, table updates, hidden servers, html, Javascript and css. The actual coding language and topology to see exactly where the update changes are made. Worse case the system gets reported and then gets fixed. I don't think it's too complicated less than 1000 lines of code plus minus with like 400 lines on my screen at once with like 30 lines each side of the zero balance variable.

  • @aqibmalik6313
    @aqibmalik6313Ай бұрын

    first comment after first comment of arunkaiser😂😂

  • @Psai4456
    @Psai4456Күн бұрын

    one guy asked me in interview i told the wrong answer

  • @jovincebrillantes1042
    @jovincebrillantes1042Ай бұрын

    So they're called closures, well I'll be dammed. I've been calling them higher order functions all this time.

  • @rico454

    @rico454

    Ай бұрын

    They are kinda the same thing. Higher order functions return a function and usually, the function that is returned has access to variables inside the original function which is what closures is. So yeah different concepts but essentially the same thing

  • @AchwaqKhalid
    @AchwaqKhalidАй бұрын

    Dude increase your *FONT* size for tutorials at least 💡

  • @arunkaiser
    @arunkaiserАй бұрын

    First comment

  • @aniketroy03

    @aniketroy03

    Ай бұрын

    autograph pls 😂

  • @Pacvalham

    @Pacvalham

    Ай бұрын

    🥇

  • @ahmatmhtlouky4179
    @ahmatmhtlouky4179Күн бұрын

    Man😂 after each five words you link as to another video 🤦🏽‍♂️

  • @jasonsworld333
    @jasonsworld333Ай бұрын

    Too bad the jobs are all taken lol

  • @anothermouth7077

    @anothermouth7077

    Ай бұрын

    In Same boat 😂

  • @alpaca_growing_kit
    @alpaca_growing_kitАй бұрын

    If you work with React you desperately need to understand closures. I have run into some insane React bugs that were created because of closures in complex functional React.

  • @alpaca_growing_kit

    @alpaca_growing_kit

    Ай бұрын

    HINT: Watch out for modifying an onChange when its getting prop drilled. Another reason to create context hooks as often as possible...

  • @looming_

    @looming_

    Ай бұрын

    Fact that this dude didn’t mention react once makes me question his understanding. Also the fact he messed up the for loop example.

  • @manit77
    @manit77Ай бұрын

    This is not true for all programming languages. JavaScript is an anomaly.

  • @zfolwick
    @zfolwickАй бұрын

    god I hate javascript

  • @b1studio648
    @b1studio648Ай бұрын

    Why u move ur head too much? Can you hold your head still while recording or move less. I would appreciate it. The way u move your head makes me dizzy

  • @servertimeout8371
    @servertimeout83719 күн бұрын

    no semicolons 😮 you would never get a job from me

  • @logimw
    @logimwАй бұрын

    why your head bouncing so much? it's very disracting no matter how valuable content you show (always very valuable)

  • @AdolfRizzler41
    @AdolfRizzler41Ай бұрын

    Do a video on booty sizes

  • @abcdabcd8605

    @abcdabcd8605

    Ай бұрын

    What does that even mean?!!