[JS] 클로저 활용 예시

고정원·2021년 7월 1일
0

1Q/1Day

목록 보기
10/13
post-thumbnail

정재남,『코어자바스크립트』를 읽고 정리한 내용입니다. 이해가 부족한 부분은 책과 동일하게 작성하였습니다.

이전글에서 클로저의 의미와 작동원리를 정리하였습니다. 실제로는 어떻게 클로저를 활용하는지 정리해 보았습니다.

3. 클로저 활용사례

3.1 콜백함수 내부에서 외부 데이터를 사용하고자 할 때

대표적인 콜백함수 중 하나인 이벤트 리스너에 관한 예시이다.
📍클로저의 '외부데이터'의 흐름에 주목
1) 콜백함수를 내부함수로 선언해서 외부변수를 직접 참조, 클로저 사용
<예제>
2) bind메서드로 값을 직접 넘겨줌으로써 클로저는 발생하지 않지만, 여러 제약사항 발생
<예제>
3) 콜백함수를 고차함수로 바꿔서 클로저를 적극적으로 활용
<예제>

💡 위의 각 방법의 장단점을 파악하고, 구체적인 상황에 따라 어떤 방법이 효과적일지 고민해보기!

3.2 접근 권한 제어(정보은닉)

정보은닉이란?
어떤 모듈의 내부 로직에 대해 외부로의 노출을 최소화해서 모듈간의 결합도를 낮추고 유연성을 높이고자 하는 현대 프로그래밍 개념

흔히 권한에는 public(외부에서접근가능),private(내부에서만 사용),protected

JS는 기본적으로 변수 자체에 이런 접근권한 직접 부여할 수 없도록 설계되었다.
→ 클로저 이용하면 함수차원에서 public한 값과 private한 값 구분 가능
<예제>
return이용해서!!

  • outer함수는 외부(전역 스코프)로부터 철저히 격리된 닫힌 공간
    → 외부에서는 외부 공간에 노출돼 있는 outer라는 변수를 통해 outer함수를 실행은 가능하지만, outer함수 내부에는 어떠한 개입도 불가하다.
  • 외부에서는 오직 outer함수가 return한 정보에만 접근 가능!
    → return값이 외부에 정보를 제공하는 유일한 수단이다.

😜클로저를 활용한 접근권한 제어방법
1. 함수에서 지역변수 및 내부함수 등을 생성한다.
2. 외부에 접근권한을 주고자 하는 대상들로 구성된 참조형 데이터(대상이 여럿일 때는 객체 또는 배열, 하나일 때는 함수)를 return한다.
-> return한 변수들은 공개멤버, 그렇지 않은 변수들은 비공개 멤버

[참고한자료]
정재남, 『코어자바스크립트』, 위키북스(2019)

profile
해결문제에 대해 즐겁게 대화 할 수 있는 프론트엔드 개발자

0개의 댓글