클로저란 무엇인가?

mdn에서 정의한 내용을 보자

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

간단히 설명해보자면 함수가 선언될 때 (실행x) 외부의 lexcial environment를 참조하게 되는 현상

클로져 간단한 예제

함수의 실행컨텍스트를 간단히 알고 이해해야한다.
함수는 호출 될 때 함수의 실행컨텍스트가 생성됐다가 실행이 끝나면 실행컨텍스트가 종료됨 이 실행컨텍스트의 lexical environment에는 함수의 지역변수의 정보 & 이 함수의 상위 스코프의 대한 정보가 들어있다.

function outer(){
  const name = 'JeongTaek';
  console.log(name)
}
sayName() //JeongTaek
console.log(name) //error

여기서 변수 name을 함수 밖에서 사용하려면 어떻게 해야될까?
변수 name은 outer이라는 함수의 실행컨텍스트가 종료되면서 아무도 접근할 수 없게된다. name을 함수 밖에서도 사용하기 위해서는 클로져를 사용하면 된다.

function outer(){
  const name = 'JeongTaek';
  console.log(name)
  return function inner(){
    const greeting = 'hello!'
    console.log(greeting,name)
  }
}
const getJeongTaek = outer() //JeongTaek 
getJeongTaek() //hello!JeongTaek

예상대로면 outer함수 종료 후 name은 아무데서도 접근할 수 없다. 하지만 inner함수에서 접근이 가능하다.

클로저의 특성상 inner함수가 선언될 때 그 주변의 lexical enviroment(여기서는 outer의 lexical enviroment)와 함께 묶였기 때문이다.

그렇기 때문에 변수 name을 사용할 수 있게 된 것.

결론은 뭐냐.. 어느정도 클로저에 대해 이해했다고 생각했지만 깊게들어가면 아직도 어렵다. 더 열심히 공부하자..!