5-5 클로저

클로저 개념 : 함수와 렉시컬 환경과의 조합

return function()

{

}

이나

const 함수명 = fuction()

{

 

}

return 함수명

으로 함수를 리턴 시켜주기

 

 

 

출력값 x는 무엇인가?

 

1. inner 함수 내부에서 x가 선언 및 초기화가 있는지 찾아본다.

2. inner함수(구현부분) 외부 함수가 존재하는지 보고 있으면

그 함수 내부에 x가 선언 및 초기화 되는지 찾는다.

3. 외부 함수에도 없다면 전역에

x가 선언 및 초기화 되는지 찾는다.

 

x : 10

 

동일한 방법으로

 

출력값 x는 무엇인가?

 

 

예상

10

실제

1

 

x가 1인 이유는

 

innerFunc()함수 '호출'이 outerFunc() 함수

내부에 있다고 함수 '정의' 부분이

outerFunc() 내부에 있는게 아니다!!!

( innerFunc와 outerFunc는 서로 다른 scope를 가진다 )

(함수를 어디에 '정의' 했는지에 따라서 상위 scope가 결정된다)

 

 

클로저와 렉시컬 환경

- 외부 함수보다 중첩 함수가 더 오래 유지되는 경우,

중첩 함수는 이미 생명 주기가 종료한

외부 함수의 변수를 여전히 참조할 수 있다.

위의 소스코드로 설명해보면

 

const innerFunc = outer()로

outer 함수의 실행 및 return 부분을

innerFunc에 담는다.

 

변경 후

위와 같이 innerFunc 안에 x 변수의 선언과 값이 없더라도 outer 함수의 const x = 10이 살아남아 console.log(x)로 10이 출력된다. => 클로저의 개념

x

10

 

 

문제 1

 

출력 값은

예상

3

실제

3

 

 

문제 2

출력 값은

예상

1

실제

1

 

 

문제 3

예상

1

실제

1

 

클로저 활용

 

1. 의도치 않은 변경은 방지하면서 + 이전 상태 유지하기

 

위와 같은 코드의 경우 

num이 100으로 변경 돼

101, 102가 출력되는걸 볼 수 있다.

 

그래서 let num을 지역 변수로 바꿔주면

 

num이 increase함수 호출에 따른

생성 및 초기화가 반복 돼

1

1

1

이 출력되는걸 볼 수 있다.

 

의도치 않은 변경은 방지하면서 + 이전 상태 유지하기

하기 위해서 클로저(return 함수)를 활용하면

 

클로저를 활용하면

 

위와 같이 지역 변수 num이 가비지 콜랙션에 의해

사라지지 않고, 값을 유지해

 

1

2

3

 

이 출력 되는걸 볼 수 있다.

 

의도치 않은 변경은 방지하면서 + 이전 상태 유지할 수 있었다!