-
반응형
클로저를 mdn에서 찾아보면 아래와 같이 설명되어있다.
A closure is the combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment)
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures
함수
와 그 함수를둘러싼 Lexical enviroment의 combination
. 즉조합
이라고 설명되어 있습니다. 이는 실행컨텍스트 1탄의 스코프 체인이랑도 연관이 있습니다.fucntion person() { var first = "joon"; function firstName() { return frist; } }
person()의 컨텍스트에서 존재하는 firstName() 함수는
스코프 체인
으로 인해 first 변수에 접근이 가능한데 이처럼firstName() 함수
와 그 함수를 둘러싼person()이라는 컨텍스트
의조합
을클로저
라고 할 수 있습니다.예시
var plusTemp= function () { var temp = 1; var plus = function () { return ++temp; } return plus } var doPlus = plusTemp(); console.log(doPlus()); // 2 console.log(doPlus()); // 3
plusTemp 함수는 plus 함수를 리턴합니다. plusTemp 함수는 plusTemp의
Lexical enviroment
와plus 함수
의조합
으로 인해서클로저
가 됩니다.var doPlus = plusTemp(); // doPlus는 temp 식별자에 대한 정보(=1)도 갖고 있는 상태
즉 이 코드가 실행이 되면
doPlus
는plusTemp
의Lexical enviroment
를 가지고 있기 때문에 temp는 1이라는 정보를 계속 가지고 있게 됩니다. 그래서 밑 두 줄에서doPlus()
를 두번 호출 하였을 때 2와 3 이 출력되게 되는 것입니다.함수
와 식별자 정보를 담은Lexical enviroment
를 조합해서 가지고 있는 개념이기 때문입니다.이점
클로저는
함수와 특정 변수들 즉 변수들의 정보를 가지고 있게 할 수 있기
때문에 함수 종료 후에도사라지지 않는 지역 변수를 만들 수 있다는 이점
을 가지고 있습니다. 그래서커링(curring)
이라는 재밌는 함수도 만들 수 있습니다.반응형'코딩' 카테고리의 다른 글
자바스크립트 Prototype (0) 2021.09.20 자바스크립트의 기본적인 런타임 환경 (0) 2021.09.19 실행 컨텍스트 with this - 2 (0) 2021.09.15 실행 컨텍스트 with 호이스팅, 스코프체인 - 1 (0) 2021.09.14 자바스크립트 기본 데이터 타입 (0) 2021.09.12