오늘은 Closure에 대해 정리를 해보겠다! Closure라는 개념을 개발할 때 사용해보지 않아서 (사용해도 의식하지 못해서?) 정리를 해도 자주 잊게되는 거 같다. 이번 기회에 뇌리에 깊게 남게끔 해보자 !
Closure란 ❓
정리를 먼저해보면 내가 내린 결론은 다음과 같다.
Closure: 렉시컬 환경에서 종료된 함수의 내부를 외부에서 참조할 수 있는 경우
더 쉽게 설명해보자 마치 7살 아이에게 설명하는 것처럼 그렇다면
클로저란 이미 종료된 함수를 외부에서 사용하는 현상
영어의 해석은 Closure= 동봉
이라는 뜻이 있다. 즉 렉시컬환경에서의 내부 함수가 동봉된 채 외부까지 전달이 되는 것이다!
렉시컬 환경이 뭐였지 ❓
렉시컬 환경이란 함수는 선언될 때 내부의 값들이 바인딩 된다는 것이다.
그냥 렉시컬 환경은 정적 환경이다. 자바스크립트의 함수 선언 스코프는 선언이 될 때 형성이 되어 정적 스코프에 해당한다. 그렇기 때문에 정적스코프와 렉시컬 스코프는 같은 말이 된다.
즉, 이미 태어날 때 다 정해져 있는 것이다. 자바스크립트의 함수와 변수는 태어날 때 모든 값이 바인딩 될 준비가 되어 있다!
코드로 살펴보기 ❗️
먼저 내부함수를 외부에서 사용한다는 예시를 들어보겠다!
function Outer(){
const hello = "HELLO"
function Inner(){
console.log(hello)
}
return Inner
}
const print = Outer()
print() // HELLO 출력
위 코드를 보면 외부 Outer를 호출했는데 내부에서 종료된 Inner 함수를 사용할 수 있다.
이를 이용해서 좀 더 복잡한 계산기를 만들 수 있다.
function 계산기(초기값){
return function 덧셈(숫자){
return 초기값 + 숫자
}
}
const 숫자일 = 계산기(1)
console.log(숫자일(2))
//3
console.log(숫자일(3))
//4
console.log(숫자일(4))
//5위 함수처럼 숫자 1이 동봉되어 계산기로서의 초기값 역할을 사용할 수 있다. 덧셈 함수는 내부 함수로 초기값을 스코프 체이닝을 통해 바인딩되는데 이는 매개변수값이 된다. 그리고 내부의 숫자 매개변수를 외부에서 바인딩하며 최종 계산값을 도출해낼 수 있다.
정리 ❗️
클로저는 사실 이렇게 이해하면 좋을 거 같다.
3가지로 정의해보면
- 내부함수의 스코프가 종료되어도 외부함수에서 내부함수를 참조하는 현상
- 내부함수의 변수를 동봉하여 외부함수에서 계속 사용하는 현상
- 렉시컬 환경 밖에서 실행될 때도 그 스코프에 접근할 수 있게 하는현상
