[JS] Closure 클로저

Closure

클로저는 함수와 그 함수가 선언된 lexical environment와의 조합이다.

클로저는 상태를 안전하게 변경하고 유지하기 위해 사용한다.

공식문서의 예제와 설명을 한 번 보자.

function makeFunc() {
  const name = "Mozilla";
  function displayName() {
    console.log(name);
  }
  return displayName;
}

const myFunc = makeFunc();
myFunc();

이 코드는 전 예제의 init() 함수와 완전히 동일한 결과가 실행됩니다. 다른 점(그리고 흥미로운 점)은 displayName() 내부 함수가 실행되기 전에 외부 함수에서 반환된다는 점입니다.

한눈에 봐서는, 이 코드가 여전히 작동하는 것이 직관적으로 보이지 않을 수 있습니다. 몇몇 프로그래밍 언어에서, 함수 안의 지역 변수들은 그 함수가 처리되는 동안에만 존재합니다. makeFunc() 실행이 끝나면, name 변수에 더 이상 접근할 수 없게 될 것으로 예상하는 것이 일반적이지만, 코드는 여전히 예상대로 작동하기 때문에 JavaScript에서는 분명히 다릅니다.

그 이유는 JavaScript의 함수가 클로저를 형성하기 때문입니다. 클로저는 함수와 함수가 선언된 어휘적 환경의 조합입니다. 이 환경은 클로저가 생성된 시점의 유효 범위 내에 있는 모든 지역 변수로 구성됩니다. 예시의 경우, myFunc은 makeFunc이 실행 될 때 생성된 displayName 함수의 인스턴스에 대한 참조입니다. displayName의 인스턴스는 변수 name 이 있는 어휘적 환경에 대한 참조를 유지합니다. 이런 이유로, myFunc가 호출될 때 변수 name은 사용할 수 있는 상태로 남게 되고 "Mozilla" 가 console.log 에 전달됩니다.

결국, 클로저는 상태가 의도치 않게 변경되지 않도록 정보 은닉을 하고,

특정 함수에게만 정보의 변경을 허용하여 상태에 대해 안전한 변경과 유지하도록 한다.