클로저 - 함수지향 | 생활코딩

[출처 : https://opentutorials.org]

클로저

  : 클로저(closure)는 내부함수가 외부함수의 맥락(context)에 접근할 수 있는 것을 가르킨다.

 

# 내부함수에서 외부함수의 지역변수에 접근할 수 있는 것을 클로저라고 한다.

// outer() 외부함수
function outer() {  
  var title = "Coding Everybody"
  // inner() 내부함수
  function inner() {    
    // 내부함수는 외부함수의 지역변수에 접근할 수 있다.
    alert(title)    // "Coding Everybody" 
  }
  inner();
}
outer()

# 외부함수의 실행이 끝나서 외부함수가 소멸된 이후에도 내부함수가 외부함수의 변수에 접근 할 수 있다. 

function outer() {
  var title = "Coding Everybody";
  return function(){
 	 alert(title);
  }
}
var inner = outer();
inner()    // "Coding Everybody"

클로저란?

  - 내부함수가 외부함수의 지역변수에 접근 할 수 있고,

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

 

# 객체의 모든 속성은 공개(public)되어 있다. 공개가 되었다는 뜻은 외부에서 해당변수의 접근이 가능하다는 것이다.

 

비공개 속성 (private)

  : 객체의 외부에서는 접근 할 수 없는 외부에 감춰진 속성이나 메소드를 의미.

  - 별도의 문법은 없지만 클로저를 이용하여 구현할 수 있다.

  - 생성자 함수안에서 클로저를 만들면 유효범위안의 변수는 생성자 함수 외부에 노출 되지 않지만 객체의 공개 함수에서는 사용이 가능

// ① - 아래 2개의 메소드는 외부함수(factory_movie)의 인자값으로 전달된 지역변수(title)을 사용.
function gundam(title) {
  // ④ - 지역변수는 아래에 정의된 객체의 메소드에서만 접근 할 수 있는 값
  return {
    get_title : function(){
      retrun title;
    },
    set_title : function(_title){
      title = _title
    }
  }
}
var tollgeese = gundam("Tollgeese-III");
var astray = gundam("Astray RedFrame");

alert(tollgeese.get_title());    // "Tollgeese-III"
alert(astray.get_title());    // "Astray RedFrame"

// ② - set_title와 get_title 함수가 title의 값을 공유하고 있다
tollgeese.set_title("톨기스-III"); 

// ③ - 똑같은 외부함수를 공유하고 있는 변수(tollgeese와 astray)의 get_title의 결과는 서로 각각 다르다. 
alert(tollgeese.get_title());    // "톨기스-III"
alert(astray.get_title());    // "Astray RedFrame"

① 클로저는 객체의 메소드에서도 사용할 수 있다. 위의 예제는 함수의 리턴값으로 객체를 반환. 

② 동일한 외부함수 안에서 만들어진 내부함수나 메소드는 외부함수의 지역변수를 공유한다

③ 외부함수가 실행될 때마다 새로운 지역변수를 포함하는 클로저가 생성되기 때문에 tollgeese와 astray는 서로 완전히 독립된 객체가 됨.

④ 외부함수의 메소드를 통해서 만들어진 객체만 title의 값을 읽고 수정 할 수 있다. 

 

클로저의 응용

var arr = []
for(var i = 0; i < 5; i++){
  arr[i] = function(){ 
    return i;    // 함수가 함수 외부의 컨텍스트(i)에 접근하지 못함.
  }
}
for(var index in arr) {
  console.log(arr[index]());    // 5 5 5 5 5
}

var arr = []
for(var i = 0; i < 5; i++){
  arr[i] = function(id){    // 외부함수의 매개변수(id) == 지역변수
    return function(){      // 내부함수이기에 외부함수의 지역 변수(id)에 접근 가능 
      return id;            // i값을 받은 매개변수를 리턴
    }

  }(i)                      // i : 매개변수(id)의 인자
}
for(var index in arr) {
  console.log(arr[index]());    // 0 1 2 3 4
}