Learn JavaScript CLOSURES in 10 minutes! 🔒

[@BroCodez]

// closure = A function defined inside of another function, // the inner function has access to the variables // and scope of the outer function. // Allow for private variables and state maintenance // Used frequently in JS frameworks: React, Vue, Angular // ---------- EXAMPLE 1 ---------- function outer(){ const message = "Hello"; function inner(){ console.log(message); } inner(); } message = "Goodbye"; outer(); // ---------- EXAMPLE 2 ---------- function createCounter() { let count = 0; function increment() { count++; console.log(`Count increased to ${count}`); } function getCount() { return count; } return {increment, getCount}; } const counter = createCounter(); counter.increment(); counter.increment(); counter.increment(); console.log(`Current count: ${counter.getCount()}`); // ---------- EXAMPLE 3 ---------- function createGame(){ let score = 0; function increaseScore(points){ score += points; console.log(`+${points}pts`); } function decreaseScore(points){ score -= points; console.log(`-${points}pts`); } function getScore(){ return score; } return {increaseScore, decreaseScore, getScore}; } const game = createGame(); game.increaseScore(5); game.increaseScore(6); game.decreaseScore(3); console.log(`The final score is ${game.getScore()}pts`);

[@volkan9799]

you can also write like this. (example 2). return { increment, getCount: () => count, };

[@OFAMidoriya]

if you ever redo this video can you explain ex 2 more I understood everything until 4:00 and the same with ex3 every thing was ok until 9:30

[@benzflynn]

This is the only video on closures that I see here which *clearly explains the purpose* of closures. Nice tip on shorthand form of return statement. It's common to use a functional expression for the outer holding function of the closure, i.e. _const game = function() {_ _. . . . ._ _. . . . ._ _. function increaseScore (points){_ _. .}_ _. function decreaseScore (points){_ _. .}_ _. function getScore (){_ _. .}_ _._ _}_ Then on the calling code, you just reference each of the inner functions with the prefix of the outer one, i.e. > _game.getScore()_

[@orangelimesky]

This was perfectly explained. Now I understood closures. It's just a fancy name and the way it's written everywhere else is confusing because it makes it look like it can only return one function. But it's basically an object that references multiple functions within, to protect a variable from being public. So simple. Thank you.

[@newmagicfilms]

Seeing this similar to a Class , and private members, was easier to grasp

[@haidermansoor4760]

this is the best channel ever. Thanks alot BRO

[@prashant6804]

You explained in the context of class & objects so helpful for person like me who breath in & out object oriented programming since I started programming in 2004 with Java. Thanks!

[@steventolerhan5110]

how does this video only have 500 likes, legitimately the most succinct explanation I've seen so far!

[@skalskaga]

this is the best closures-related yt video!

[@vallunacoder.wecodetogether]

the best js tutorial I have ever seen!

[@doronfeldman5152]

It the best programming channel!

[@Ankitsarwal]

I like the explaining way

[@rhaissabgl]

the best explanation ever!!!!

[@Zoooooooooooo]

hawk tuah

[@tonnytrumpet734]

Thanks, very well explained. Just hurts to watch a little if you are learning this after working with any OOP language for some time

[@raazyaa]

What an explanation and what a VOICE ! thx bro !!!

[@ФёдорСёмочкин]

the best teacher, thanks bro!

[@MrRe-sj2iv]

Outstanding explanation I've ever seen on KZbin about Closure. Thank you so much bro. Keep up your good work.

[@harshjaiswal1634]

I'm following this playlist

[@collinsestell5969]

Just...beautifully explained!

[@k00lmoh]

that brings back memories ngl, of when i was first learning Classes and i just couldn't get them until i understood closures

[@hongquannguyen5532]

if there are 3 or 4 functions stack on eachother, would the deep inner function get access to all the outers ?

[@Martin958]

@4:17 What did you mean by return the object {increment: increment} ? Why would the function be both the property and the value?

[@DavidFerreira-ld5gp]

It's a feature of JavaScript ES6 called Shorthand Properties.

[@bennymeister]

If you pass an already existing variable name into an object, it will create an entry in the object with the variable value, like this: const foo = 69 const obj = { foo: foo } // { foo: 69 } const obj2 = { foo } // { foo: 69 } You see how these are ultimately just two ways of writing the same thing. One being shorter than the other

[@AllHailLordMegatron]

it seems closure works like a class but JS has classes , so why do we use closure ? does anyone know the difference ?

[@FahimAhamed-oc8nh]

We can use closure for small state managements of the elements ,whereas classes are used for more complex stuff

[@juliannafotheringham7101]

so amazing thank you

[@gauravshrmai1988]

superb bro !!

[@nemesisxl6736]

React tutorials pls!!

[@uzma_azam]

Thanks Bro 😊

[@nebularzz]

wouldn't this also be a closure function some_other_function(closure) { closure() } function some_function() { let message = "Hello, world!" let closure = function() { console.log(message) } some_other_function(closure) } some_function()

[@kcseanbrixd.calinao6700]

definitely just a primitive version of class. What a great pov

[@Cinemas19]

what happens when we create lots of closures in our code?

[@Cinemas19]

It slow-down our application......

[@chiggywiggy524]

You answered your own question?

[@HikaruAkitsuki]

At this point, I have no idea what's the purpose of class if function have this closure.

[@SquidysTents]

I’m guessing it’s probably to abstract away a lot of the confusion and complexity of closures like this, but I don’t really know either haha