기본 콘텐츠로 건너뛰기

[javascript] 클로저(closure)

javascript 빠르게 훑어 보는중

훑어보는 도중 처음 보는 개념

바로 클로저라는 놈.......

javascript에서는 함수를 매개변수로 받거나 함수를 리턴할 수 있다.

이건 어차피 C언어에서도 됬다. 정확히 말하면 함수의 주소값을 받거나 함수의 주소값을 리턴.

여기서는 주소의 개념이 없는듯 하다.


1
2
3
4
5
6
7
8
  <script>
        function outerFunction(){
            return function(){
                alert('Hello World');
            };
        }
        outerFunction()();
    </script>
cs
우선 위 코드처럼 함수를 리턴을 한다.

 
alert로 경고창을 띄운다.

클로저가 무엇인지 정확히 알기전에 하나의 코드를 더 확인을 해보자.



1
2
3
4
5
6
7
 <script>
        function test (name){
            var output = ' Hello'+name+'..!';
        }
        alert(output);
    </script>
 
cs
코드가 먼가 이상하다.

output은 분명히 test의 지역변수에 해당하는데 다른 대서 접근이 가능할까??

불가능...

위 코드는 정상적인 실행이 되지 않는다. 

실행을 하여도 아무것도 반응을 하지 않게된다.(지역변수는 다른 지역에서 호출이 불가능. 다른 언어에서도 마찬가지이다)

*지역변수란 ? 
 컴퓨터 언어에서 지역이라는 의미는 {} 를 의미한다. 
즉 메모리는 {}을 벗어나면 이 안에서 수행했던 메모리 공간을 반환을 하게 된다.

다시 클로저에 대해서....
클로저를 쓰면 원래 가지고 있던 지역변수의 규칙을 위반을 하게된다.

다른 코드를 확인해보자


1
2
3
4
5
6
7
8
9
10
11
<script>
        function outerFunction(name) {
            var output = 'Hello' + name + '..!';
            return function () {
                alert(output);
            };
        }
        outerFunction('멍개짱!')();
        
    </script>
 
cs

실행결과

function()을 반환을 받으면 alert(output)이 실행이 되게 되는데
정상적이라면  output이 없어야 된다. 
하지만 자바스크립트느 아직 지역변수 output을 지우면 안 된다는 것을 인식하고 남겨둔다.

이렇게 지역 변수를 남겨두는 현상을 클로저라고 부리기도 하고,
outerFunction() 내부의 변수들이 살아있는 것이므로 함수 outerFunction()으로 인해 생성도니 공간을 클로저라고 부르기도 한다.
또한 리턴된 함수 자체를 클로저라고 부그리도 하며, 살아남은 지역 변수 output을 클로저라고 부르기도한다.

머이렇개 개념이 많어 ㅋㅋㅋㅋㅋㅋㅋ 

지역변수 output이 메모리에 남겨 있다고 외부에서 마음대로 사용할 수 없다. 반드시 리턴된 클로저 함수를 사용해서 지역변수 output을 사용해야 된다.


마지막으로 클로저에 대한 예시를 들면서 클로저의 개념을 확실히 잡아보자!!!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 <script>
        function outerFunction(name) {
            var output = 'Hello' + name + '..!';
            return function () {
                alert(output);
            };
        }
       
        //변수 선언
        var first = outerFunction('JavaScript');
        var second = outerFunction('jQuery');
 
        //출력
        alert(first());
        alert(second());
    </script>
 
cs

 alert(first()); 실행
 alert(second()); 실행

출력결과를 확인할 수있다.

먼가 심오하다 ㅋㅋㅋㅋㅋㅋ 

댓글

이 블로그의 인기 게시물

[git] pull을 하여 최신코드를 내려받자

보면 먼가 로고가 다르게 뜨는것을 확인을 할 수가있다. C:\Users\mung\Desktop\etc\study\python-gene>git checkout remotes/origin/master Note: checking out 'remotes/origin/master'. You are in 'detached HEAD' state. You can look around, make experimental changes and commit them, and you can discard any commits you make in this state without impacting any branches by performing another checkout. If you want to create a new branch to retain commits you create, you may do so (now or later) by using -b with the checkout command again. Example:   git checkout -b HEAD is now at 29e282a... fetch test C:\Users\mung\Desktop\etc\study\python-gene>git branch * (HEAD detached at origin/master)   master   test1   test2 깃이 잘 쓰면 참 좋은놈인데 어지간히 쓰기가 까다롭다. 처음에 깃을 푸시 성공하는데만 한달정도 걸렸던걸로 기억이 난다.. ㅋㅋㅋ 여담으로  깃 프로필을 가면 아래사진 처럼 보인다. 기여도에 따라서 초록색으로 작은 박스가 채워지는데 저걸 잔디라고 표현을 한다고 합니다 ㅎ 저 사진은 제 깃 기여도 사진입니당 ㅋㅋㅋㅋ 다시 본론으로 돌아와서 ㅋㅋ pull을 하면...

[kali linux] sqlmap - post요청 injection 시도

아래 내용은 직접 테스트 서버를 구축하여 테스트 함을 알립니다.  실 서버에 사용하여 얻는 불이익에는 책임을 지지 않음을 알립니다. sqlmap을 이용하여 get요청이 아닌 post요청에 대해서 injection공격을 시도하자. 뚀한 다양한 플래그를 이용하여 DB 취약점 테스트를 진행을 해보려고 한다. 서버  OS : windows 7 64bit Web server : X Server engine : node.js Framework : expresss Use modules : mysql Address : 172.30.1.30 Open port : 6000번 공격자 OS : kali linux 64bit use tools : sqlmap Address : 172.30.1.57 우선 서버측 부터  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 var  express  =  require( 'express' ); var  app  =  express(); var  mysql  =  require( 'mysql' ); var  ccc  =  mysql.createConnection({     host: '127.0.0.1' ,     user: 'root' ,     pos...

[node.js] 파일 리더기 만들기 - 사용 모듈 정리, pdf 구조, hwp 구조

pdf -> html 변환 가장 무난하다. 기본적으로 pdf는 htm와 비슷한 형태의 구조를 가지고 있다. 크게 header , body , xref table , trailer 의 구조로 되어있다. pdf는 환경에 상관없이 표현을 하기 위한 목적을 가지고 있는 파일이다. 이런 이유 때문에 무난히 진행이 된 것 같다. pdf2htmlex와 pdftohtmljs라는 모듈을 이용을 했다. var pdftohtml = require ( 'pdftohtmljs' ) ; var converter = new pdftohtml ( 'test.pdf' , "sample.html" ) ; converter . convert ( 'ipad' ) . then ( function ( ) { console . log ( "Success" ) ; } ) . catch ( function ( err ) { console . error ( "Conversion error: " + err ) ; } ) ; 이미지나, text같은 것들이 거의 100%로 변환이 된다. docx -> html 변환 docx파일을 html파일로 변환을 할 때는 style 적용과 한글이 깨지는 문제가 있다. 텍스트들을 전부 잘 읽기는 하는데 스타일 정보를 제대로 가져오지 못하기 때문에 좀 애매하다 - Headings. - Lists. - Customisable mapping from your own docx styles to HTML. For instance, you could convert WarningHeading to h1.warning by providing an appropriate style ...