JavaScript 클로저 기본 개념

binu·2023년 2월 11일
0
post-thumbnail

클로저란?

클로저는 함수와 함수가 선언된 어휘적 환경(렉시컬 환경)의 조합으로,
간단히 말하자면 내부 함수가 외부 함수 변수에 접근 가능한 것을 의미한다.

어휘적 환경(Lexical scoping)은 무엇?

// 예제 코드 출처: MDN - Closures

    function init() {
      var name = "Mozilla"; // name은 init에 의해 생성된 지역 변수이다.
      function displayName() { // displayName() 은 내부 함수이며, 클로저다.
        alert(name); // 부모 함수에서 선언된 변수를 사용한다.
      }
      displayName();
    }
    init();

displayName함수를 기준으로 init함수는 외부 함수이다. 따라서 init함수에서 생성된 'name'이라는 변수는 displayName 함수 기준으로 외부 변수인데, displayName은 내부함수인 동시에 클로저이기 때문에 해당 변수(name)를 사용할 수 있다.

여기서 어휘적 환경(Lexical scoping)은
변수가 어디에서 사용 가능한지 알기 위해 그 변수가 소스코드 내 어디에서 선언되었는지를 고려한다는 것을 의미한다.

중첩된 함수는 외부 범위(scope)에서 선언한 변수에도 접근할 수 있다.

클로저 은닉화

클로저 은닉화는 변수 또는 메소드를 프라이빗하게 관리하는 것을 의미한다.

프라이빗한 관리는 왜?

프라이빗한 관리는 코드에 제한적인 접근만을 허용한다는 점 뿐만 아니라, 전역 네임 스페이스를 관리하는 방법을 제공하여 불필요한 메소드가 공용 인터페이스를 혼란스럽게 만들지 않도록 한다는 점에서 유용할 수 있다.

클로저 스코프 체인

모든 클로저에는 아래의 총 세 가지 스코프가 있다.

  • 지역 범위 (Local Sope)
  • 외부 함수 범위 (Outer Functions Scope)
  • 전역 범위 (Global Scope)



🧐 함수를 변수에 저장하는 이유 생각해보기

    클로저 강의를 보던 중 문득 '함수를 변수에 저장하는 경우도 있고, 아닌 경우도 있는데 그 차이는 무엇일까?'하는 생각이 들었다. 함수 강의를 들을 때, 다른 예제를 공부할 때는 그런 생각이 없었는데 아무튼 문득 그런 의문이 들었다. 스택오버플로우와 다른 블로그 글을 구글링 해보고, 갖고 있는 책도 뒤적여보았다.

    변수에 저장하면 '클로저'가 생성되고, 그렇지 않고 Function 생성자 함수만으로 생성하게 되면 함수 재정의에도 문제가 발생할 수 있다. 모든 함수를 변수에 저장할 필요는 없으나, 위 내용이 필요한 경우에는 변수에 저장하여 사용한다.

    만족스러운 이유를 찾은 것 같진 않다. 이유에 만족하고 말고 할 것은 없지만, 어딘가 시원하게 해결되지 못한 기분이다. 일단 그렇다니 그렇다고 생각하고 다른 것들을 공부하도록 해야겠다. 나중에 만족스러운(?) 이유를 찾으면 다시 남겨보도록 해야겠다.




참고한 글
📚 MDN:: 클로저
📚 Stackoverflow:: When should I store a function into a variable?
📚 Stackoverflow:: When would it be ideal to store a function into a variable?

profile
예비 프론트엔드 개발자, 아기 binu

0개의 댓글