💎 function in function
▼ in function can declare function in javascript
function outer(){
function inner(){
alert("poland");
}
}
outer(); // unfortunately, nothing happens
▼ we can write like this to execute inner function
function outer(){
function inner(){
alert("poland");
}
inner() // here !!!!!
}
outer() // "poland" !
💎 Anonymous function
now executing order is
- execute outer()
- declare inner()
- execute inner()
it's troublesome isn't it? 😅
yeah we can execute alert("poland")
shorter by anonymous function
( function(){ alert("poland"); } )(); // "poland"
💎 function which return function
(in 2 min you can get what is closure finally)
▼ function can return function in Javascript
function outer(){
var inner = function (){
alert("poland");
}
return inner;
}
var func = outer();
func();// "poland"
▼ transform it a little bit, define inner function normally
function outer(){
function inner (){ //** here
alert("poland");
}
return inner;
}
var func = outer();
func();// "poland"
▼ now delete inner() and use anonymous function
function outer(){
return function(){ //** here
alert("poland");
}
}
var func = outer();
func();// "poland"
▼ then tranfrom a little bit, declare string "poland" before alert function
function outer(){
return function(){
var country = "poland"
alert(country);
}
}
var func = outer();
func();// "poland"
▼ -- ⭐ IMPORTANT!! -- At last move var country to outside inner anonymous function
function outer(){
var country = "poland"
return function(){
/** ⭐ ⭐ ⭐ ⭐ ⭐ ⭐ ⭐ ⭐
looks like we can't see country
because country is declared outside anonymous function.
But we can see it, this is typical closure
⭐ ⭐ ⭐ ⭐ ⭐ ⭐ ⭐ ⭐ **/
alert(country);
}
}
var func = outer();
func();// "poland"
console.log(country) // ⭐ undefined because of scope
▼ You can see easily with these eyes
💎 Real life example 1 (increment number)
there is typical question about closure
define function that return 1,2,3... each time you call it
it's not weird if you're asked about in in interview.
▼ If you write like this, result shows just 1 three times
function increment() {
let num = 0
num = num + 1
}
increment()//1
increment()//1
increment()//1
if we put let num = 0
in global variable
↓
let num = 0
function increment() {
num = num + 1
}
increment()//1
increment()//2
increment()//3
the answer is correct, but someone could change this num
so easily by chance, it's dangerous
↓
function incrementFactory() {
let num = 0
function increment() {
num = num + 1
}
return increment
}
// factory is just increment function
const factory = incrementFactory()
// ⭐ here only "increment()" execute, so it doesn't have effect to "let num = 0"
factory()// 1
factory()// 2
factory()// 3
as you can see in that code, "num" can't call outside outer function, so we can create like private variable by closure
(▼just note for myself in Japanese)
incrementFactoryは最初の1回定義されるだけなので、let num = 0 が毎回定義されてnumが0になることはないっす
💎 Real life example 2
Honestly example 1 is hard to define "real life" example, even though it's important to know this knowledge.
But now I'm gonna show you more real life example.
this is typical jquery code
// anonymous function
$('.button').click(function(){
alert('Hi!');
});
then I can make function that prevent clicking more than 2 times
$(function(){
var isClicked = false;
$('.button').click(function(){
if (isClicked) {
alert('you have already clicked once !!');
return false;
}
isClicked = true;
});
});
Thank you for reading :)
ref:
https://qiita.com/takeharu/items/4975031faf6f7baf077a
http://dqn.sakusakutto.jp/2009/01/javascript.html
Top comments (1)