๐ 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ใฏๆๅใฎ๏ผๅๅฎ็พฉใใใใ ใใชใฎใงใ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)