<javascript> 클로저 Closure에 대하여..

 

자바스크립트의 중요한 개념

클로저에 대하여 알아보자

 

---

 

클로저

 

클로저(closure)는 내부함수가 외부함수의 맥락에 접근할 수 있는것을 가르킨다. 클로저는 자바스크립트를 이용한 고난이도의 테크닉을 구사하는데 필수적인 개념으로 활용된다.

 

function outter() {

    var title = 'Hello~';

    function inner() {

        alert(title);

    }

    inner();

}

outter();

 

이와 같은 경우 내부함수 inner()는 자체에 지역변수 title을 가지고 있지 않으므로,

외부에서 title변수를 찾는다. 

이처럼 내부함수는 외부함수의 지역변수에 접근 할 수 있다.

 

---

 

 

클로저(closure)는 내부함수와 밀접한 관계를 가지고 있는 주제다. 내부함수는 외부함수의 지역변수에 접근 할 수 있는데 외부함수의 실행이 끝나서 외부함수가 소멸된 이후에도 내부함수가 외부함수의 변수에 접근 할 수 있다. 이러한 메커니즘을 클로저라고 한다. 

 

function outter() {

    var title = 'Hello~';

    return function() {

        alert(title);

    }

}

var inner = outter();

inner();

 

함수 outter를 호출해서 변수 inner에 담고있다. 함수 outter는 return으로 인해 소멸되어지지만,

변수inner에 담긴 outer함수는 inner가 호출될 때마다 'Hello'가 출력이 되기 때문에 , 소멸되어진것이 아니라고 볼수 있다.

이처럼 외부함수는 외부함수의 지역변수를 사용하는 내부함수가 소멸될 때까지 소멸되지 않는 특성을 의미한다.

 

 

 

 

 

728x90

 

---

 

 

 

 

1    function korea_City(city) {

2        return {

3            get_city : function () {

4            return city;

5            },

6            set_city : function(_city) {

7            city = _city

8            }

9        }

10    }

11    seoul = korea_City('Seoul');

12    busan = korea_City('Busan');

13

14    alert(seoul.get_city()); //Seoul

15    alert(busan.get_city()); //Busan

16

17    seoul.set_title('Incheon');

18

19    alert(seoul.get_city());  //Incheon

20    alert(busan.get_city());  //Busan

 

 

 

1. 클로저는 객체의 메소드에서도 사용할 수 있다. 위의 예제는 함수의 리턴값으로 객체를 반환하고 있다. 이 객체는 메소드 get_city와 set_city를 가지고 있다. 이 메소드들은 외부함수인 korea_City의 인자값으로 전달된 지역변수 city를 사용하고 있다.

 

2. 동일한 외부함수 안에서 만들어진 내부함수나 메소드는 외부함수의 지역변수를 공유한다. 17행에서 실행된 set_city는 외부함수 korea_City의 지역변수 city의 값을 'Incheon'로 변경했다. 19행에서 seoul.get_title();의 값이 'Incheon'인 것은 set_city와 get_city 함수가 city의 값을 공유하고 있다는 의미다.

 

3. 그런데 똑같은 외부함수 korea_City를 공유하고 있는 seoul과 busan의 get_city의 결과는 서로 각각 다르다. 그것은 외부함수가 실행될 때마다 새로운 지역변수를 포함하는 클로저가 생성되기 때문에 seoul과 busan은 서로 완전히 독립된 객체가 된다.

 

4. korea_City의 지역변수 city는 2행에서 정의된 객체의 메소드에서만 접근 할 수 있는 값이다. 이 말은 city의 값을 읽고 수정 할 수 있는 것은 korea_City메소드를 통해서 만들어진 객체 뿐이라는 의미다. JavaScript는 기본적으로 Private한 속성을 지원하지 않는데, 클로저의 이러한 특성을 이용해서 Private한 속성을 사용할 수 있게된다.