// 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`);
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.
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()_
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
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()
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!
// 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`);
you can also write like this. (example 2).
return {
increment,
getCount: () => count,
};
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
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.
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()_
Thanks, very well explained. Just hurts to watch a little if you are learning this after working with any OOP language for some time
@4:17 What did you mean by return the object {increment: increment} ? Why would the function be both the property and the value?
It's a feature of JavaScript ES6 called Shorthand Properties.
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
what happens when we create lots of closures in our code?
It slow-down our application......
You answered your own question?
this is the best channel ever. Thanks alot BRO
it seems closure works like a class but JS has classes , so why do we use closure ? does anyone know the difference ?
We can use closure for small state managements of the elements ,whereas classes are used for more complex stuff
the best explanation ever!!!!
Seeing this similar to a Class , and private members, was easier to grasp
if there are 3 or 4 functions stack on eachother, would the deep inner function get access to all the outers ?
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()
I like the explaining way
how does this video only have 500 likes, legitimately the most succinct explanation I've seen so far!
It the best programming channel!
I'm following this playlist
React tutorials pls!!
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!
superb bro !!
Outstanding explanation I've ever seen on RUclips about Closure. Thank you so much bro. Keep up your good work.
that brings back memories ngl, of when i was first learning Classes and i just couldn't get them until i understood closures
Just...beautifully explained!
this is the best closures-related yt video!
What an explanation and what a VOICE !
thx bro !!!
the best js tutorial I have ever seen!
At this point, I have no idea what's the purpose of class if function have this closure.
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
the best teacher, thanks bro!
so amazing thank you
Thanks Bro 😊