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(){
}

inner();
}

message = "Goodbye";

outer();

// ---------- EXAMPLE 2 ----------

function createCounter() {

let count = 0;

function increment() {
count++;
}

function getCount() {
return count;
}

return {increment, getCount};
}

const counter = createCounter();

// ---------- EXAMPLE 3 ----------

function createGame(){

let score = 0;

function increaseScore(points){
score += points;
}

function decreaseScore(points){
score -= points;
}

function getScore(){
return score;
}

return {increaseScore, decreaseScore, getScore};
}

const game = createGame();

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

}

function decreaseScore(points){
score -= points;

}

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

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

[haidermansoor]

this is the best channel ever. Thanks alot BRO <3

[steventolerhan]

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!

[prashant]

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!

[newmagicfilms]

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

[MrRe-sjiv]

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

[tonnytrumpet]

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

[klmoh]

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

[vallunacoder.wecodetogether]

the best js tutorial I have ever seen!

[raazyaa]

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

[hongquannguyen]

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

[AllHailLordMegatron]

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

[Martin]

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

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

[Cinemas]

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