여러분 혹시, 클로저에 대해서 알고 계신가요?
‘Javascript를 개발하는 사람이라면 클로저를 모르면 안 된다’라는 말을 많이 들어보셨을 것입니다. 매직테이블 역시 자바스크립트 기반인 Vue.js를 프런트 주 언어로 하고 있기 때문에 이 개념을 중요하게 생각하고 있는데요, 클로저에 대해서 헷갈리거나 어려워하시는 분들을 위해 자세히 알아보는 시간을 가져보겠습니다!
먼저, 아래와 같은 예제 코드를 함께 보도록 하겠습니다!
내부 함수 (outer() 안에 있는 익명 함수)는 외부 함수의 지역변수(title)에 접근할 수 있습니다. 원래는 외부 함수의 실행이 끝나면 외부 함수가 소멸되어 내부 함수가 외부 함수의 변수에 접근할 수 없습니다. 하지만 외부 함수의 실행이 끝나고 외부 함수가 소멸된 이후에도 내부 함수가 외부 함수의 변수에 접근할 수 있는 구조를 클로저라고 합니다.
var inner = outer(); 을 보면 outer() 함수를 실행하면서 inner 변수에 담고 있습니다. outer의 함수는 실행이 끝났기 때문에 이 함수의 지역변수(title)는 메모리에서 제거되는 것이라 생각이 들 겁니다. 하지만 inner = outer()을 통해 outer() 안의 익명 함수인 내부 함수가 외부환경으로 나오면서 외부 함수의 title을 참조하고 있기 때문에 변수 스코프는 outer() 가 실행되는 실행환경까지 확장됩니다.
이렇게 되면서 outer()가 실행이 종료되지만 외부 환경에서 변수 inner가 outer을 참조하고 있어서 outer함수는 변수 title로 인해 계속 실행 중의 상태로 놓이게 됩니다. 결국 메모리에서 사라지지 않고 사용 가능하게 됩니다.
정리하면, 실행환경에서 외부 함수 outer을 사용하는 inner변수를 통해 outer에서 반환하는 익명 함수가 실행환경까지 범위가 확장됩니다. 이 실행환경에서 익명 함수가 변수 title을 계속 참조하고 있기 때문에 외부 함수 outer가 실행이 종료되더라도 익명 함수는 실행환경 범위에서 변수 inner을 계속 참조하고 있습니다. outer함수는 종료되지 않고 실행 중 상태로 유지되고, 메모리에는 outer 함수의 변수와 스코프 관계를 유지할 수 있습니다.
클로저의 조건은 아래와 같습니다.
- 내부 함수가 익명 함수로 되어 외부 함수의 return값으로 사용되어야 합니다.
- 반환되는 내부 함수는 외부 함수의 실행환경에서 실행됩니다.
- 내부 함수에서 사용되는 변수는 외부 함수의 변수 스코프에 있어야 합니다.
그렇다면 클로저는 어떤 상황에서 사용해야 할까요?
Javascript의 변수들은 기본적으로 public으로 되어 있습니다. 객체 지향 중에서 지향하는 캡슐화의 형태로 만들려면 클로저를 사용해야 합니다. 외부에서 title이라는 변수에는 접근할 수 없지만, 내부에선 접근이 가능하기 때문입니다. 그리고 다른 범위에서 title이라는 변수를 선언했다 하더라도 outer함수의 title과 겹칠 위험이 있기 때문에 클로저를 사용해야 합니다.
정리하면, 전역 변수의 잘못 사용 없이 깔끔한 코드 작성, Javascript에 적합한 방식의 코드 작성, 다양한 Javascript의 디자인 패턴 적용 등 을 위해 클로저를 사용합니다.
매직테이블도 Javascript기반인 Vue.js를 사용하는 만큼 사이드 이펙트를 제거하고, private 변수 사용 등을 위해 클로저를 사용합니다. 여기서 말하는 private 변수는 함수 바깥에서 접근할 수 없는 변수를 말합니다. 종종 함수 밖에서 접근을 해야 하는 경우가 있는데, 이 경우 클로저가 적합합니다.
지금까지 클로저에 대해서 간단히 정리를 해 보았습니다. 매직테이블 역시 위에서 언급한 이유들 때문에 클로저 사용을 지향하고 있습니다. 뿐만 아니라 Javascript의 기능을 적용하기 위해 꾸준히 스터디를 하고 있습니다. 앞으로도 더 좋은 품질의 서비스를 만들어 나가기 위해 새로운 기술이 나오면 적용하는 시도를 이어가고자 합니다.
원문: 매직테이블의 브런치
