[Javascript] Closure

클로저에 대해 공부를 하다보니, 아래와 같이 다양하게 표현된다.

 

'함수 밖에서 선언된 변수를 내부에서 사용할 때 클로저가 생겨난다.'

 

함수 내부에 함수를 작성할 때마다, 클로저를 생성한 것이다.

= 내부에 작성된 함수가 클로저.

 

이해가 잘 되지않아 예제로 살펴봤다.

 

function closerFnc() {
    function outer(){
        var innerValue = 'remember';
        function innerFnc(){
          console.log(innerValue);
        }
        //outer함수 내부에 innerFnc선언 후 return
        return innerFnc;
      }
      
    var globalFnc = outer();
    globalFnc();
}

위 코드를 보면,

1. outer함수 내부에 innerValue라는 변수를 선언

2. outer함수 내부에 innerValue를 출력하는 innerFnc이라는 함수를 return

3. globalFnc에 outer함수를 대입.

 

결과적으로 globalFnc을 실행하면, outer함수 내부의 innerFnc()이 실행 되고 innerValue의 값인 "remember"가 출력.

 

여기서 생각해야 할것은 보통 outer함수가 실행 되고 종료되면 메모리에서 소멸한다.

따라서 outer함수 스코프의 innerValue는 메모리에서 소멸되어 참조 할수 없어야 한다.

 

그러나 클로저는 자신을 포함하고 있는 외부 함수의 인자, 지역변수 등을 외부 함수가 종료된 후에도 사용할 수 있습니다. 이러한 변수를 자유 변수(free variable) 이라고 부릅니다.

클로저가 생성될 때 범위내의 지역 변수들을 자유 변수로 만드는 것을 캡쳐(capture) 라고 합니다. 이 자유변수는 외부에서는 직접 접근할 수 없고, 항상 클로저를 통해서만 사용할 수 있습니다. 객체 지향언어의 private 멤버 변수와 같은 효과를 냅니다.
 

이처럼 자유 변수를 가지는 코드를 클로저라고 합니다.

 

마지막으로 클로저를 이용해 캡슐화를 표현해볼수 있다.

 

//캡슐화 예제
function closerFnc1() {
    function student(name, score){
        // var name = name, score = score;
        return {
          setScore: function(_score){
            score = _score;
          },
          getInfo: function(){
            return { name:name, score:score };
          }
        }
      }
      
      var lee = student("sunsin", 80);
      var kim = student("yusin", 75);
      
      lee.setScore(60);
      
      console.log(lee.getInfo()); // { name: 'sunsin', score: 60 }
      console.log(kim.getInfo()); // { name: 'yusin', score: 75 }
      console.log(kim.score); // undefined
      console.log(kim.name); // undefined
}

위 코드를 보면 student함수 스코프의 name, score는 캡쳐되어 kim.name과 같은 방법으로 접근할 수 없고, getInfo와 같이 클로저를 통해 접근할 수 있다.

 

참조 https://yuddomack.tistory.com/entry/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%ED%81%B4%EB%A1%9C%EC%A0%80Closure?category=754152