해당 블로깅은 인프런의 강의를 들으며 공부한 내용을 정리한 글입니다.
ES5 기준 핵심 내용을 공부하면서 작성하는 블로깅
클로저의 사전적 정의 - 닫힘 / 폐쇄 / 완결성
mdn에선 이렇게 정의한다.
클로저는 함수와 그 함수가 선언될 당시의
lexical environment
의 조합이다.
개인적으로 모든 클로저에 대한 한줄정의를 보았지만, 와닿는 표현이 없는것 같다.
클로저는 우선 특수한 현상에서 발생한다.
function outer() { var num = 1; function inner() { return num++; } return inner; } var plusNumber = outer(); console.log(plusNumber()); console.log(num);
- 전역 컨텍스트가 열림
outer
함수,plusNumber
변수가environmentRecord
에 수집됨- 전역 컨텍스트 위 부터 한줄씩 실행됨
outer
를 호출함outer
함수의 컨텍스트가 열림.
num
변수,inner
함수가environmentRecord
에 수집됨outer
의 코드 한줄씩 실행
->num
에 1을 할당
->inner
함수 리턴outer
컨텍스트가 닫히고 전역 컨텍스트로 돌아옴plusNumber
에inner
함수가 할당됨plusNumber
를 실행하면서inner
실행 컨텍스트가 열림num
이라는 변수를 찾기위해environmentRecord
를 찾아보지만 없어서outerEnvironmentReference
을 접근해 num을 참조함- 그래서
plusNumber()
의 콘솔은num
의 값을 접근하여 출력- 하지만 그냥
num
을 출력시 현재 컨텍스트의environmentRecord
에num
이 존재하지않아undefined
또는error
를 발생시킴
위의 예제가 클로저가 발생하는 특수 상황이다.
콘솔의 결과를 확인해보면 plusNumber
를 호출했을때 리턴되는 num
의 값은 정상적으로 출력이 되지만, num
자체를 출력해보려하면 undefined
가 된다. 이 num
이라는 변수가 현재 Closure
현상에 속한다.
클로저는 A
라는 실행컨텍스트에 선언된 B
라는 함수
에서 A
에 선언된 변수
를 참조를 하는데, B
라는 함수가 A
가 아닌 다른 컨텍스트에서 호출이 되면서 A
의 컨텍스트가 끝나더라도 A에 선언된 변수
가 가비지 컬렉션에 의해 지워지지 않고 참조되는상태라고 나는 정리를 했다.
클로저는 지역변수를 외부에서 접근하지 못하도록 보호하며, 함수 컨텍스트가 종료되어도 사라지지 않는 지역변수를 만들 수 있다.