// 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 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()_
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.
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!
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()
// 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 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()_
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.
Seeing this similar to a Class , and private members, was easier to grasp
this is the best channel ever. Thanks alot BRO
how does this video only have 500 likes, legitimately the most succinct explanation I've seen so far!
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!
that brings back memories ngl, of when i was first learning Classes and i just couldn't get them until i understood closures
this is the best closures-related yt video!
the best explanation ever!!!!
hawk tuah
Outstanding explanation I've ever seen on RUclips about Closure. Thank you so much bro. Keep up your good work.
Thanks, very well explained. Just hurts to watch a little if you are learning this after working with any OOP language for some time
It the best programming channel!
the best js tutorial I have ever seen!
I like the explaining way
What an explanation and what a VOICE !
thx bro !!!
the best teacher, thanks bro!
I'm following this playlist
Just...beautifully explained!
superb bro !!
if there are 3 or 4 functions stack on eachother, would the deep inner function get access to all the outers ?
so amazing thank you
@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
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
definitely just a primitive version of class. What a great pov
Thanks Bro 😊
React tutorials pls!!
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()
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
what happens when we create lots of closures in our code?
It slow-down our application......
You answered your own question?