[JavaScript] Closure Concept (클로저 개념)

클로저(Closure) ?

- 다른 함수안에 정의된 함수를 클로저라고 한다. (즉, 특정 함수 안에 함수가 정의된 것)

- 클로저는 내부함수가 외부함수의 맥락에 접근할 수 있는것을 말한다.

 

내부함수(inner function) 

- 함수 안에 함수가 선언되어 있는 것

 

외부함수(outter function)

- 내부 함수 바깥에 선언된 함수

 

특징

(1) 내부 함수에서 외부함수의 지역변수에 접근할 수 있다.

(2) 외부함수가 소멸 되어도 내부함수는 외부함수의 지역변수에 접근할 수 있다

(3) 클로저 기법을 사용하여 Private 변수를 구현할 수 있다.

 

[예시1] 내부함수 특징 : 내부함수 에서 외부 함수의 지역변수에 접근할 수 있다.

function outterFunction() {
   var text = 'Hello JavaScript';
   function innerFunction() {
       console.log(text);
   }
   innerFunction();
}

outterFunction();

// Hello JavaScript

 

위 결과를 보면 innerFunction()에서 outterFunction()에서 정의된 text 변수를 innerFunction()에서 접근할 수 있는것을 볼 수 있다. 

 

[예시2] 클로저 특징 : 외부함수가 소멸 되어도 내부함수는 외부함수의 지역변수에 접근할 수 있다

function outterFunction() {
   var text = 'Hello JavaScript';
   return function() {
       console.log(text);
   }
}

var innerFunction = outterFunction();
innerFunction();

// Hello JavaScript

 

위 결과를 보면 outterFunction()에서 return 후 소멸 되었음에도 새로 할당된 innerFunction()에는 text 변수의 값이 복사 되어 출력이 되었다.

 

[예시3] 클로저 특징 : 클로저 기법을 사용하여 Private 변수를 구현할 수 있다.

내부함수는 외부함수의 지역변수에 접근할 수 있으므로 setter와 getter를 구현하여 Private 변수를 구현할 수 있다..

(예시 추후 추가)

 

[예시4] 클로저 응용

var arr = [];
for (var i = 0; i < 5; i++) {
   arr[i] = function() {
       return i;
   }
}

for(var index in arr) {
   console.log(arr[index]());
}

// 5
// 5
// 5
// 5
// 5

 

위 코드를 보면 0~4의 값이 출력될 것이라고 예상을 하게 되는데 결과 값은 5가 5번 출력된다. i는 전역변수(자바스크립트는 블록스코프가 없다) 5가된 상태에서 마지막 for in 루프가 돈다. 그 이유는 arr[index]() 즉 arr[i]의 값에 function() {} 자체가 들어가게 되고 for 문이 모두 순환된 이후 마지막 값인 5가 출력되 기 때문이다.

 

arr[0] = function() {}; / arr[1] = function() {}; / ... / arr[4] = function() {};

(arr[i]에는 i 값이 들어가는 것이 아니라 function() {} 자체가 할당 된다는 것을 유의)

var arr = [];
for(var i = 0; i < 5; i++) {
    arr[i] = (function(id) {
        return function() {
            return id;
        }
    })(i);
}

for (var index in arr) {
    console.log(arr[index]());
}

// 0
// 1
// 2
// 3
// 4

 

문제점을 해결한 코드. 위에서 arr[i]의 값에 숫자값이 아니라 함수가 들어간다는 것을 알았다. 마지막 console.log에서 arr[index]가 아니라 arr[index]() 임을 유의하자. 이 뜻은 arr[index]의 함수 즉 arr[1](1)을 호출, 하면 function(id) 에 function(1) 이 들어가고 여기에서 내부 함수는 외부함수의 id 변수를 id 값을 반환한다. 그래서 수정한 코드에서 i를 id 파라미터로 값을 유지시켜서 원하는 값이 출력되는 것.

 

(+) 마지막 예시가 이해가 안되시나요? ㅠㅡㅠ .. 그럼 즉시 실행 함수에 대한 이해를 해보고 다시 봐보세요!!

var func = function() {
    
};

func();

위 코드는 func() 함수를 정의하고 바로 다음 코드에서 실행하는 코드이다.

(function() {

})();

코드를 줄이기 위해서 위와 같은 방법으로 코드를 작성할 수 있음

변수에 할당하여 즉시 실행 할 경우는 함수를 ( ) 묶지 않아도 되지만, 가독성을 위해 되도록 즉시 실행 함수는 괄호를 써주자

function() {

}();

위 코드는 Error!! 라는 점을 참고