JavaScript - 클로저(Closure)

1. 클로저란

MDN정의 클로저란
주변의 상태 (lexical environment)의 참조와 함께 번들로 묶인 함수의 조합입니다. 즉, 클로져는 우리에게 inner함수에서 outer함수의 스코프에 접근을 가능하게 해줍니다. 자바스크립트에서 클로저는 함수가 생성될 때마다 생성됩니다.

2. 실행 컨텍스트란

함수는 호출 될 때 함수의 실행컨텍스트가 생성됐다가 실행이 끝나면 실행컨텍스트가 종료된다. (힘수의 실행 컨텍스트가 생성될 때 함수의 lexical environment도 생성된다.)
이 실행컨텍스트의 lexical environment에는 함수의 지역변수의 정보& 이 함수의 상위 스코프의 대한 정보가 들어있다.

3. 클로저 예시

function callName(){
  const name = 'minsu';
  console.log(name)
}
callName() // misnu
console.log(name);

위 코드를 보면 name이라는 변수를 함수 밖에서 호출할 시 함수의 실행 컨텍스트가 종료되어 외부에서는 함수 내 변수 name에 접근할 수 없습니다.

접근하기 위해서 클로저를 사용하는 방법이 있습니다.

function callName(){
  const name = 'mina'
  console.log(name)
  return function inner(){
    const action = ' say hi'
    console.log(action, name)
  }
}
const getName = callName() // mina
getName() // say hi mina

위 코드 예시는 inner함수가 선언될 때 주변 렉시컬 환경(callName 렉시컬환경)과 함께 번들로 묶였다. inner함수가 실행 되어 렉시컬 환경을 만든 뒤 참조하지 않아도 선언할 때 이미 묶인것이다(name 변수 접근 가능)

4. 클로저는 언제 사용할까

1) 전역변수를 줄일 경우
2) 코드의 재사용률을 높일 경우