[JavaScript] 클로저란 무엇인가?

클로저 ❓

함수와 함수가 선언된 어휘적 환경의 조합

이 환경은 클로저가 생성된 시점의 유효 범위 내에 있는 모든 지역 변수로 구성된다.

즉, 내부 함수에서 외부 함수에 있는 상태에 접근할 수 있는 권한을 부여한다는 것이다.

 

왜 사용할까 ❓

내부 정보를 은닉하고, 공개 함수(public 또는 외부)를 통한 데이터 조작을 위해 사용한다. (캡슐화, 정보은닉)

전역변수 또한 줄여지게 되므로 개발 과정에서 실수로 접근하는 일이 안생긴다. 

현재는 클래스에서의 private 필드 또는 메소드를 사용하면 된다.

 

어떻게 이것이 가능할까 ❓

 inner 렉시컬 환경이 외부 렉시컬 환경을 참조하고 있기 때문이다.

클로저를 잘 이해하려면 어떻게 변수의 유효범위를 지정하는지(Lexical scoping)를 먼저 이해해야 한다.

📌참고

실행 컨텍스트

• 식별자가 선언되는 환경으로, 코드의 실행순서와 스코프를 기억
• 스코프를 구분하여 식별자를 등록하고 관리하는 저장소 역할

렉시컬 환경은 3가지의 컴포넌트로 구성

• 환경 레코드(Environment Record)
• 외부 렉시컬 환경 참조(Outer Lexical Environment Reference)
•  this 바인딩(This binding)

 

📝 어휘적 범위 지정(Lexical scoping)

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

// 출력 결과: SeongHo

다음과 같이 displayName() 내부엔 자신만의 지역 변수가 없지만 , 부모 함수 init()에서 선언된 변수 name에 접근이 가능하다. 만약 자신만의 name 변수를 가지고 있다면, name 대신에 this.name을 사용했을 것이다.

📌 참고

lexical

어휘적 범위 지정(lexical scoping) 과정에서 변수가 어디에서 사용 가능한지 알기 위해 그 변수가 소스코드 내 어디에서 선언되었는지 고려한다는 것을 의미

 

📝 클로저 예제 코드

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

function selectName() {
  const name = 'SeongHo';
  function displayName() {
    console.log(name);
  }
  return displayName;
}

// myName변수에 displayName을 리턴함(참조 값 전달)
// 유효범위의 어휘적 환경을 유지
const myName = selectName();
// 리턴된 displayName 함수를 실행(name 변수에 접근)
myName();

자바스크립트는 함수를 리턴하고, 리턴하는 함수가 클로저를 형성하므로  selectName() 함수의 실행이 끝나더라도 name 변수에 접근이 가능하다.

 

📝 class에서 private 필드를 사용한 코드

class selectName {
  #name = 'SeongHo';
  displayName() {
    console.log(this.#name);
  }
}

const myName = new selectName();
myName.displayName();

 

마무리..

아직 전부를 이해하기에는 어려움이 많다.. 하하

클로저를 완벽하게 이해하려면 스코프와 렉시컬 환경에 대해서 더 공부가 필요하다..

하나하나씩 지식을 습득하면서 블로그에 포스팅하다 보면 괜찮은 개발자가 되지 않을까❓❓

이 글을 보고 잘못된 부분에 대한 댓글을 남겨주시면 감사하겠습니다.

 

📚 참고 문헌

https://developer.mozilla.org/ko/docs/Web/JavaScript/Closures

클로저 - JavaScript | MDN