[ JavaScript ] 클로저: 캡슐화 예시를 통해 클로저 개념 쉽게 이해해보기

 

 

클로저 개념은 자바스크립트 공부에서 어려움을 느끼게 했던 주제 중 하나인데,
개인적으로 이해하기 쉬웠던 방법을 정리 해 보고자 한다.

클로저 개념을 쉽게 이해하기 위해서는
먼저, 스코프 개념을 이해하는 것이 중요하며
다음으로, 클로저가 되기 위한 조건을 파악하는 것이 필요하다.

클로저란?
클로저란 자신이 생성될 때의 스코프에서 알 수 있었던 변수 중 언젠가 자신이 실행될 때 사용할 변수들만 기억하여 유지시키는 함수이다. - 출처: 함수형 자바스크립트 프로그래밍 -

위에서 말했듯이, 클로저를 이해하기 위해서는 클로저가 되기 위한 조건을 파악하면 명확하게 이해가 가능해 진다.
다음은 클로저가 되기 위한 조건이다.
1. 내부 함수가 외부 함수 내에서 정의되어야 한다. (함수 내부에 정의된 함수)
2. 내부 함수가 외부 함수의 변수에 접근할 수 있어야 한다.
3. 내부 함수가 외부 함수 외부에서 호출되어야 한다.

클로저는 내부 함수가 외부 함수의 변수에 대한 참조를 유지하는 동안 외부 함수의 실행 컨텍스트가 종료되더라도 변수가 사라지지 않고 계속해서 접근 가능하게 된다. 이를 통해 외부 함수의 변수를 보호하고 유지하면서 내부 함수를 통해 변수에 접근하고 조작할 수 있다.

위 내용을 캡슐화 예시를 통해 다시 설명 해 보고자 한다.
먼저 캡슐화에 대해 설명을 해 보자면,
데이터와 메서드를 하나의 캡슐에 담아서 외부에서 직접 접근하는 것을 제한하고, 캡슐 내부에서만 상호작용하도록 하는 것이다.
캡슐화를 통해 객체의 상태와 동작을 캡슐 내부에 감추어 외부로부터의 잘못된 접근이나 변경을 방지하고, 객체의 안정성과 재사용성을 높일 수 있다.

위 예시는 클로저를 사용하여 캡슐화한 예시이다.

먼저, 위 예시를 보며 클로저 조건을 성립하는지 확인 해 보자.
내부 함수가 외부 함수 내에서 정의되어 있는가? ☑︎
- 내부 함수 (toggleFollowing)이 외부 함수 (createFollowingButton) 내부에 정의 돼 있다.

내부 함수가 외부 함수의 변수에 접근할 수 있는가? ☑︎
- 내부함수인 toggleFollowing의 스코프에서는 isFollowing 변수가 선언되어 있지 않으므로
렉시컬스코프에 따라 상위스코프에서 변수를 찾게된다.
따라서, toggleFollwing 함수는 외부 함수인 createFollowingButton의 변수인 isFollowing에 접근 할 수 있게 된다.

 내부 함수가 외부 함수 외부에서 호출되는가? ☑︎
- 외부함수인 createFollwingButton가 followingButton 변수에 할당되어 반환 값인 toggleFollowing 함수가 담기게 되고,
이로인해 followingButton을 호출할 때마다 내부함수인 toggleFollowing 함수가 호출된다.

위 예시는 세가지 조건을 모두 만족한다는 사실을 확인 할 수 있었다.
createFollowingButton 함수는 내부에서 toggleFollowing 함수를 정의하고 반환하고 있다.
이 때 toggleFollowing 함수는 외부에서 접근할 수 없는 createFollowingButton 함수 내부에 있는 isFollowing 변수에 접근하고 있다.
이렇게 함수 내부에서 변수에 접근하는 구조를 클로저라고 한다.


클로저를 사용하여 변수와 함수를 캡슐화함으로써,
isFollowing 변수가 외부에서 직접 접근되지 않고 오로지 toggleFollowing 함수 내부에서만 접근되고 변경될 수 있도록 보호되는 효과가 있다. 따라서 isFollowing 변수의 상태를 안전하게 유지하면서 toggleFollowing 함수를 사용할 수 있게 된다.