๐Ÿ˜‡ "Javascript Closure"์ด ๊ธ€์„ ์ฝ๊ณ  ๋‚˜๋ฉด ๋งˆ์นจ๋‚ด ๋ฌด์—‡์ธ์ง€ ์•Œ ์ˆ˜ ์žˆ์„ ๊ฒƒ ๊ฐ™์•„์š”

๐Ÿ˜‡ "Javascript Closure"์ด ๊ธ€์„ ์ฝ๊ณ  ๋‚˜๋ฉด ๋งˆ์นจ๋‚ด ๋ฌด์—‡์ธ์ง€ ์•Œ ์ˆ˜ ์žˆ์„ ๊ฒƒ ๊ฐ™์•„์š”

2022-10-19 last update

11 minutes reading beginners javascript frontend programming

๐Ÿ’Ž ๊ธฐ๋Šฅ ์ค‘ ๊ธฐ๋Šฅ



โ–ผ ํ•จ์ˆ˜์—์„œ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ ํ•จ์ˆ˜๋ฅผ ์„ ์–ธํ•  ์ˆ˜ ์žˆ์Œ

function outer(){
    function inner(){
        alert("poland");
    }
}
outer(); // unfortunately, nothing happens


โ–ผ ๋‚ด๋ถ€ ํ•จ์ˆ˜๋ฅผ ์‹คํ–‰ํ•˜๊ธฐ ์œ„ํ•ด ๋‹ค์Œ๊ณผ ๊ฐ™์ด ์ž‘์„ฑํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

function outer(){
    function inner(){
        alert("poland");
    }
    inner() // here !!!!!
}
outer() // "poland" !


๐Ÿ’Ž ์ต๋ช… ๊ธฐ๋Šฅ



์ง€๊ธˆ ์‹คํ–‰ ์ˆœ์„œ๋Š”

  1. execute outer()
  2. declare inner()
  3. execute inner()


๋ฒˆ๊ฑฐ๋กญ์ฃ ? ๐Ÿ˜‚
์˜ˆ, ์ต๋ช… ํ•จ์ˆ˜๋กœ alert("poland") ๋” ์งง๊ฒŒ ์‹คํ–‰ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

(  function(){ alert("poland"); }  )(); // "poland"


๐Ÿ’Ž ํ•จ์ˆ˜๋ฅผ ๋ฐ˜ํ™˜ํ•˜๋Š” ํ•จ์ˆ˜



(2๋ถ„ ์•ˆ์— ๋งˆ์นจ๋‚ด ํด๋กœ์ €๊ฐ€ ๋ฌด์—‡์ธ์ง€ ์•Œ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค)
โ–ผ ํ•จ์ˆ˜๋Š” Javascript์—์„œ ํ•จ์ˆ˜๋ฅผ ๋ฐ˜ํ™˜ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

function outer(){
    var inner = function (){
        alert("poland");
    }
ใ€€ใ€€return inner;
}

var func = outer();
func();// "poland"                 


โ–ผ ์กฐ๊ธˆ ๋ณ€ํ˜•ํ•˜๊ณ  ๋‚ด๋ถ€ ๊ธฐ๋Šฅ์„ ์ •์ƒ์ ์œผ๋กœ ์ •์˜

function outer(){
    function inner (){ //** here
        alert("poland");
    }
ใ€€ใ€€return inner;
}

var func = outer();
func();// "poland"


โ–ผ ์ด์ œ inner()๋ฅผ ์‚ญ์ œํ•˜๊ณ  ์ต๋ช… ํ•จ์ˆ˜๋ฅผ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค.

function outer(){
    return function(){ //** here
        alert("poland");
    }
}

var func = outer();
func();// "poland"


โ–ผ ๊ทธ๋Ÿฐ ๋‹ค์Œ ์กฐ๊ธˆ tranfrom ๊ฒฝ๊ณ  ๊ธฐ๋Šฅ ์ „์— ๋ฌธ์ž์—ด "ํด๋ž€๋“œ"๋ฅผ ์„ ์–ธํ•ฉ๋‹ˆ๋‹ค.

