AngularJS를 본격적으로 시작하기 전에 자바스크립트 패턴 이해에 필요한 개념 중 하나인 클로저(Closures)에 관한 내용을 정리
클로저는 외부 함수의 변수에 접근하기 위해 내부 함수를 사용하는 것이다.
클로저는 스코프체인에서 하나의 스코프를 생성해주는 개념으로 생각할 수도 있다.
여기서 스코프(Scope)를 알고 있어야 하는데, 간단하게 스코프(Scope)란 유효범위를 말하는 것으로, 변수 사용 가능 여부를 영역을 구분짓는 것으로 이해하면 쉽다. 그리고 자바스크립트에서는 함수만이 유효범위의 단위가 될 수 있다.
유효범위를 나타내는 스코프(Scope)가 프로퍼티(property)로 각 함수 객체 내에서 연결리스트 형식으로 구성되는데, 이를 스코프체인이라고 한다.
각각의 함수는 자신이 생성된 스코프체인을 참조하여 값을 가지게된다. 함수가 실행되면서 실행 컨텍스트가 생성되고, 이를 바탕으로 새로은 스코프체인을 만들게 되는 것이다. 이 개념을 생각하면 스코프체인 안에 다른 스코프 체인이 존재할 수도 있게 된다.
다시 클로저로 돌아가서.
내부함수는 외부함수의 변수도 접근이 가능하지만 파라미터 값으로도 접근이 가능하다. 단, 배열과 같은 객체에는 접근이 불가능하다. 따라서 클로저는 이런 특징을 이용하여 내부함수로 외부함수를 활용하는 방법이다.
아래에 간단한 예제를 확인해보도록 하자.
function outer() {
var cnt = 0; → ①
var inner = function() { → ②
return cnt++;
}
return inner; → ③
}
var inc = outer(); → ④
inc(); // cnt === 1 → ⑤
inc(); // cnt === 2
위의 예제가 클로저를 알기 위한 가장 간단하고 대표적인 예제이다.
①은 outer 함수의 로컬(local) 변수이다. 변수 앞에 var는 변수를 선언하여 지역변수로 사용할 때 사용이 되며, 선언된 위치에 따라 변수의 스코프(scope)를 예측할 수 있다. 예를 들어 함수 내에서 var를 이용하여 변수를 선언해 사용하면 해당 변수의 사용 범위는 함수 내이다. 하지만 var가 없을 경우 전역변수로 사용할 수 있다.
②는 outer 함수의 로컬(local) 함수이다. 해당 함수의 경우 함수 안에 존재하는 함수이므로 외부에서 바로 접근이 불가능하며, 외부 함수로 우선 접근하여 내부 함수로 접근이 가능하다.
③에서 outer 함수 결과를 리턴한다. 리턴 값이 존재하지 않는 클로저(Closures)도 존재한다.
④에서 outer 함수를 호출한다. outer 함수를 호출할 경우 ③에서 리턴 된 함수가 ④에서 선언한 변수 inc에 저장된다.
⑤에서는 inc에 저장된 함수의 내부 함수인 inner 함수를 호출하여 접근한다.
위의 예제를 이용할 경우 outer 함수를 변수로 선언하여 사용할 때, 해당 변수를 이용하면 이전에 사용했던 cnt 변수에 계속 접근이 가능하다. 또한 inner 함수를 이용하여 변수 조작도 가능하다.
일반적인 스코프(scope)의 개념에서 볼 때, ④, ⑤와 같이 outer 함수 외부에서 함수의 로컬(local) 변수인 cnt로 접근하여 해당 변수의 값을 계속 가지고 있으면서 사용하기란 어렵다. 하지만 위의 예제와 같이 클로저(Closures) 개념을 사용하면 private 개념 적용이 가능하다.
정리 내용.
특징
1. 클로저는 function 안에 function이 존재할 때 생성된다.
2. 함수가 정의된 스코프(scope) 이외의 곳에서 사용될 때, private 처럼 사용이 가능하다.
3. 전역변수 사용을 억제하고 변수간의 충돌을 막을 수 있다. 이로인해 이벤트, 애니메이션에서 효과적으로 함수 사용이 가능하다.
단점
1. 메모리를 소모한다.
2. 스코프(scope) 생성에 따른 퍼포먼스 손해가 있다.
3. 직관적인 이해가 어려워 정확한 주석이나 문서와 같은 내용으로 정리를 해두는 것이 좋다.
AngularJS를 제대로 알기 전 개념을 잡는 내용이다.
AngularJS를 본격적으로 시작하기 전에 자바스크립트 패턴 이해에 필요한 개념 중 하나인 클로저(Closures)에 관한 내용을 정리
정리 내용.
