💎 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)