function outer(){
    return function(){
        var country = "poland"
        alert(country);
    }
}

var func = outer();
func();// "poland"


โ–ผ -- โญ ์ค‘์š”!! -- ๋งˆ์นจ๋‚ด var country๋ฅผ ์™ธ๋ถ€ ๋‚ด๋ถ€ ์ต๋ช… ํ•จ์ˆ˜๋กœ ์ด๋™

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


โ–ผ ์ด ๋ˆˆ์œผ๋กœ ์‰ฝ๊ฒŒ ๋ณผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค

๐Ÿ’Ž ์‹ค์ƒํ™œ ์˜ˆ 1



ํ์‡„์— ๋Œ€ํ•œ ์ผ๋ฐ˜์ ์ธ ์งˆ๋ฌธ์ด ์žˆ์Šต๋‹ˆ๋‹ค.

define function that return 1,2,3... each time you call it



๋ฉด์ ‘์—์„œ ๋ฌผ์–ด๋ด๋„ ์ด์ƒํ•˜์ง€ ์•Š์•„

function outer(){
    var num = 1;
    returnใ€€function (){
        alert(num);
    x ++;
    };
}

var func =  outer(); 
func();  // 1
func();  // 2
func();  // 3
console.log(num) //undefined


๊ทธ๋ฆฌ๊ณ  ์ค‘์š”ํ•œ ๊ฒƒ์ด ํ•˜๋‚˜ ๋” ์žˆ์Šต๋‹ˆ๋‹ค.
๊ทธ ์ฝ”๋“œ์—์„œ ๋ณผ ์ˆ˜ ์žˆ๋“ฏ์ด "num"์€ ์™ธ๋ถ€ ํ•จ์ˆ˜๋ฅผ ํ˜ธ์ถœํ•  ์ˆ˜ ์—†์œผ๋ฏ€๋กœ ํด๋กœ์ €๋ฅผ ํ†ตํ•ด ๊ฐœ์ธ ๋ณ€์ˆ˜์™€ ๊ฐ™์€ ๊ฒƒ์„ ๋งŒ๋“ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๐Ÿ’Ž ์‹ค์ƒํ™œ ์˜ˆ 2



์†”์งํžˆ ์˜ˆ 1์€ "์‹ค์ƒํ™œ"์˜ˆ๋ฅผ ์ •์˜ํ•˜๊ธฐ๊ฐ€ ์–ด๋ ต์Šต๋‹ˆ๋‹ค. ์ด ์ง€์‹์„ ์•„๋Š” ๊ฒƒ์ด ์ค‘์š”ํ•˜์ง€๋งŒ ๋ง์ž…๋‹ˆ๋‹ค.
ํ•˜์ง€๋งŒ ์ด์ œ ๋” ๋งŽ์€ ์‹ค์ œ ์‚ฌ๋ก€๋ฅผ ๋ณด์—ฌ ๋“œ๋ฆฌ๊ฒ ์Šต๋‹ˆ๋‹ค.

์ด๊ฒƒ์€ ์ผ๋ฐ˜์ ์ธ jquery ์ฝ”๋“œ์ž…๋‹ˆ๋‹ค.

// anonymous function
$('.button').click(function(){
  alert('Hi!');
});


๊ทธ๋Ÿฌ๋ฉด 2๋ฒˆ ์ด์ƒ ํด๋ฆญ์„ ๋ฐฉ์ง€ํ•˜๋Š” ๊ธฐ๋Šฅ์„ ๋งŒ๋“ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

$(function(){
    var isClicked = false;
    $('.button').click(function(){
        if (isClicked) {
            alert('you have already clicked once !!');
            return false;
        }
        isClicked = true;
    });
});


์ฝ์–ด ์ฃผ์…”์„œ ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค :)

์ฐธ์กฐ:
https://qiita.com/takeharu/items/4975031faf6f7baf077a
http://dqn.sakusakutto.jp/2009/01/javascript.html