Learn JavaScript CLOSURES in 10 minutes! 🔒

// 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
00:00:00 intro
00:00:31 example 1
00:02:19 example 2
00:07:00 example 3
00:10:08 conclusion
// --------- 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`);

[@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()_

[@MrRe-sj2iv]

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

[@haidermansoor4760]

this is the best channel ever. Thanks alot BRO

[@vallunacoder.wecodetogether]

the best js tutorial I have ever seen!

[@raazyaa]

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

[@collinsestell5969]

Just...beautifully explained!

[@user-cm8ds7rx6t]

the best teacher, thanks bro!

[@doronfeldman5152]

It the best programming channel!

[@rhaissabgl]

the best explanation ever!!!!

[@k00lmoh]

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

[@Ankitsarwal]

I like the explaining way

[@gauravshrmai1988]

superb bro !!

[@harshjaiswal1634]

I'm following this playlist

[@hongquannguyen5532]

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

[@juliannafotheringham7101]

so amazing thank you

[@uzma_azam]

Thanks Bro 😊

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

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

[@nemesisxl6736]

React tutorials pls!!

[@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()

[@HikaruAkitsuki]

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

[@Cinemas19]

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

[@Cinemas19]

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

[@chiggywiggy524]

You answered your own question?